常复习常不会

以前只用vue只对作用域、箭头函数、数组对象字符串等方法熟悉，接触了大屏项目把Promise相关的回来看了，后来用了react回来看了class,用到了protobuf和FlatBuffers回来看了ArrayBuffer，现在纯属自己好久没看简单梳理一下

从ES6（ECMAScript 2015）开始，到2022年，共发布了以下版本的ECMAScript：

一. ES7（ECMAScript 2016）

该版本引入了一些新的功能，包括指数运算符（**），Array.prototype.includes()方法

• Array.prototype.includes()：该方法用于判断一个数组是否包含某个特定的元素，并返回一个布尔值。使用includes()方法可以替代使用indexOf()方法来判断元素是否存在于数组中。

  示例：

  const array = [1, 2, 3, 4, 5];
  console.log(array.includes(3)); // 输出 true
  console.log(array.includes(6)); // 输出 false
  

• 指数操作符（Exponentiation Operator）：ES7引入了一个新的指数操作符（**），用于进行指数运算。

  示例：

  console.log(2 ** 3); // 输出 8，表示2的3次方
  

二. ES8（ECMAScript 2017）

该版本引入了一些新的功能，包括Object.values()和Object.entries()方法，String.prototype.padStart()和String.prototype.padEnd()方法，await/async。

• await/async：用于简化异步编程。通过async关键字声明一个函数为异步函数，然后在函数内部使用await关键字来等待一个Promise对象的解析结果。

  示例：

    async function fetchData() {
      const response = await fetch('https://example.com/data');
      const data = await response.json();
      return data;
    }
   
    fetchData().then(data => {
      console.log(data);
    });

• Object.entries()：该方法返回一个给定对象自身可枚举属性的键值对数组。

  示例：

  const obj = { a: 1, b: 2, c: 3 };
  console.log(Object.entries(obj)); // 输出 [["a", 1], ["b", 2], ["c", 3]]
  

• Object.values()：该方法返回一个给定对象自身可枚举属性的值的数组。

  示例：

  const obj = { a: 1, b: 2, c: 3 };
  console.log(Object.values(obj)); // 输出 [1, 2, 3]
  

• String padding：这是一种用于字符串填充的新方法。它允许你在字符串的开头或结尾填充指定的字符，以达到指定的长度。

  示例代码：

  const str = 'hello';
  console.log(str.padStart(8, 'a')); // 输出 "aaaahello"
  console.log(str.padEnd(8, 'a')); // 输出 "helloaaa"
  

• Object.getOwnPropertyDescriptors() 可以用来获取指定对象的所有属性的属性描述符。

  示例：

  const obj = {
    name: 'John',
    age: 30
  };
  
  const descriptors = Object.getOwnPropertyDescriptors(obj);
  console.log(descriptors);
  

  输出结果:

  {
    name: {
      value: 'John',
      writable: true,
      enumerable: true,
      configurable: true
    },
    age: {
      value: 30,
      writable: true,
      enumerable: true,
      configurable: true
    }
  }
  

三. ES9（ECMAScript 2018）

该版本引入了一些新的功能，包括Promise.prototype.finally()方法，Rest/Spread属性，正则表达式命名捕获组，以及异步迭代器和生成器。

1. 异步迭代器（Async Iterators）：ES9引入了异步迭代器的概念，使得在异步场景下进行迭代操作更加方便。异步迭代器是一个对象，它实现了Symbol.asyncIterator方法，返回一个包含next()方法的对象。next()方法返回一个Promise对象，用于表示异步操作的结果。

   示例：

   const asyncIterable = {
     [Symbol.asyncIterator]() {
       let i = 0;
       return {
         async next() {
           if (i < 3) {
             await new Promise(resolve => setTimeout(resolve, 1000));
             return { value: i++, done: false };
           }
           return { done: true };
         }
       };
     }
   };
   
   (async function() {
     for await (const item of asyncIterable) {
       console.log(item);
     }
   })();
   

