es6-es10新增了那些东西

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

ES6（也称为 ECMAScript 2015）到 ES10（也称为 ECMAScript 2019）期间，JavaScript 引入了许多重要的特性和改进。以下是从 ES6 到 ES10 每个版本新增的关键功能：

ES6 (ECMAScript 2015)

ES6 是 JavaScript 的一个重大版本，引入了许多新的语言特性，增强了语言的表达能力和可维护性。

1. let 和 const
   新的变量声明方式，用于替代 var。

   • let：用于声明块级作用域的变量。
   • const：用于声明常量，值不可更改。

   let a = 10;
   const b = 20;
   

2. 箭头函数 (Arrow Functions)
   语法简洁的函数表达式，且绑定 this 的方式不同。

   const add = (x, y) => x + y;
   

3. 模板字符串 (Template Literals)
   支持多行字符串和插入变量的字符串。

   const name = 'John';
   const greeting = `Hello, ${name}!`;
   

4. 类 (Classes)
   引入面向对象的类语法，提供了继承、构造函数等特性。

   class Person {
     constructor(name) {
       this.name = name;
     }
   }
   

5. 模块化 (Modules)
   支持 import 和 export 来导入和导出模块。

   // module.js
   export const pi = 3.14;
   
   // app.js
   import { pi } from './module';
   

6. 解构赋值 (Destructuring Assignment)
   允许从数组或对象中提取值，并将其赋给变量。

   const [x, y] = [1, 2];
   const { name, age } = { name: 'John', age: 30 };
   

7. 增强的对象字面量 (Enhanced Object Literals)
   对象字面量可以使用简洁的语法来定义方法和属性。

   const name = 'John';
   const person = {
     name,
     greet() { console.log('Hello'); }
   };
   

8. Promise
   引入了 Promise 来处理异步操作，使得回调地狱问题得到缓解。

   const fetchData = () => new Promise(resolve => resolve('Data'));
   

9. Symbol
   新的原始数据类型，用于创建匿名的唯一值，主要用于对象属性的键。

   const sym = Symbol('description');
   

10. 迭代器和生成器 (Iterators & Generators)

    • 迭代器：提供一种访问集合元素的机制。
    • 生成器：通过 function* 声明的函数，可以暂停和恢复执行。

    function* gen() {
      yield 1;
      yield 2;
    }
    

---

ES7 (ECMAScript 2016)

1. Array.prototype.includes()
   用于判断数组中是否包含某个元素，替代 indexOf()。

   const arr = [1, 2, 3];
   console.log(arr.includes(2)); // true
   

2. 指数操作符 (**)
   引入了指数运算符，用于幂运算。

   console.log(2 ** 3); // 8
   

---

ES8 (ECMAScript 2017)

1. async 和 await
   用于简化异步代码，使得 Promise 更易于理解和使用。

   async function fetchData() {
     const data = await fetch('https://api.example.com');
     return data.json();
   }
   

2. Object.values() 和 Object.entries()

   • Object.values()：返回对象的所有值。
   • Object.entries()：返回对象的所有键值对数组。

   const obj = { a: 1, b: 2 };
   console.log(Object.values(obj));  // [1, 2]
   console.log(Object.entries(obj)); // [['a', 1], ['b', 2]]
   

3. String.padStart() 和 String.padEnd()
   用于填充字符串，使其达到指定的长度。

   '5'.padStart(3, '0'); // '005'
   '5'.padEnd(3, '0');   // '500'
   

4. 共享内存和原子操作 (Shared Memory and Atomics)
   用于多线程编程，适合 Web Workers 使用。

---

ES9 (ECMAScript 2018)

1. 异步迭代器 (Async Iterators)
   异步迭代器和 for-await-of 循环使得可以异步遍历集合。

   async function* asyncGenerator() {
     yield 1;
     yield 2;
   }
   for await (let val of asyncGenerator()) {
     console.log(val); // 1, 2
   }
   

2. Object Rest/Spread Properties
   允许从对象中提取剩余属性，或者将属性展开到新的对象中。

   const { a, ...rest } = { a: 1, b: 2, c: 3 };
   console.log(rest); // { b: 2, c: 3 }
   
   const newObj = { ...rest, d: 4 };
   console.log(newObj); // { b: 2, c: 3, d: 4 }
   

3. Promise.prototype.finally()
finally() 方法允许你为 Promise 链接添加清理代码，不论 Promise 是成功还是失败。

   fetchData().finally(() => console.log('Done'));
   

---

ES10 (ECMAScript 2019)

1. Array.prototype.flat() 和 Array.prototype.flatMap()
flat() 方法可以将嵌套的数组展开为一个新数组；flatMap() 是对每个元素进行映射后再展平。

   const arr = [1, [2, 3], [4, 5]];
   console.log(arr.flat()); // [1, 2, 3, 4, 5]
   
   const arr2 = [1, 2, 3];
   console.log(arr2.flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6]
   

2. Object.fromEntries()
   将一个键值对列表转换为对象，通常与 Object.entries() 配合使用。

   const entries = [['a', 1], ['b', 2]];
   const obj = Object.fromEntries(entries);
   console.log(obj); // { a: 1, b: 2 }
   

3. String.prototype.trimStart() 和 String.prototype.trimEnd()
   用于去除字符串两端的空白字符。

   const str = '  Hello  ';
   console.log(str.trimStart()); // 'Hello  '
   console.log(str.trimEnd());   // '  Hello'
   

4. Array.prototype.sort() 的稳定性
   ES10 标准确保 Array.prototype.sort() 方法是稳定的，这意味着相等的元素在排序后会保持原来的相对位置。

5. Symbol.prototype.description
   通过 description 属性可以获取 Symbol 的描述信息。

   const sym = Symbol('foo');
   console.log(sym.description); // 'foo'
   

---

总结

从 ES6 到 ES10，JavaScript 引入了许多提升代码可读性、简洁性以及处理复杂异步操作的特性。以下是这些版本的主要特性：

• ES6: 引入了 let、const、箭头函数、模块化、Promise、类、模板字符串等。
• ES7: 引入了 Array.prototype.includes() 和指数运算符 **。
• ES8: 引入了 async/await、Object.values()、Object.entries()、String.padStart() 和 String.padEnd()。
• ES9: 引入了异步迭代器、Object rest/spread、Promise.prototype.finally()。
• ES10: 引入了 Array.prototype.flat()、Object.fromEntries()、String.prototype.trimStart() 和 String.prototype.trimEnd()。

这些新特性极大地改善了 JavaScript 的语法，增强了开发效率。