ES8(ES2017)特性

前言

内容主要来自网络，主要来自 MDN
ES（JavaScript）是一门大家都要努力学习语言，也是一门努力不让开发者精通的语言。
ES678 大部分功能能通过Polyfill或者Babel来解决。
也就是说ES5能实现这些功能

/**
 * ie78 没有 trim方法
 * @returns {string}
 */
if(!String.prototype.trim){
    String.prototype.trim = function(){
        return this.replace(/(^\s*)|(\s*$)/g, "");
}

还有一些 语法糖 ，语法糖就是指那些没有给语言添加新功能，而只是对人类来说更“甜蜜”的语法。
比如 class ES5的继承

function Base(opt){
}

function SubClass(opt){
    Base.call(this,opt);
}
SubClass.prototype = new Page;//继承属性
SubClass.prototype.constructor = SubClass;//防止指向父类的constructor
var obj = new SubClass(opt);//实例化对象

ES6继承的写法：

class Base(opt){
}

class SubClass(opt) extends Base {
    super(opt);
}

let obj = new SubClass(opt);

1、什么是ES、ES8（随便讲讲，你们随便听听）

ECMAScript：一个由 ECMA International 进行标准化，TC39 委员会进行监督的语言。通常用于指代标准本身。
JavaScript：ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范，并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。
ECMAScript5 (ES5) ：ECMAScript 的第五版修订，于 2009 年完成标准化。这个规范在所有现代浏览器中都相当完全的实现了。
ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015)：ECMAScript 的第六版修订，于 2015 年**完成标准化。这个标准被部分实现于大部分现代浏览器。可以查阅这张兼容性表来查看不同浏览器和工具的实现情况。
ECMAScript 2016(ES7)：第七版 ECMAScript 修订，只加了Array.prototype.includes、Exponentiation Operator(求冥运算)
ECMAScript2017(ES8) ：第八版 ECMAScript 修订
ECMAScript Proposals：被考虑加入未来版本 ECMAScript标准的特性与语法提案，他们需要经历五个阶段：Strawman（稻草人），Proposal（提议），Draft（草案），Candidate（候选）以及 Finished （完成）。

2、padStart＆padEnd（字符串填充）

2.1 存在的意义

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

2.2 语法

String.prototype.padStart(targetLength [, padString])
String.prototype.padEnd(targetLength [, padString])

参数
- targetLength 当前字符串需要填充到的目标长度。如果当前字符串原本就达到了该长度，那么该方法什么都不会做，直接返回原字符串。
- padString填充字符串。如果在填充过程中发现用不完这一整个填充字符串，则优先用左侧部分，能用多少用多少。该参数为可选参数，默认值为空格 ” “
返回值
- 在原字符串头部/尾部填充指定的填充字符串直到目标长度所形成的新字符串

2.3 例子

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "100");  // "1001001abc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

2.4 兼容性

注意：这是一个实验中的功能，未来浏览器可能会改变语法和功能。

浏览器	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
支持	57	15	48	No	44	10

浏览器	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
支持	?	57	Yes	48	No	?	10

2.5 其他：

为什么这两个填充方法不叫做 padLeft 和 padRight ？
- 对于双向或从右到左的语言， left 和 right 这两个词显然容易混淆。因此，padStart 和 padEnd 的命名遵循了现有的 startsWith 和 endsWith 名称。

3、Object.values(obj)（遍历对象值）

方法返回一个给定对象自己的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

3.1 存在的意义

以前有Object.keys，可以遍历对象的Key，所以遍历value的话只能这样获取：

var values = [];
Object.keys(obj).forEach(function(key){
    values.push(obj[key])
})

现在只需要

var values = Object.values(obj)

3.2 语法

Object.values(obj)

参数
- obj 被返回可枚举属性值的对象。（TODO:拓展可枚举属性值）
返回值
- 一个包含对象自身的所有可枚举属性键值的数组

3.3 例子

