ES6+核心特性全面浅析

文章目录

• • • 一、变量声明
    • 二、解构赋值
    • 三、模板字符串
    • 四、函数扩展
    • 五、扩展运算符
    • 六、数据结构
    • 七、类与继承
    • 八、模块化
    • 九、异步编程
    • 十、其他特性

ES6（ECMAScript 2015）及后续版本（统称ES6+）为JavaScript带来了诸多变革性新特性，这些特性从变量声明、函数定义、数据结构到异步处理等多个方面对JavaScript进行了全面升级和优化。以下是ES6+新特性的详细知识点：

一、变量声明

1. let与const：

   • let：声明变量，实现块级作用域，不会产生变量提升，不能重复声明。
   • const：声明常量，同样实现块级作用域，声明时必须初始化且不能重新赋值（但如果是对象，对象内的属性可以修改）。

2. 块级作用域：

   • 使用{}包裹的代码段形成块级作用域，在块级作用域内用let或const声明的变量外部无法调用。

二、解构赋值

1. 数组解构：

   • 从数组中按位置提取值并赋给变量，例如const [a, b, c] = [1, 2, 3];。
   • 可以使用剩余参数（...）收集剩余的值，例如const [a, ...rest] = [1, 2, 3, 4, 5];。

2. 对象解构：

   • 从对象中提取属性并赋给变量，例如const { name, age } = { name: 'Alice', age: 25 };。
   • 支持属性重命名，例如const { name: objName } = { name: 'Alice' };。
   • 可以嵌套解构，处理复杂对象结构。

三、模板字符串

1. 基础用法：

   • 使用反引号（`````）包裹字符串，支持多行文本和变量嵌入。
   • 变量嵌入使用${variable}语法，例如Hello, ${name}!。

2. 标签模板：

   • 在模板字符串前添加一个函数（标签函数），可以对模板字符串的内容进行自定义处理，如过滤、转义、格式化等。
   • 标签函数的第一个参数是一个数组，包含模板字符串中非嵌入部分的字符串片段；后续参数依次对应模板字符串中${}嵌入的表达式结果。

四、函数扩展

1. 箭头函数：

   • 使用=>语法定义函数，简洁且不会绑定自己的this，继承外层作用域的this。
   • 不能作为构造函数使用，不能使用arguments对象（可用剩余参数替代），不能使用yield命令。

2. 默认参数：

   • 函数参数可以设置默认值，当没有传递实参或实参为undefined时使用默认值。
   • 带有默认值的参数应放在参数列表的最后。

3. 剩余参数：

   • 使用...收集函数的多余参数为一个数组，例如function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }。
   • 剩余参数必须放在参数列表的最后一位。

五、扩展运算符

1. 数组扩展：

   • 将数组展开为单独的元素，用于创建新数组、合并数组或传递函数参数。
   • 例如，const arr1 = [1, 2]; const arr2 = [...arr1, 3, 4];。

2. 对象扩展：

   • 将对象的可枚举属性展开为键值对，用于创建对象副本、合并对象或覆盖属性（ES2018新增）。
   • 例如，const obj1 = { a: 1 }; const obj2 = { ...obj1, b: 2 };。

六、数据结构

1. Set：

   • 值集合，自动去重，提供add、delete、clear、has等方法。
   • 可用于数组去重，例如[...new Set(arr)]。

2. Map：

   • 键值对集合，键可以是任意类型，提供set、get、keys、values、entries等方法。

3. Symbol：

   • 独特的原始数据类型，用于对象键，确保键的唯一性。

七、类与继承

1. 类定义：

   • 使用class语法定义类，支持构造函数（constructor）、实例方法、静态方法（static）等。

2. 继承：

   • 使用extends关键字实现继承，支持super关键字调用父类构造函数和方法。

八、模块化

1. 模块导入与导出：

   • 使用import导入模块，export导出模块。
   • 支持默认导出（export default）和命名导出（export const）。

九、异步编程

1. Promise：

   • 表示异步操作的最终完成或失败，及其结果值。
   • 提供.then()、.catch()、.finally()等方法处理异步结果。

2. Async/Await：

   • 基于Promise的语法糖，使用async声明异步函数，await暂停执行直到Promise解决。
   • 使异步代码书写更加简洁明了。

十、其他特性

1. 迭代器（Iterator）与生成器（Generator）：

   • 迭代器提供了一种统一访问不同数据结构中元素的机制。
   • 生成器是特殊的函数，可以暂停执行并从暂停的位置继续执行，用于创建迭代器。

2. 新的字符串和数值方法：

   • 字符串新增includes()、startsWith()、endsWith()等方法。
   • 数值新增Number.EPSILON、Number.isInteger()等属性和方法。

3. Proxy与Reflect：

   • Proxy用于定义基本操作的自定义行为（如属性查找、赋值、枚举等）。
   • Reflect提供拦截JavaScript操作的方法，是Proxy处理对象的默认实现。