2. Promise.prototype.finally()：该方法用于在Promise对象的状态变为resolved或rejected时，执行一个回调函数。无论Promise对象最后的状态如何，finally()方法都会执行。

   示例：

   const promise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve('Success');
     }, 1000);
   });
   
   promise
     .then(result => {
       console.log(result);
     })
     .catch(error => {
       console.log(error);
     })
     .finally(() => {
       console.log('Finally');
     });
   

3. Rest/Spread 属性（Rest/Spread Properties）：ES9允许在对象字面量中使用...语法来表示剩余属性或展开属性。

   示例：

   const { x, y, ...rest } = { x: 1, y: 2, a: 3, b: 4 };
   console.log(x); // 输出 1
   console.log(y); // 输出 2
   console.log(rest); // 输出 { a: 3, b: 4 }
   
   const obj1 = { x: 1, y: 2 };
   const obj2 = { ...obj1, z: 3 };
   console.log(obj2); // 输出 { x: 1, y: 2, z: 3 }
   

4. 正则表达式命名捕获组（Named Capture Groups）：ES9允许在正则表达式中使用命名捕获组，提供了更直观和可读性更好的正则表达式。

   示例：

   const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
   const match = regex.exec('2021-01-01');
   console.log(match.groups.year); // 输出 2021
   console.log(match.groups.month); // 输出 01
   console.log(match.groups.day); // 输出 01
   

四. ES10（ECMAScript 2019）

该版本引入了一些新的功能，包括Array.prototype.flat()和Array.prototype.flatMap()方法，String.prototype.trimStart()和String.prototype.trimEnd()方法，Object.fromEntries()方法以及Symbol.prototype.description属性。

1. Array.prototype.flat() 和 Array.prototype.flatMap(): 这两个方法用于处理嵌套数组。flat() 方法将嵌套数组扁平化为一个新的数组，而 flatMap() 方法可以在扁平化之后对每个元素执行一个映射操作。示例：

const nestedArray = [1, 2, [3, 4, [5, 6]]];
const flatArray = nestedArray.flat();
console.log(flatArray); // [1, 2, 3, 4, [5, 6]]

const mappedArray = nestedArray.flatMap(num => [num * 2]);
console.log(mappedArray); // [2, 4, 6, 8, 10, 12]

2. String.prototype.trimStart() 和 String.prototype.trimEnd(): 这两个方法用于去除字符串开头和结尾的空格。示例：

const str = "   Hello World   ";
const trimmedStart = str.trimStart();
const trimmedEnd = str.trimEnd();
console.log(trimmedStart); // "Hello World   "
console.log(trimmedEnd); // "   Hello World"

3. Object.fromEntries(): 这个方法可以将键值对数组转换为一个对象。示例：

const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30 }

4. Symbol.prototype.description: 这个属性用于获取 Symbol 对象的描述字符串。示例：

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

五. ES11（ECMAScript 2020）

该版本引入了一些新的功能，包括可选链操作符（Optional Chaining Operator），空值合并操作符（Nullish Coalescing Operator），BigInt数据类型，Promise.allSettled()方法以及String.prototype.matchAll()方法。

1. 可选链操作符（Optional Chaining Operator）：可选链操作符 ?. 可以用于简化访问嵌套对象属性或调用嵌套函数的代码，避免因为中间的属性或函数不存在而导致的错误。示例：

const obj = {
  foo: {
    bar: {
      baz: 'Hello World'
    }
  }
};

// 使用可选链操作符
const value = obj?.foo?.bar?.baz;
console.log(value); // "Hello World"

// 避免错误的访问
const nonExistent = obj?.nonExistent?.property;
console.log(nonExistent); // undefined

2. Nullish 合并运算符（Nullish Coalescing Operator）：Nullish 合并运算符 ?? 可以用于在变量值为 null 或 undefined 时提供一个默认值。与逻辑或运算符 || 不同，Nullish 合并运算符只在变量值为 null 或 undefined 时才会返回默认值。示例：

const value1 = null;
const value2 = undefined;
const value3 = 'Hello World';

const result1 = value1 ?? 'Default Value';
const result2 = value2 ?? 'Default Value';
const result3 = value3 ?? 'Default Value';

console.log(result1); // "Default Value"
console.log(result2); // "Default Value"
console.log(result3); // "Hello World"

