ES 2016+

ES2016(ES7)新增:

Array.prototype.includes

Exponentiation Operator 求冥运算

ES2017 (ES8)新增:

ECMAScript® 2017 Language Specification (ECMA-262, 8th edition, June 2017)任意门

1、TypeArray:

一个TypedArray 对象描述一个底层的二进制数据缓存区的一个类似数组(array-like)视图。事实上,没有名为 TypedArray的全局对象,也没有一个名为的 TypedArray构造函数。相反,有许多不同的全局对象,下面会列出这些针对特定元素类型的类型化数组的构造函数。

语法:

1 new TypedArray(length); 
2 new TypedArray(typedArray); 
3 new TypedArray(object); 
4 new TypedArray(buffer [, byteOffset [, length]]); 
Int8Array(); 
Uint8Array(); 
Uint8ClampedArray();
Int16Array(); 
Uint16Array();
Int32Array(); 
Uint32Array(); 
Float32Array(); 
Float64Array();

2、字符串填充 String.padStart 、String.padEnd

  语法:str.padStart(targetLength [, padString])  返回值:填充后形成的新字符串

  targetLength 当前字符串需要填充到的目标长度。如果它小于当前字符串的长度,则返回当前字符串本身。

  padString 要填充的字符串,如果长度超过了 targetLength 则,只保留左侧部分,其他部分被阶段。缺省值,为 " "

  示例:

'abc'.padStart(10); // "       abc"
'abc'.padStart(10, 'foo'); // "foofoofabc"
'abc'.padStart(4, '12345'); // "1abc"
'abc'.padStart(1); // "abc"

  兼容性支持:

  String.prototype.padStart()

if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength,padString) {
        targetLength = targetLength>>0; //floor if number or convert non-number to 0;
        padString = String(padString || ' ');
        if (this.length > targetLength) {
            return String(this);
        }
        else {
            targetLength = targetLength-this.length;
            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
            }
            return padString.slice(0,targetLength) + String(this);
        }
    };
}

   str.padEnd 与 str.padStart 用法相同,只是 padEnd 是在当前字符串后面添加内容。

  兼容性支持:

 1 if (!String.prototype.padEnd) {
 2     String.prototype.padEnd = function padEnd(targetLength,padString) {
 3         targetLength = targetLength>>0; //floor if number or convert non-number to 0;
 4         padString = String(padString || ' ');
 5         if (this.length > targetLength) {
 6             return String(this);
 7         }
 8         else {
 9             targetLength = targetLength-this.length;
10             if (targetLength > padString.length) {
11                 padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
12             }
13             return String(this) + padString.slice(0,targetLength);
14         }
15     };
16 }

  作用:

  • 以等宽字体显示平整的数据。
  • 在文件名或URL中添加计数或ID:’001.txt’。
  • 对齐控制台输出: ‘Test 001: ’。
  • 打印具有固定位数的十六进制或二进制数字:’0x00FF’

 3、async 和 await 目前还是实验性质的方法,实战项目中慎用哦~

  AsyncFunction 构造函数。用来创建新的 异步函数 对象

    语法:new Asyncfunction( [arg1 [, arg2 [, ... argN] ] ,] fucntionBody )

    argN: 函数的参数名

    functionBody: 字符串格式的函数体

  async function 关键字。用来在表达式中定义异步函数

    语法:async function [name] (param1 [ param1 [, param1 [, ..., paramM] ] ] ) { statements }

    name: 此异步函数的名称,可以是匿名函数,该名称仅可在本函数中使用。

    paramN: 传入函数的参数的名称。

    statements: 函数体

  await 操作符。用来等待一个 Promise 对象。它只能在异步函数 async function 中使用。

    表达式: 一个 Promise 对象,或者任何要等待的值。 [return_value] = await expression;

    返回值:返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。

 1 function resolveAfter2Seconds(x) {
 2   return new Promise(resolve => {
 3     setTimeout(() => {
 4       resolve(x);
 5     }, 2000);
 6   });
 7 }
 8 
 9 // 构造函数的方式
