JavaScript 实用方法

使用箭头函数

传统函数

function add(a, b) {  return a + b;}

箭头函数

const add = (a, b) => a + b;

对象属性简写

传统写法

const name = 'John';
const person = {  name: name};

简洁写法

const name = 'John';
const person = { name };

解构赋值

从对象中提取值

const person = { name: 'Alice', age: 30 };
const { name, age } = person;
console.log(name, age);

从数组中提取值

const arr = [1, 2, 3];
const [first, second, third] = arr;
console.log(first, second, third);

模板字符串

传统字符串拼接

const name = 'Bob';
const message = 'Hello, ' + name + '!';

模板字符串

const name = 'Bob';
const message = `Hello, ${name}!`;

可选链操作符（?.）

在访问可能为 null 或 undefined 的对象属性时，避免出现错误

传统方式

const person = { address: { city: 'New York' } };
const city = person && person.address && person.address.city;

使用可选链：

const city = person?.address?.city;

空值合并操作符（??）

当左侧的值为 null 或 undefined 时，返回右侧的值

传统方式

const value = null;
const result = value!== null && value!== undefined? value : 'default';

使用空值合并操作符

const result = value?? 'default';

使用扩展运算符（...）

数组复制 传统方式

 const arr1 = [1, 2, 3];
 const arr2 = arr1.slice();

简洁方式

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

函数参数合并

函数参数合并：传统方式

function combineArrays(arr1, arr2) {     
	return arr1.concat(arr2);   
}

简洁方式

  function combineArrays(...arrays) {     
  	return [].concat(...arrays);   
 }

利用隐式返回（在箭头函数中）

当箭头函数的主体只有一个表达式时，可以省略 return 关键字和大括号。

const double = num => num * 2;

使用对象方法简写

传统方式

const person = {  
	name: 'Alice',  
	sayHello: function() {    
		return `Hello, I'm ${this.name}!`;  
	}
};

简洁方式

const person = {  
	name: 'Alice',  
	sayHello() {    
		return `Hello, I'm ${this.name}!`;  
	}
};

利用数组方法简化循环

forEach 替代传统的 for 循环

传统方式

 const arr = [1, 2, 3];   
 for (let i = 0; i < arr.length; i++) {     
 	console.log(arr[i]);   
 }

简洁方式

 const arr = [1, 2, 3];  
 arr.forEach(item => console.log(item));

map 创建新数组

传统方式

const numbers = [1, 2, 3];   
const doubledNumbers = [];  
 for (let i = 0; i < numbers.length; i++) {     
 	doubledNumbers.push(numbers[i] * 2);   
 }

简洁方式

  const numbers = [1, 2, 3];   
  const doubledNumbers = numbers.map(num => num * 2);

利用逻辑运算符的短路特性

传统方式

let value;
if (condition) {  
	value = defaultValue;
} else {  
	value = someOtherValue;
}

简洁方式

const value = condition? defaultValue : someOtherValue;
// 或者
const value = condition && defaultValue || someOtherValue;