ES 2016+

ES2016（ES7）新增：

Array.prototype.includes

Exponentiation Operator 求冥运算

 

ES2017 （ES8）新增：

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

1、TypeArray：

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

语法：

new TypedArray(length); 
new TypedArray(typedArray); 
new TypedArray(object); 
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 是在当前字符串后面添加内容。

　　兼容性支持：

if (!String.prototype.padEnd) {
    String.prototype.padEnd = function padEnd(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 String(this) + padString.slice(0,targetLength);
        }
    };
}

　　作用：

• 以等宽字体显示平整的数据。
• 在文件名或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 对象，则返回该值本身。

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

// 构造函数的方式
var a = new AsyncFunction('a', 'b', 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);';

a(10,20).then( v => {
    console.log(v); // 4 秒后打印 30
});

//async 关键字的方式
var add1 = async function(x) {
    var a = await resolveAfter2Seconds(20);
    var b= await resolveAfter2Seconds(30);
    return x + a + b;
}
add1(10).then( v => {
     console.log(v); // 4 秒后打印 60
});
// 注意 ⚠️ await 位置不同的差异
(async function(x) { 
  var p_a = resolveAfter2Seconds(20);
  var p_b = resolveAfter2Seconds(30);
  return x + await p_a + await p_b;
})(10).then(v => {
  console.log(v);  // 2 秒后打印 60
});

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

　　语法： Object.getpropertyDescriptor(obj, prop)

　　obj： 要查找的目标对象

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

　　返回值：若存在该属性，则返回其属性描述，否则返回 undefined

var o, d;

o = { get foo() { return 17; } };
d = Object.getOwnPropertyDescriptor(o, "foo");

//结果
// d {
//   configurable: true, // 指定对象的属性描述可以被改变或者属性可以被删除时，为 true
//   enumerable: true, // 该属性可以被枚举时为 true
//   get: /*the getter function*/, // 该属性的访问器函数
//   set: undefined    // 该属性的设置器函数
// }

o = { bar: 42 };
d = Object.getOwnPropertyDescriptor(o, "bar");
// d {
//   configurable: true,
//   enumerable: true,
//   value: 42, // 该属性的值
//   writable: true //该属性值可被修改时为 true
// }

o = {};
//定义属性描述的方法用 defineProperty
Object.defineProperty(o, "baz", {
  value: 8675309,
  writable: false,
  enumerable: false
});

 

ES2018 （ES9）新增：

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

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

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

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\nabc'); // false
/abc.abc/s.test('abc\nabc'); //true

 

 

 

 

 

有空继续更...