3. Promise.allSettled()：这个方法接收一个 Promise 数组，并返回一个新的 Promise，该 Promise 在所有给定的 Promise 都已经被解决或拒绝后才会被解决，返回一个包含每个 Promise 结果的对象数组。示例：

const promises = [
  Promise.resolve('Resolved Promise'),
  Promise.reject('Rejected Promise'),
  Promise.resolve('Another Resolved Promise')
];

Promise.allSettled(promises)
  .then(results => {
    results.forEach(result => {
      console.log(result.status); // "fulfilled" 或 "rejected"
      console.log(result.value); // Promise 的结果或拒因
    });
  })
  .catch(error => {
    console.log(error);
  });

4. String.prototype.matchAll()：这个方法返回一个迭代器，该迭代器包含了所有与正则表达式匹配的字符串及其详细信息。示例：

const regex = /(\w+)\s(\w+)/g;
const str = 'Hello World, Goodbye World';

const matches = str.matchAll(regex);
for (const match of matches) {
  console.log(match[0]); // 匹配到的字符串 Hello World   Goodbye World
  console.log(match[1]); // 第一个捕获组 Hello  Goodbye
  console.log(match[2]); // 第二个捕获组 World World
}

5. BigInt 是一种新的原始数据类型，用于表示任意精度的整数，具有以下方法：

• BigInt.prototype.toString()：将 BigInt 对象转换为字符串表示形式。

const bigIntValue = BigInt(123456789);
const stringValue = bigIntValue.toString();
console.log(stringValue); // "123456789"

• BigInt.prototype.valueOf()：返回 BigInt 对象的原始值。

const bigIntValue = BigInt(123456789);
const primitiveValue = bigIntValue.valueOf();
console.log(primitiveValue); // 123456789n

• BigInt.prototype.toLocaleString()：返回一个表示 BigInt 对象的本地化字符串。

const bigIntValue = BigInt(123456789);
const localizedString = bigIntValue.toLocaleString();
console.log(localizedString); // "123,456,789"

• BigInt.prototype.toFixed()：返回一个表示 BigInt 对象的定点数表示形式的字符串。

const bigIntValue = BigInt(123456789);
const fixedString = bigIntValue.toFixed(2);
console.log(fixedString); // "123456789.00"

• BigInt.prototype.toExponential()：返回一个表示 BigInt 对象的指数表示形式的字符串。

const bigIntValue = BigInt(123456789);
const exponentialString = bigIntValue.toExponential(2);
console.log(exponentialString); // "1.23e+8"

六. ES12（ECMAScript 2021）

该版本引入了一些新的功能，包括String.prototype.replaceAll()方法，Promise.any()方法，WeakRef和FinalizationRegistry API，逻辑赋值运算符（Logical Assignment Operators）等。 ES2021（也称为 ES12）是 ECMAScript 的最新版本，它引入了一些新的特性和语法改进。以下是其中一些主要的新特性及其用法：

1. Promise.any()：这个方法接收一个 Promise 数组，并返回一个新的 Promise，该 Promise 在数组中的任意一个 Promise 解决后就会解决。如果所有 Promise 都被拒绝，则返回一个 AggregateError 对象，其中包含所有拒因。示例：

const promises = [
  Promise.reject('Rejected Promise 1'),
  Promise.resolve('Resolved Promise'),
  Promise.reject('Rejected Promise 2')
];

Promise.any(promises)
  .then(result => {
    console.log(result); // "Resolved Promise"
  })
  .catch(errors => {
    console.log(errors); // AggregateError: All promises were rejected
  });

2. WeakRefs：WeakRefs 是一种新的引用类型，它允许创建对对象的弱引用。与普通引用不同，弱引用不会阻止垃圾回收器回收对象。可以使用 WeakRef 构造函数创建弱引用，并使用 deref() 方法获取引用的对象。示例：

let obj = { name: 'John' };
const weakRef = new WeakRef(obj);

obj = null; // 原对象被释放

const dereferencedObj = weakRef.deref();
console.log(dereferencedObj); // { name: 'John' }

