ES6 都用 3 年了，2024 新特性你敢不看？

一、近三年 ES6 常用知识点

1. 块级作用域（let 和 const）

解释

在 ES6 之前，JavaScript 只有全局作用域和函数作用域，使用 var 声明变量容易引发变量提升和作用域混乱问题。

而 let 和 const 引入了块级作用域，块级作用域是指由 {} 包裹的代码块，在这个代码块内声明的变量只能在该代码块内访问。let 用于声明可变的变量，const 用于声明常量，一旦声明必须赋值且不能重新赋值（如果是引用类型，其内部属性可以修改）。

代码案例 1

// let 块级作用域示例
{
    let localVar = 'I am zhifou';
    console.log(localVar); // 输出: I am zhifou
}
// console.log(localVar); // 报错，localVar 未定义

代码案例 2

// const 常量声明示例
const PI = 3.14;
// PI = 3.14159; // 报错，不能重新赋值
const person = { name: '知否技术' };
person.name = '迪丽热巴'; // 可以修改引用类型内部属性
console.log(person.name); // 输出: 迪丽热巴

2. 箭头函数

解释

箭头函数是 ES6 提供的一种更简洁的函数定义方式。它没有自己的 this、arguments、super 或 new.target，其 this 值继承自外层函数。语法上，当只有一个参数时可以省略括号，当函数体只有一条语句时可以省略花括号和 return 关键字。

代码案例 1

// 基本箭头函数示例
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5

代码案例 2

// 箭头函数与 this 示例
const obj = {
    name: '知否君',
    sayHello: function() {
        setTimeout(() => {
            console.log(`Hello, ${this.name}`); // 这里的 this 指向 obj
        }, 1000);
    }
};
obj.sayHello(); // 输出: Hello, 知否君

3. 模板字符串

解释

模板字符串使用反引号来包裹字符串，它可以嵌入表达式，通过 ${} 语法将变量或表达式的值插入到字符串中。还支持多行字符串，保留换行和缩进。

代码案例 1

// 嵌入表达式示例
const name = 'zhifou';
const message = `Hello, ${name}!`;
console.log(message); // 输出: Hello, zhifou!

代码案例 2

// 多行字符串示例
const multiLine = `
    This is a
    multi - line
    string.
`;
console.log(multiLine);

4. 解构赋值

解释

解构赋值允许从数组或对象中提取值并赋值给变量，使代码更加简洁。对于数组，按照元素的顺序进行赋值；对于对象，根据属性名进行赋值。

代码案例 1

// 数组解构示例
const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first, second, third); // 输出: 1 2 3

代码案例 2

// 对象解构示例
const person = {
    firstName: '科比',
    lastName: '布莱恩特',
    age: 20
};
const { firstName, lastName, age } = person;
console.log(firstName, lastName, age); // 输出: 科比 布莱恩特 20

5. 默认参数

解释

在函数定义时，可以为参数设置默认值。当调用函数时，如果没有传递该参数或者传递的值为 undefined，则使用默认值。

代码案例 1

// 函数默认参数示例
function greet(name = '迪丽热巴') {
    return `Hello, ${name}!`;
}
console.log(greet()); // 输出: Hello, 迪丽热巴!
console.log(greet('知否君')); // 输出: Hello, 知否君!

代码案例 2

// 多个默认参数示例
function calculate(a = 1, b = 2) {
    return a + b;
}
console.log(calculate()); // 输出: 3
console.log(calculate(3, 4)); // 输出: 7

6. 扩展运算符

解释

扩展运算符（...）可以将数组或对象展开。在数组中，可用于合并数组、复制数组等；在对象中，可用于合并对象、复制对象等。

代码案例 1

// 数组扩展运算符示例
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // 输出: [1, 2, 3, 4, 5, 6]

代码案例 2

// 对象扩展运算符示例
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // 输出: { a: 1, b: 2, c: 3, d: 4 }

7. 类和继承

解释

