JavaScript （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() {