JS-ES7-9

优质

小牛编辑

131浏览

2023-12-01

ES6

1.Array.from()

将一个类数组对象或者可遍历对象转换成一个真正的数组。

//1.Array.prototype.slice.call()
 Array.prototype.slice.call($('li'));
//2.ES6展开运算符
[...document.getElementsByTagName("li")]
//3.利用concat+apply
Array.prototype.concat.apply([], $('li'))

2.Array.of(v1, v2, v3) : 将一系列值转换成数组

Array.of( )方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型

3.数组实例的 find() 和 findIndex()

[1, 4, -5, 10].find((n) => n < 0) // -5

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

ES7新特性（2016）

ES2016添加了两个小的特性来说明标准化过程：

1.Array.prototype.includes()

数组includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

2.指数操作符**

a ** b指数运算符，它与 Math.pow(a, b)相同

ES8新特性（2017）

1.Object.values()

Object.values()是一个与Object.keys()类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。

2.Object.entries()

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

3.String padding

在ES8中String新增了两个实例函数String.prototype.padStart和String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾

4.函数参数列表结尾允许逗号

主要作用是方便使用git进行多人协作开发时修改同一个函数减少不必要的行变更。

5.Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。

ES9新特性（2018）

async function process(array) {
 for await (let i of array) {
    //这个方法返回一个 promise
    doSomething(i);
 }
}

2.Promise.finally() 允许你指定最终的逻辑

3.Rest/Spread 属性.

ES2015引入了Rest参数和扩展运算符。三个点（...）仅用于数组。ES2018为对象解构提供了和数组一样的Rest参数

4.正则表达式命名捕获组

JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组，例如：以YYYY-MM-DD的格式解析日期：

const reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
      match = reDate.exec('2018-04-30'),
      year = match[1], // 2018
      month = match[2], // 04
      day = match[3]; // 30

这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引. ES2018允许命名捕获组使用符号?<name>，在打开捕获括号(后立即命名，示例如下：

const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
      match = reDate.exec('2018-04-30'),
      year = match.groups.year, // 2018
      month = match.groups.month, // 04
      day = match.groups.day; // 30

5.正则表达式反向断言

先行断言（lookahead）

目前JavaScript在正则表达式中支持先行断言（lookahead）(?=)。这意味着匹配会发生，但不会有任何捕获，并且断言没有包含在整个匹配字段中。

例如从价格中捕获货币符号：

const reLookahead = /\D(?=\d+)/,
match = reLookahead.exec('$123.89');
console.log( match[0] ); 
// $

匹配字符串“10 hours”中紧跟着是”hours”的数字：

const reg = /\d+(?= hours)/u;
const matched = reg.exec('10 hours');
matched[0];
// 10

匹配字符串“10 minutes”中紧跟着不是”hours”的数字：

const reg = /\d+(?! hours)/u;
const matched = reg.exec('10 minutes');
matched[0];
// 10

反向断言（lookbehind）

ES2018引入以相同方式工作但是匹配前面的反向断言（lookbehind）(?<=)，这样我就可以忽略货币符号，单纯的捕获价格的数字：

const reLookbehind = /(?<=\D)\d+/,
match = reLookbehind.exec('$123.89');
console.log( match[0] ); // 123.89

以上是肯定反向断言，非数字\D必须存在。同样的，还存在否定反向断言(?<!)，表示一个值必须不存在，例如：

const reLookbehindNeg = /(?<!\D)\d+/,
match = reLookbehind.exec('$123.89');
console.log( match[0] ); // null

匹配字符串“hours10”中”hours”后面的数字：

const reg = /(?<=hours)\d+/u;
const matched = reg.exec('hours10');
matched[0];
// 10

匹配字符串“minutes10”中数字前面不是“hours”：

const reg = /(?<!hours)\d+/u;
const matched = reg.exec('minutes10');
matched[0];

6.正则表达式s(dotAll)模式

正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，允许行终止符的出现，例如：

/hello.world/.test('hello\nworld'); // false
/hello.world/s.test('hello\nworld'); // true

ES10新特性（2019）

3.新增了Array的flat()方法和flatMap()方法

flat()和flatMap()本质上就是是归纳（reduce）与合并（concat）的操作。

var arr3 = [1, 2, [3, 4, [5, 6]]];
//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);

利用flat()方法的特性来去除数组的空项

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

4.新增了String的trimStart()方法和trimEnd()方法

5.Object.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）

通过 Object.fromEntries，可以将 Array 转化为 Object:

通过 Object.fromEntries，可以将 Map 转化为 Object:

const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }

6.Symbol.prototype.description

通过工厂函数Symbol（）创建符号时，您可以选择通过参数提供字符串作为描述：

7.String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。