深入浅出ES6语法要点 | 实践出真知与真义

2023-11-04 19:28:43

ES6 常用语法小结

1. let 与 const

let & const 都是块级作用域，推荐使用 let 和 const，而不是 var。不同点：let 是定义的变量可以重新赋值，const 定义的变量不可以重新赋值。

// let 变量
let name = "John";
name = "Jane";
console.log(name); // 输出: Jane

// const 变量
const age = 25;
age = 30; // 报错: TypeError: Assignment to constant variable.

2. 箭头函数

箭头函数是 ES6 中引入的一种新函数语法。箭头函数没有自己的 this ，总是继承外层函数的 this。箭头函数没有自己的 arguments 对象，可以使用 rest 参数来代替。箭头函数不能使用 yield 关键字，不能使用 new 关键字来调用。

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

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

3. rest 参数

rest 参数是用来收集函数的多余参数的。rest 参数必须是函数的最后一个参数。rest 参数是一个数组，可以用来存储任意数量的参数。

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

4. spread 运算符

spread 运算符是用来将数组或对象展开为一系列元素的。spread 运算符可以用于函数调用、数组连接和对象合并。

// 函数调用
const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 输出: 3

// 数组连接
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [...array1, ...array2];
console.log(array3); // 输出: [1, 2, 3, 4, 5, 6]

// 对象合并
const object1 = {
  name: "John",
  age: 25
};
const object2 = {
  city: "New York",
  country: "USA"
};
const object3 = {
  ...object1,
  ...object2
};
console.log(object3); // 输出: { name: "John", age: 25, city: "New York", country: "USA" }

5. 解构赋值

解构赋值是一种从数组或对象中提取值的语法。解构赋值可以用于变量声明、函数参数和对象字面量。

// 数组解构赋值
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3

// 对象解构赋值
const person = {
  name: "John",
  age: 25,
  city: "New York"
};
const { name, age, city } = person;
console.log(name); // 输出: John
console.log(age); // 输出: 25
console.log(city); // 输出: New York

6. 模块

模块是 ES6 中引入的一种新的组织代码的方式。模块可以被导入和导出。模块可以用来将代码组织成更小的、更易于管理的单元。

// 创建一个名为 "module1.js" 的模块
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 在另一个模块中导入 "module1.js" 模块
import { greet } from "./module1.js";
greet("John"); // 输出: Hello, John!

7. 类

类是 ES6 中引入的一种新的语法，用于创建对象。类可以包含属性和方法。类可以被继承和扩展。

// 创建一个名为 "Person" 的类
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.`);
  }
}

// 创建一个名为 "John" 的 Person 对象
const john = new Person("John", 25);

// 调用 Person 对象的 greet() 方法
john.greet(); // 输出: Hello, my name is John and I am 25 years old.