ES7、ES8、ES9、ES10、ES11、ES12特性

Chris__Wang

已于 2023-08-28 18:06:13 修改

阅读量142

点赞数 1

文章标签：算法

于 2023-08-25 15:20:56 首次发布

本文链接：https://blog.csdn.net/Chris__wang/article/details/132477792

版权

本文介绍了ES7到ES10期间JavaScript的新特性，包括数组的includes方法的特殊用法、异步迭代器、async/await、对象属性处理（entries/values/getOwnPropertyDescriptors）、字符串填充方法、扁平化数组等。

摘要由CSDN通过智能技术生成

ES7

includes
需要注意的一个特殊用法，支持第二个参数，索引（从哪个位置开始查找）

let arr = [1, 2, 3, 4];
arr.includes(3, 1); //true  从值为2的开始查找
arr.includes(3, 3); //false 从值为4的开始查找

如果fromIndex为负值，使用数组长度 + fromIndex计算出的索引作为新的fromIndex，如果新的fromIndex为负值，则搜索整个数组。

幂运算符 ** 相当于Math.pow()

5 ** 2 //25
Math.pow(5,2) //25

ES8
async await

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

let obj = {a: 1, b: 2};
Object.entries(obj);

Object.values()

let obj = {a: 1, b: 2};
Object.values(obj);

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符

let obj = {a: 1, b: 2};
Object.getOwnPropertyDescriptors(obj);   
// [a: {configurable: true, enumerable: true, value: 1, writable: true}, 
// b: {configurable: true, enumerable: true, value: 2, writable: true}]

padStart() 用另一个字符串填充当前字符串。

padEnd() 方法会用一个字符串填充当前字符串（如果需要的话则重复填充）。

ES9

Async iterators异步迭代器
Async iterator 对象的 next() 方法返回一个 Promise，这个 Promise 的返回值可以被解析成 {value, done} 的格式，

const asyncIterator = () => {
  const array = [1, 2];
  return {
    next: function() {
      if(array.length) {
        return Promise.resolve({
          value: array.shift(),
          done: false
        });
      }
      return Promise.resolve({
        done: true
      });
    }
  }
}

let iterator = asyncIterator();

const test = async() => {
  await iterator.next().then(console.log);  // {value: 1, done: false}
  await iterator.next().then(console.log);  // {value: 2, done: false}
  await iterator.next().then(console.log);  // {done: true}
}

test();

可以使用 for-await-of 在循环中异步调用函数

const promises = [
  new Promise((resolve) => resolve(1)),
  new Promise((resolve) => resolve(2)),
  new Promise((resolve) => resolve(3)),
];

const test = async() => {
  for await (const p of promises) {
    console.log('p', p);
  }
};

test();

Object rest properties

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

Object spread properties 延展运算符 ...

finally Promise 最终调用方法

`ES10`

flat()扁平化数组移除空项

方法会按照一个可指定的深度遍历递归数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。不会改变原来数组

const arr = [1, 2, [[[[3, 4]]]]];

arr.flat();          // [1, 2, [[[3, 4]]]]   一层
arr.flat(3);         // [1, 2, [3, 4]]       三层
arr.flat(-1);        // [1, 2, [[[[3, 4]]]]] 没变
arr.flat(Infinity);  // [1, 2, 3, 4]         直接变成一维数组

// **flat()会移除数组中的空项
let arr = [1, 2, , , 3];
arr.flat();    // [1, 2, 3]

TODO。。。。。。