ES6进阶，发现神秘知识点！

2023-10-25 22:59:42

ES6 进阶知识点解析

温故而知新，本文将讲一讲关于 ES6 中常用的一些知识点。在日常开发中，我们常常会用到 ES6 中的一些语法，在面试中也会被经常被问到相关 ES6 的知识，例如 let 和 const、箭头函数和普通函数有什么区别等等。

1. `let` 和 `const`

let 和 const 是 ES6 中引入的两种新的变量声明方式。let 声明的变量可以重新赋值，而 const 声明的变量则不能重新赋值。

let x = 10;
x = 20; // 重新赋值

const y = 10;
y = 20; // 报错：常量不能被重新赋值

2. 箭头函数和普通函数

箭头函数是 ES6 中引入的一种新的函数语法。箭头函数没有自己的 this ，并且没有 arguments 对象。

// 普通函数
function add(x, y) {
  return x + y;
}

// 箭头函数
const add = (x, y) => {
  return x + y;
};

// 简写箭头函数
const add = (x, y) => x + y;

3. 模板字符串

模板字符串是 ES6 中引入的一种新的字符串语法。模板字符串允许我们在字符串中嵌入变量和表达式。

const name = "John";
const age = 30;

// 普通字符串
const greeting = "Hello, my name is " + name + " and I am " + age + " years old.";

// 模板字符串
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

4. 解构赋值

解构赋值是 ES6 中引入的一种新的赋值语法。解构赋值允许我们将数组和对象的元素分解成单个变量。

// 数组解构赋值
const [a, b, c] = [1, 2, 3];

// 对象解构赋值
const { name, age } = { name: "John", age: 30 };

5. 扩展运算符

扩展运算符是 ES6 中引入的一种新的运算符。扩展运算符允许我们将数组和对象展开成一组元素。

// 数组扩展运算符
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5, 6];

// 对象扩展运算符
const person = { name: "John", age: 30 };
const newPerson = { ...person, job: "Developer" };

6. 剩余运算符

剩余运算符是 ES6 中引入的一种新的运算符。剩余运算符允许我们将数组和对象中的剩余元素收集到一个新的变量中。

// 数组剩余运算符
const numbers = [1, 2, 3, 4, 5, 6];
const [first, second, ...rest] = numbers;

// 对象剩余运算符
const person = { name: "John", age: 30, job: "Developer" };
const { name, ...rest } = person;

7. Symbol

Symbol 是 ES6 中引入的一种新的数据类型。Symbol 值是唯一的，并且不能被重新赋值。

const symbol1 = Symbol();
const symbol2 = Symbol();

console.log(symbol1 === symbol2); // false

8. Promise

Promise 是 ES6 中引入的一种新的异步编程机制。Promise 对象表示一个异步操作的结果，它可以处于三种状态：pending、fulfilled 和 rejected。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, world!");
  }, 2000);
});

promise.then((result) => {
  console.log(result); // Hello, world!
});