var obj = { foo: "bar", baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// array like object 长得像有序下标数组的对象
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// array like object with random key ordering 长得像无序下标数组的对象 
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']注意顺序

// getFoo is property which isn't enumerable 可枚举属性值
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = "bar";
console.log(Object.values(my_obj)); // ['bar']

// non-object argument will be coerced to an object 字符串
console.log(Object.values("foo")); // ['f', 'o', 'o'] 实际上string 是 char 的数组['f', 'o', 'o']

3.4 兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	54	Yes	47	No	Yes	10.1

浏览器	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
支持	54	54	Yes	48	No	?	10

3.5 其他相关：

Enumerability and ownership of properties
Object.keys()
Object.entries()
Object.prototype.propertyIsEnumerable()
Object.create()
Object.getOwnPropertyNames()

4、Object.entries(obj) （遍历对象键值对）

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

4.1 存在的意义

由于ES5,ES6,ES7并没有提供遍历对象的键-值对属性的接口，所以可能官方脑袋一热，有了获取对象键集合的方法，也有了获取对象值集合的方法，那就再来一个键值对吧。

4.2 语法

Object.entries(obj)

参数
- obj 被返回可枚举属性值的对象。（TODO:拓展可枚举属性值）
返回值
- 给定对象自身可枚举属性的键值对数组。

4.3 例子

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo is property which isn't enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

new Map() 构造函数接受一个可迭代的entries。借助Object.entries方法你可以很容易的将Object转换为Map:

var obj = { foo: "bar", baz: 42 }; 
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

4.4 兼容性

浏览器	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
支持	54	Yes	47	No	Yes	10.1

手机浏览器	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
支持	54	54	Yes	47	No	No	No

4.5 其他相关

属性的可枚举性和所有权
Object.keys()
Object.values()
Object.prototype.propertyIsEnumerable()
Object.create()
Object.getOwnPropertyNames()

5、async、await（异步处理）

像同步一样写异步的代码

5.1 存在的意义

js一个重大的特点就是异步，但是人类的思维模式天然是同步的。所以要把异步和同步的流程化统一起来。
直接上例子：
- 回调地狱

getData(data => {
  getMoreData(data2 =>{
    getMoreData(data3 =>{

    })
  })
})

JQuery解决方法

var def1 = $.Deferred();
var def2 = $.Deferred();
var def3 = $.Deferred();
def1.done(def2.resolve)
def2.done(def3.resolve)
def3.done(function(){})

ES6 Promise

new Promise().then().then()...

后面的虽然解决了回调地狱，但是本质上还是回调。
- 对比java/javascript redis操作
- java

Jedis jedis = new Jedis("localhost");
System.out.println("连接成功");
jedis.set("key", "Hello world");
String key = jedis.get("key")
System.out.println("redis 存储的字符串为: "+ key)

javascript

let client = redis.createClient(RDS_PORT,.RDS_HOST,.RDS_OPTS);
client.select(RDS_DATABASE)
client.hmset("key", "Hello world",function(){
  client.hmget("key",function(data){
    console.log(data)
  })
});

5.2 语法

async function name([param[, param[, ... param]]]) { statements }
[return_value] = await expression;

参数
async:要传递给函数的参数的名称
返回值
- AsyncFunction 对象。
- await:一个 Promise 对象或者任何要等待的值

5.3 例子

ES7,asyns和await 更配哦

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

async function add1(x) {
  var a = resolveAfter2Seconds(20);
  var b = resolveAfter2Seconds(30);
  return x + await a + await b;
}

var  ajax = () => {
    return new Promise(resolve =>{
        setTimeout(() => {
            resolve("done");
        }, 2000);
    })
}

async function getData(x) {
  var a = await ajax();
  console.log(a)
}

await:如果该值不是一个 Promise，await 会把该值转换为已正常处理的Promise，然后等待其处理结果。

async function myFetch(){ 
    let res = await fetch("http://www.baidu.com/json")
    let result = await res.json()
    return result
}

myFetch().then(data => console.log(JSON.stringify(data)))

5.4 兼容性

浏览器	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
支持	55	Yes	52	No	42	10.1

手机浏览器	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
支持	Yes	55	Yes	52	No	42	10.1

5.5 其他相关

AsyncFunction object

6、Object.getOwnPropertyDescriptor （）

方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）。

6.1 存在的意义

该方法的提出目的，主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。。

6.2 语法

Object.getOwnPropertyDescriptor(obj, prop)

参数
- obj 需要查找的目标对象
- prop目标对象内属性名称（String类型）
返回值
- 如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。
- 一个属性描述符是一个记录，由下面属性当中的某些组成的：
- value该属性的值(仅针对数据属性描述符有效)
- writable 当且仅当属性的值可以被改变时为true。(仅针对数据属性描述有效)
- get 获取该属性的访问器函数（getter）。如果没有访问器，该值为undefined。(仅针对包含访问器或设置器的属性描述有效)
- set 获取该属性的设置器函数（setter）。如果没有设置器，该值为undefined。(仅针对包含访问器或设置器的属性描述有效)
- configurable 当且仅当指定对象的属性描述可以被改变或者属性可被删除时，为true。
- enumerable当且仅当指定对象的属性可以被枚举出时，为 true。

6.3 例子

//拷贝对象
var obj = {
    a:"a",
    get b(){return "b"}
}
var obj1 = Object.assign({},obj)
var obj2 = Object.create(  
    Object.getPrototypeOf(obj),  
    Object.getOwnPropertyDescriptors(obj)  
)
console.log(obj)//{a: "a"}
console.log(JSON.stringify(obj))//{"a":"a","b":"b"}

console.log(obj1)//{a: "a", b: "b"}
console.log(JSON.stringify(obj1))//{"a":"a","b":"b"}

console.log(obj2)//{a: "a"}
console.log(JSON.stringify(obj2))//{"a":"a","b":"b"}

var obj = {
    a:"a",
    get b(){return "b"}
}
JSON.stringify(Object.getOwnPropertyDescriptors(obj))
/*
{
    "a":{
        "value":"a",
        "writable":true,
        "enumerable":true,
        "configurable":true
    },
    "b":{
        "enumerable":true,
        "configurable":true
    }
}
*/

6.4 兼容性

浏览器	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
支持	?	?	50 (50)	?	?	?

手机浏览器	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
支持	?	?	?	50.0 (50)	?	?	?

6.5 其他相关

7、函数参数列表与调用中的尾部逗号

允许在参数定义和函数调用后面使用逗号。

7.1 存在的意义

重新排列元素项比较简单，如果你要改变最后一个元素项的位置，你不必添加和删除逗号。
帮助版本控制系统跟踪实际发生的变化。

7.2 语法

function foo(
    param1,
    param2,
) {}

foo(param1,param3,)

7.3 例子

同语法

7.4 兼容性

管好自己的双手，不要用这个方式写就好了。

7.5 其他相关：

8、共享内存与原子操作

SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，类似于 ArrayBuffer 对象。对象，但它们可以用来在共享内存上创建视图。与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分离。

8.1 存在的意义

一个新的低级别Atomics命名空间对象和一个SharedArrayBuffer构造函数，来作为更高级别并发抽象的原始构建块。共享多个service worker和核心线程之间的SharedArrayBuffer对象的数据。在worker之间共享数据，改善worker之间的协调。

8.2 语法

new SharedArrayBuffer(length)

8.3 例子

略

8.4 兼容性

略

8.5 其他相关：

传送门

Atomics
ArrayBuffer
JavaScript typed arrays
Web Workers
parlib-simple – a simple library providing synchronization and work distribution abstractions.
Shared Memory – a brief tutorial
A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks

9、Array.prototype.includes

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

9.1 存在的意义