现代 JS 语法回顾

JavaScript 在近些年不断更新，引入了许多新特性，使得开发者能够更加高效、简洁地编写代码。以下是一些常见的现代 JavaScript 语法特性，帮助开发者更好地掌握和使用这些功能。

1. 箭头函数（Arrow Functions）

箭头函数提供了一种更简洁的函数写法，并且绑定了词法作用域的 this，避免了传统函数中 this 指向问题。

示例：

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

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

优势：

• 更简洁的语法
• 自动绑定 this，避免了函数内部 this 的混淆

2. 解构赋值（Destructuring Assignment）

解构赋值允许从数组或对象中提取值，并将其赋给变量，简化了变量赋值的过程。

示例：数组解构

const arr = [1, 2, 3];

// 解构赋值
const [a, b] = arr;
console.log(a, b); // 1 2

示例：对象解构

const obj = { name: 'Tom', age: 25 };

// 解构赋值
const { name, age } = obj;
console.log(name, age); // Tom 25

3. 模板字符串（Template Literals）

模板字符串提供了一种更加简洁的字符串拼接方式，支持插入表达式和多行字符串。

示例：

const name = 'Tom';
const age = 25;

// 传统字符串拼接
const str1 = 'Hello, ' + name + '. You are ' + age + ' years old.';

// 模板字符串
const str2 = `Hello, ${name}. You are ${age} years old.`;

console.log(str1); // Hello, Tom. You are 25 years old.
console.log(str2); // Hello, Tom. You are 25 years old.

4. 默认参数（Default Parameters）

ES6 引入了函数参数的默认值，这样在函数调用时，如果没有传递参数，则使用默认值。

示例：

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest!
greet('Tom'); // Hello, Tom!

5. 扩展运算符（Spread Syntax）

扩展运算符可以展开数组或对象，常用于复制或合并操作。

示例：数组扩展

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

示例：对象扩展

const obj1 = { name: 'Tom', age: 25 };
const obj2 = { ...obj1, city: 'New York' };
console.log(obj2); // { name: 'Tom', age: 25, city: 'New York' }

6. Promise

Promise 是 JavaScript 提供的一个原生对象，用于处理异步操作，能够更好地处理回调地狱问题。

示例：

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Data fetched successfully!'), 1000);
});

fetchData.then(data => console.log(data)); // Data fetched successfully!

7. 类（Classes）

JavaScript ES6 引入了类的概念，使得面向对象编程更加简洁和直观。

示例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person('Tom', 25);
person.greet(); // Hello, my name is Tom and I am 25 years old.

8. 模块化（Modules）

ES6 引入了原生模块化支持，可以通过 import 和 export 语句导入和导出模块，使得代码结构更加清晰。

示例：

// 导出
export const greet = (name) => `Hello, ${name}!`;

// 导入
import { greet } from './greet.js';

console.log(greet('Tom')); // Hello, Tom!

9. 数组方法：forEach、map、filter、reduce

现代 JavaScript 提供了许多数组操作方法，方便我们进行遍历、过滤和归约等操作。

示例：

const arr = [1, 2, 3, 4];

// forEach
arr.forEach(item => console.log(item));

// map
const doubled = arr.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]

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

// reduce
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum); // 10

总结

现代 JavaScript 语法特性极大地提升了开发效率和代码的可读性。从箭头函数到模块化，所有这些特性都有助于使代码更简洁、可维护。如果你还没有掌握这些语法，建议尽早学习并在项目中加以应用。