10 var a = new AsyncFunction('a', 'b', 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);';
11 
12 a(10,20).then( v => {
13     console.log(v); // 4 秒后打印 30
14 });
15 
16 //async 关键字的方式
17 var add1 = async function(x) {
18     var a = await resolveAfter2Seconds(20);
19     var b= await resolveAfter2Seconds(30);
20     return x + a + b;
21 }
22 add1(10).then( v => {
23      console.log(v); // 4 秒后打印 60
24 });
25 // 注意 ⚠️ await 位置不同的差异
26 (async function(x) { 
27   var p_a = resolveAfter2Seconds(20);
28   var p_b = resolveAfter2Seconds(30);
29   return x + await p_a + await p_b;
30 })(10).then(v => {
31   console.log(v);  // 2 秒后打印 60
32 });

4、获得对象上自身某属性的描述符:Object.getPropertyDescriptor() 。它解决了 Object.assign() 无法正确拷贝 get 和 set 属性的问题

  语法: Object.getpropertyDescriptor(obj, prop)

  obj: 要查找的目标对象

  prop:要查找的目标对象的属性

  返回值:若存在该属性,则返回其属性描述,否则返回 undefined

 1 var o, d;
 2 
 3 o = { get foo() { return 17; } };
 4 d = Object.getOwnPropertyDescriptor(o, "foo");
 5 
 6 //结果
 7 // d {
 8 //   configurable: true, // 指定对象的属性描述可以被改变或者属性可以被删除时,为 true
 9 //   enumerable: true, // 该属性可以被枚举时为 true
10 //   get: /*the getter function*/, // 该属性的访问器函数
11 //   set: undefined    // 该属性的设置器函数
12 // }
13 
14 o = { bar: 42 };
15 d = Object.getOwnPropertyDescriptor(o, "bar");
16 // d {
17 //   configurable: true,
18 //   enumerable: true,
19 //   value: 42, // 该属性的值
20 //   writable: true //该属性值可被修改时为 true
21 // }
22 
23 o = {};
24 //定义属性描述的方法用 defineProperty
25 Object.defineProperty(o, "baz", {
26   value: 8675309,
27   writable: false,
28   enumerable: false
29 });

ES2018 (ES9)新增:

 1、Regular 正则表达式命名捕获组 ?<name>

 1 const
 2   reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
 3   match  = reDate.exec('2018-04-30'),
 4   year   = match[1], // 2018
 5   month  = match[2], // 04
 6   day    = match[3]; // 30
 7 
 8 const
 9   reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
10   match  = reDate.exec('2018-04-30'),
11   year   = match.groups.year,  // 2018
12   month  = match.groups.month, // 04
13   day    = match.groups.day;   // 30
const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  d      = '2018-04-30',
  usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

2、反向肯定查找  (?<=X)Y 匹配的是 Y,但是Y前面必须有X

 反向否定查找 (?<!X)Y 匹配的是Y,但是Y的前面不能有X

 正向肯定查找 X(?=Y) 匹配的是X,但是 X的后面必须有Y

   正向否定查找 X(?!Y) 匹配的是X,但是 X的后面不能跟Y

// 反向肯定查找
const reg1 = /(?<=a)b/;
reg1.exec('ab')[0]; // b
reg1.exec('abc')[0]; // b
reg1.exec('cb'); // null
// 反向否定查找
const reg2 = /(?<!a)b/;
reg2.exec('ab'); //null
reg2.exec('cb')[0]; // b
reg2.exec('cdb')[0]; // b
// 正向肯定查找
const reg3 = /a(?=b)/;
reg3.exec('ab')[0]; //a
reg3.exec('abc')[0]; //a
reg3.exec('ac'); //null
// 正向否定查找
const reg4 = /a(?!b)/
reg4.exec('ab'); //null
reg4.exec('ac'); //a
reg4.exec('acd'); //a

3、正则表达式标志 s 。允许 . 匹配换行符

  原本 . 小数点是匹配除换行符以外的任何字符,使用 s 后 . 也可以匹配换行符

/abc.abc/.test('abc
abc'); // false
/abc.abc/s.test('abc
abc'); //true

有空继续更...

原文地址:https://www.cnblogs.com/z-one/p/9015465.html