ES6 引入了 class 关键字来创建类，使 JavaScript 具有了更像传统面向对象语言的类语法。constructor 方法用于初始化对象，extends 关键字用于实现类的继承，子类可以继承父类的属性和方法，还可以重写父类的方法。

代码案例 1

// 类的基本使用示例
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}
const dog = new Animal('Dog');
dog.speak(); // 输出: Dog makes a noise.

代码案例 2

// 类的继承示例
class Cat extends Animal {
    speak() {
        console.log(`${this.name} meows.`);
    }
}
const cat = new Cat('Cat');
cat.speak(); // 输出: Cat meows.

8. Promise

解释

Promise 是一种处理异步操作的对象，用于解决回调地狱问题。它有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。可以通过 then 方法处理成功的结果，通过 catch 方法处理失败的结果。

代码案例 1

// Promise 基本使用示例
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
}
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

代码案例 2

// Promise 链式调用示例
function asyncTask1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task 1 completed');
        }, 1000);
    });
}
function asyncTask2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task 2 completed');
        }, 1000);
    });
}
asyncTask1()
  .then(result1 => {
        console.log(result1);
        return asyncTask2();
    })
  .then(result2 => console.log(result2))
  .catch(error => console.error(error));

二、2024 年新特性

1. 私有属性和方法的增强

解释

在 ES2024 中，私有属性和方法的使用更加灵活和严格。私有属性和方法以 # 开头，只能在类的内部访问，外部无法直接访问，增强了类的封装性。

代码案例 1

class SecretClass {
    #privateProperty = 'Secret';
    #privateMethod() {
        return this.#privateProperty;
    }
    publicMethod() {
        return this.#privateMethod();
    }
}
const secret = new SecretClass();
console.log(secret.publicMethod()); // 输出: Secret
// console.log(secret.#privateProperty); // 报错，外部无法访问私有属性

代码案例 2

class Calculator {
    #value = 0;
    #add(num) {
        this.#value += num;
    }
    increment() {
        this.#add(1);
        return this.#value;
    }
}
const calc = new Calculator();
console.log(calc.increment()); // 输出: 1

2. 数组和对象的扩展方法

解释

• 数组的 toSorted、toReversed、toSpliced ：这些方法会返回一个新的数组，而不会修改原数组，类似于 sort、reverse、splice 方法，但保持原数组不变。
• 对象的 with 方法：用于创建一个新对象，继承原对象的属性，并可以修改指定的属性。

代码案例 1

// 数组 toSorted 方法示例
const originalArray = [3, 1, 2];
const sortedArray = originalArray.toSorted();
console.log(sortedArray); // 输出: [1, 2, 3]
console.log(originalArray); // 输出: [3, 1, 2]

代码案例 2

// 对象 with 方法示例
const originalObject = { a: 1, b: 2 };
const newObject = originalObject.with({ b: 3 });
console.log(newObject); // 输出: { a: 1, b: 3 }
console.log(originalObject); // 输出: { a: 1, b: 2 }

3. 异步生成器和 for - await - of 循环的增强

解释

异步生成器是一种特殊的生成器，它可以产生异步值。for - await - of 循环用于遍历异步可迭代对象，简化了异步迭代的操作。

代码案例 1

async function* asyncGenerator() {
    let i = 0;
    while (i < 3) {
        await new Promise(resolve => setTimeout(resolve, 1000));
        yield i++;
    }
}
(async () => {
    for await (const value of asyncGenerator()) {
        console.log(value);
    }
})();

代码案例 2

class AsyncIterable {
    async *[Symbol.asyncIterator]() {
        let i = 0;
        while (i < 2) {
            await new Promise(resolve => setTimeout(resolve, 500));
            yield i++;
        }
    }
}
(async () => {
    const asyncIterable = new AsyncIterable();
    for await (const value of asyncIterable) {
        console.log(value);
    }
})();

通过上述内容，你可以全面了解近三年 ES6 常用知识点以及 2024 年的新特性，这些特性在现代 JavaScript 开发中起着重要作用。