原文合集地址如下，有需要的朋友可以关注

本文地址

ES6新特性

ES6（ECMAScript 2015）是 JavaScript 的一个重要版本，引入了许多新的语法和功能，增强了语言的表达能力和开发体验。以下是 ES6 中一些重要的新特性的全面总结：

1. let 和 const 声明：
   let 和 const 是新的变量声明关键字，用于定义块级作用域的变量。let 允许变量被重新赋值，而 const 则定义一个不可变的常量。

2. 箭头函数：
   箭头函数使用更简洁的语法定义函数，并自动绑定外部作用域的 this 值。适用于简短的函数和回调函数。

3. 模板字符串：
   模板字符串使用反引号 `` 定义字符串，可以在其中插入变量和表达式，使字符串拼接更加方便。

4. 解构赋值：
   解构赋值允许从数组或对象中提取值并赋给变量，使得变量的赋值更加简洁。

5. 默认参数：
   可以在函数参数中为参数设置默认值，使得调用函数时可以省略一些参数。

6. 展开运算符：
   展开运算符 ... 可以将数组或对象展开为单独的元素或属性，方便进行数组合并、函数参数传递等操作。

7. 类和继承：
   引入了类和面向对象编程的语法，更易于创建和继承对象。

8. 模块化：
   引入了 import 和 export 关键字，支持模块化编程，让代码更结构化和可维护。

9. 迭代器和生成器：
   迭代器和生成器提供了更强大的迭代和异步编程方式，可以简化异步操作的处理。

10. Promise：
    Promise 提供了更便捷的处理异步操作的方式，避免了回调地狱，改善了代码的可读性。

11. Symbol 和 Map/Set：
    Symbol 是一种新的数据类型，用于创建唯一的属性键。Map 和 Set 是新的数据结构，分别用于键值对和集合。

• Symbol：
  Symbol 是 ES6 中引入的一种新的原始数据类型，用于创建独一无二的值。每个通过 Symbol() 创建的值都是唯一的，不会与其他值相等。Symbol 可以用作对象属性的键，用于避免命名冲突。

  const uniqueSymbol = Symbol('description'); // 创建一个带有描述的 Symbol
  const obj = {
    [uniqueSymbol]: 'some value'
  };
  

• Map：
  Map 是一种新的数据结构，它是一种键值对的集合，与对象不同，Map 的键可以是任何类型的值，包括对象、函数等，而不仅仅是字符串。Map 的键值对在插入顺序上保持有序。

  const map = new Map();
  map.set('key1', 'value1');
  map.set('key2', 'value2');
  
  console.log(map.get('key1')); // 输出 'value1'
  console.log(map.size); // 输出 2
  

• Set：
  Set 是一种类似于数组的数据结构，但它的值是唯一的，不允许重复。它提供了一种存储无重复值的集合的方式。

  const set = new Set();
  set.add('value1');
  set.add('value2');
  set.add('value1'); // 重复的值不会被添加
  
  console.log(set.has('value1')); // 输出 true
  console.log(set.size); // 输出 2
  

12. 模块化的 Math 和 Number 方法：
    Math 和 Number 对象的方法现在以模块化的方式提供，可以通过 Math.xxx 和 Number.xxx 来访问。

数组

ES6在数组上新增了以下几种方法:

1. Array.from()
   从类数组对象中创建数组,可传入map函数。

js
let arrayLike = {0: 'a', 1: 'b', length: 2}
let arr = Array.from(arrayLike, x => x.toUpperCase())
// ['A', 'B']

2. Array.of()
   创建数组实例,参数为数组元素。

js 
let arr = Array.of(1, 2, 3)
// [1, 2, 3]

3. find()
   找到第一个符合条件的元素

js
let arr = [1, 2, 3] 
let found = arr.find(x => x > 1) // 2

4. findIndex()
   找到第一个符合条件元素的下标

js
let arr = [1, 2, 3]
let index = arr.findIndex(x => x > 1) // 1

5. fill()
   使用指定值填充数组

js
let arr = new Array(3).fill(0) // [0, 0, 0]

6. copyWithin()
   选择源数据,拷贝到指定位置

js
let arr = [1, 2, 3, 4] 
arr.copyWithin(2, 0, 2) // [1, 2, 1, 2]

7. entries()/keys()/values()
   遍历数组
8. includes()
   检查数组是否包含某个值,返回布尔值。

js
let arr = [1, 2, 3]
arr.includes(2) // true

9. flat()
   将多维数组转为低一级的数组。

js 
let arr = [1, [2, 3]]
arr.flat() // [1, 2, 3]

10. flatMap()
    先对数组元素执行map,再flat。

js
let arr = [1, 2, 3]
arr.flatMap(x => [x * 2]) // [2, 4, 6] 

11. at()
    取得给定索引处的元素,支持负索引。

js
let arr = [1, 2, 3]
arr.at(-1) // 3

12. sort()优化
    内置了对数字的正确排序。

对象

ES6 在对象的语法和 API 上也引入了一些重要的改进。以下是 ES6 在对象上新增的一些语法和 API 的详细总结：

1. 对象字面量增强：
   ES6 允许在对象字面量中使用变量作为属性名，而不必显式声明属性名。例如：

   const key = 'name';
   const person = {
     [key]: 'John',
     age: 30
   };
   

2. 对象的方法缩写：
   在对象字面量中，如果一个属性的值是一个函数，可以将函数的 function 关键字省略。

   const person = {
     name: 'John',
     sayHello() {
       console.log(`Hello, ${this.name}!`);
     }
   };
   

3. Object.assign(target, ...sources)：
   这个静态方法用于将一个或多个源对象的属性复制到目标对象，可以用于对象的合并。

   const obj1 = { a: 1, b: 2 };
   const obj2 = { b: 3, c: 4 };
   const mergedObj = Object.assign({}, obj1, obj2);
   

4. Object.keys(obj)、Object.values(obj) 和 Object.entries(obj)：
   这些静态方法分别返回一个数组，用于遍历对象的键、值和键值对（键和值组成的数组）。

5. Object.getOwnPropertyDescriptor(obj, prop) 和 Object.defineProperty(obj, prop, descriptor)：
   getOwnPropertyDescriptor 方法获取对象属性的描述符，defineProperty 方法用于修改或定义对象属性的描述符。

6. Object.setPrototypeOf(obj, prototype) 和 Object.getPrototypeOf(obj)：
   setPrototypeOf 方法设置对象的原型，getPrototypeOf 方法获取对象的原型。

7. Object.is(value1, value2)：
   这个静态方法用于比较两个值是否严格相等，类似于 === 运算符，但对于 NaN 和 +0/-0 有不同的结果。

8. Object.getOwnPropertySymbols(obj)：
   这个静态方法返回一个数组，包含对象中的所有符号属性。

9. Object.freeze(obj)、Object.seal(obj) 和 Object.preventExtensions(obj)：
   这些静态方法用于分别冻结对象、密封对象（阻止添加和删除属性）、阻止对象扩展（阻止添加属性）。

10. Object.fromEntries(iterable)：
    这个静态方法用于将键值对的可迭代对象转换为一个对象。