你还不知道的那些js语法糖！

JavaScript中的语法糖是指在语法层面上让代码更易于阅读、编写和理解，并不会对代码的功能产生影响的语法特性。

箭头函数

箭头函数的写法更加简洁，同时也可以避免 this 指向问题。

// 普通函数写法
function add(a, b) {
  return a + b;
}

// 箭头函数写法
const add = (a, b) => a + b;

解构赋值

解构赋值可以快速获取对象中的某些属性值。

// 普通写法
const obj = {a: 1, b: 2, c: 3};
const a = obj.a;
const b = obj.b;

// 解构赋值写法
const {a, b} = {a: 1, b: 2, c: 3};

模板字符串

模板字符串让字符串拼接更加方便，并且可以通过 ${} 插入变量。

// 普通写法
const name = 'World';
console.log('Hello, ' + name + '!');

// 模板字符串写法
const name = 'World';
console.log(`Hello, ${name}!`);

可选链操作符

可选链操作符可以简化检查对象属性是否存在的代码。

// 普通写法
const address = user && user.address;

// 可选链操作符写法
const address = user?.address;

Async / Await

Async / Await 可以让异步操作的代码更加简洁易读。

// 普通写法
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

// Async / Await 写法
async function fetchAndLogData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

Promise

Promise是一种处理异步操作的方式，可以更加清晰明了地表示异步操作的完成与否，并进行后续处理。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const num = Math.random();
    if (num > 0.5) {
      resolve(num);
    } else {
      reject('Error: number is too small.');
    }
  }, 1000);
});

promise.then(result => {
  console.log(`Success: ${result}`);
}).catch(error => {
  console.log(error);
});

map、filter、reduce等高阶函数

高阶函数可以简化数组的操作，使代码更加简洁易读

const arr = [1, 2, 3, 4, 5];
const squares = arr.map(num => num * num);
console.log(squares); // [1, 4, 9, 16, 25]

const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

const sum = arr.reduce((acc, cur) => acc + cur);
console.log(sum); // 15

短路运算符

使用&&和||短路运算符可以更加简洁地表示条件语句，避免了冗余代码的出现。

const age = 30;
const isAdult = age >= 18 && 'Yes' || 'No';
console.log(isAdult); // Yes

展开运算符

展开运算符可以将数组或对象展开为多个参数或元素，也可以将多个数组或对象元素并为一个

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

const obj1 = { name: 'John', age: 30 };
const obj2 = { gender: 'Male', occupation: 'Engineer' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'John', age: 30, gender: 'Male', occupation: 'Engineer' }

默认参数

默认参数可以在函数定义时给参数设置默认值，当没有传入参数时，使用默认值。

const greet = (name = 'guest') => `Hello, ${name}!`;
console.log(greet()); // Hello, guest!
console.log(greet('John')); // Hello, John!