3. Logical Assignment Operators：逻辑赋值运算符是一种结合了逻辑运算符和赋值运算符的新语法。它们包括 ||=、&&= 和 ??=，用于在变量未定义或为空时给变量赋值。示例：

let x = 5;
x ||= 10; // 如果 x 为假值，则将其赋值为 10
console.log(x); // 5

let y;
y ??= 20; // 如果 y 为 null 或 undefined，则将其赋值为 20
console.log(y); // 20

4. String.prototype.replaceAll()：这个方法用于将字符串中的所有匹配项替换为指定的新字符串。它接收两个参数，第一个参数是要替换的字符串或正则表达式，第二个参数是要替换成的新字符串。示例：

const str = 'Hello, World!';
const newStr = str.replaceAll('o', 'a');
console.log(newStr); // "Hella, Warld!"

七. ES13（ECMAScript 2022）

该版本引入了一些新的功能:

•  Top-level Await
•  Object.hasOwn()
•  at()
•  error.cause
• 正则表达式匹配索引
•  类
•  ES14： Array.prototype.findLast 和 Array.prototype.findLastIndex 的提案。

1. Array.prototype.at()方法是一个实验性的方法，用于获取数组中指定索引位置的元素值。它接受一个整数参数，表示要获取的元素的索引值。该方法返回指定索引位置的元素值，如果索引超出了数组的范围，则返回undefined。

示例用法：

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.at(2)); // 输出 'c'
console.log(arr.at(5)); // 输出 undefined

2. 静态方法Object.hasOwn()，判断是否为自身的属性;Object.hasOwn()可以接受两个参数，第一个是所要判断的对象，第二个是属性名。

const foo = Object.create({ a: 'aaa' });
foo.b = 'bbbb';

Object.hasOwn(foo, 'a') // false
Object.hasOwn(foo, 'b') // true

上面示例中，对象foo的属性a是继承属性，属性b是原生属性。Object.hasOwn()对属性a返回false，对属性b返回true。

Object.hasOwn()的一个好处是，对于不继承Object.prototype的对象不会报错。

其它新加功能参考：zhuanlan.zhihu.com/p/533275653

八.ES14（ECMAScript 2023）

参考链接：zhuanlan.zhihu.com/p/631362009

1. 新增了两个方法findLast()和findLastIndex()，从数组的最后一个成员开始，依次向前检查。

   const array = [{ value: 1 },{ value: 2 },{ value: 3 },{ value: 4 }];
   const a = array.findLast(n => n.value === 2); 
   const b = array.findLastIndex(n => n.value === 1); 
   console.log(a,b)//{value:2} 0
   

参考链接

es6.ruanyifeng.com/#docs/symbo…

es6

ES6（ECMAScript 2015）引入了许多新的语法和功能，包括以下属性和方法：

1. 块级作用域：使用 let 和 const 关键字声明变量和常量，引入了块级作用域的概念。

2. 箭头函数：提供了一种更简洁的函数声明方式，使用箭头 (=>) 来定义函数。

3. 模板字符串：使用反引号 (`) 来定义多行字符串和插入变量。

4. 默认参数：函数参数可以指定默认值，如果调用时未传入参数，则使用默认值。

5. 扩展运算符：用三个点 (...) 表示，可以将数组或对象展开为逗号分隔的参数序列。

6. 解构赋值：可以从数组或对象中提取值，赋给变量或常量。

7. 类和对象：引入了 class 关键字，可以使用面向对象编程的方式定义类和对象。

8. 模块化：使用 import 和 export 关键字来导入和导出模块。

9. Promise：提供了一种更优雅的处理异步操作的方式，可以链式调用和处理错误。

10. 简化的对象字面量语法：可以直接在对象字面量中使用变量作为属性名。

11. 简化的函数定义：可以省略 function 关键字，直接定义匿名函数。

12. 数组的新方法：新增了一些数组的方法，如 find、findIndex、includes 等。

13. 字符串的新方法：新增了一些字符串的方法，如 startsWith、endsWith、repeat 等。

14. 新的数据结构：引入了 Set、Map、WeakSet 和 WeakMap 等新的数据结构。

15. Symbol：引入了一种新的原始数据类型，表示独一无二的值。