ES系列新特性

ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言。接下来介绍各系列特性。

ES6新特性（2015）

上一版本ES5是在2009-11月发布的，6年之隔后，在2015-6月发布了ES6。因此ES6的特性比较多。这里列举几个：

类
模块化
箭头函数
函数参数默认值
模板字符串
解构赋值
延展操作符
Promise
Let 与Const

类（class）：

// 定义类
class Animal{
	// 构造函数，实例化的时候将会调用
	constructor(name,color){
        this.name =name;
    	this.color =color; 
	}
	//toString 原型对象上的属性
	toString(){
        console.log('name:' + this.name + ',color:' + this.color);
	}
}
// 实例化Animal
var animal = new Animal('dog','white');
animal.toString();
console.log(animal.hasOwnProperty('name'));  // true
console.log(animal.hasOwnProperty('toString'));  // false
console.log(animal._proto_.hasOwnProperty('toString')); // true
// Cat 类继承于Animal
class Cat extends Animal{
    constructor(action){
        super('cat','white');
        this.action = action;
    }
    toString(){
        concole.log(super.toString())
    }
}
var cat = new Cat('catch');
cat.toString();
// cat 是Cat 和Animal的实例
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

模块化（Module）：

ES5不支持原生的模块化。模块的功能主要由export 和import组成。每一个模块有自己单独的作用域。模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

箭头函数：

=>不只是关键字function的简写，而且箭头函数与包围它的代码共享同一个this，很好的解决了this指向问题。

// 例子
() => 1;
v => v+1;
(a,b)=> a+b;
() =>{
    alert('foo');
}

函数参数默认值：

function foo(height =50,color='red'){
    // ...
}

模板字符串：

var name =`your name is ${first} ${last}.`

ES7新特性（2016）

数组includes()方法，用来判断一个数组是否包含一个指定的值，返回布尔值。
a **b指数运算符，它与Math.pow(a,b)相同。

Array.prototype.includes()

在ES7之前，验证数组中是否存在某元素：

let arr=['a','b','c'];
if(arr.indexOf('b') !== -1){
    console.log('b 存在')
}

在ES7之后：

let arr =['a','b','c'];
if(arr.includes('b')){
      console.log('b 存在')
}

指数操作符

// 在ES7之前
console.log(Math.pow(2,10));  // 1024

// 在ES7之后
console.log(2**10); // 1024

ES8新特性（2017）

async/await
Object.values()
Object.entries()
String padding: padStart() 和padEnd(), 填充字符串达到当前长度
函数参数列表结尾允许逗号
Object.getOwnPropertyDescriptors()
ShareArrayBuffer 和Atomics 对象，用于从共享内存位置读取和写入

async/await

ES8引入异步迭代器，await 可以和 for …of 循环一起使用，以串行的方式运行异步操作。

async function process(array){
    for await(let i of array){
        doSomething(i);
    }
}

Object.values()

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

// ES7的方式
const obj={a:1,b:2,c:3};
const vals =Object.keys(obj).map(key => obj[key]);
console.log(vals);   // [1,2,3]

// ES8的方式
const obj={a:1,b:2,c:3};
const values = Object.values(obj);
console.log(values);    // [1,2,3]

Object.entries()

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

// ES7
const obj = [a:1,b:2,c:3];
Object.keys(obj).forEach(key =>{
    console.log('key:' + key + ' value:' + obj[key])
});

// ES8
const obj = [a:1,b:2,c:3];
for(let [key,value] of Object.entries(obj)){
    console.log(`key: ${key} value: ${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3

String padding

ES8中String新增两个实例函数：String.prototype.padStart 和String.prototype.padEnd。

String.padStart(targetLength,[padString])

例子：

console.log('abc'.padStart(5,'-'));     // --abc
console.log('abc'.padEnd(5,'0'));      // abc00

Object.getOwnPropertyDescriptors()

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

const obj2 = {
	name: 'Jine',
	get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)
// {
//   age: {
//     configurable: true,
//     enumerable: true,
//     get: function age(){}, //the getter function
//     set: undefined
//   },
//   name: {
//     configurable: true,
//     enumerable: true,
//		value:"Jine",
//		writable:true
//   }
// }

ES9新特性（2018）

异步迭代

Promise.finally()
Rest/Spread属性
正则表达式命名捕获组（Regular Expression Named Capture Groups）
正则表达式反向断言（lookbehind）
正则表达式dotAll模式
正则表达式 Unicode 转义
非转义序列的模板字符串

参考链接：这里

ES10新特性（2019）

行分隔符（U + 2028）和段分隔符（U + 2029）符号现在允许在字符串文字中，与JSON匹配
更加友好的 JSON.stringify
新增了Array的flat()方法和flatMap()方法
新增了String的trimStart()方法和trimEnd()方法
Object.fromEntries()
Symbol.prototype.description
String.prototype.matchAll
Function.prototype.toString()现在返回精确字符，包括空格和注释
简化try {} catch {},修改 catch 绑定
新的基本数据类型BigInt
globalThis
import()
Legacy RegEx
私有的实例方法和访问器

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

Array.prototype.flat():

flat()方法回按照一个可指定的深度递归便利数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

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

其次，还可以利用flat()方法的特性来去除数组的空项。

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

Array.prototype.flatMap():

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。这里我们拿map方法与flatMap方法做一个比较。

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

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

分别去除字符串首尾空白字符。

新的基本数据类型`BigInt`

现在的基本数据类型（值类型）不止5种（ES6之后是六种）了哦！加上BigInt一共有七种基本数据类型，分别是： String、Number、Boolean、Null、Undefined、Symbol、BigInt

其他参考链接：这里

end !

ES6新特性（2015）

类（class）：

模块化（Module）：

箭头函数：

函数参数默认值：

模板字符串：

ES7新特性（2016）

Array.prototype.includes()

指数操作符

ES8新特性（2017）

async/await

Object.values()

Object.entries()

String padding

Object.getOwnPropertyDescriptors()

ES9新特性（2018）

ES10新特性（2019）

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

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

新的基本数据类型`BigInt`

CATALOG

FEATURED TAGS

FRIENDS

ES6新特性（2015）

类（class）：

模块化（Module）：

箭头函数：

函数参数默认值：

模板字符串：

ES7新特性（2016）

Array.prototype.includes()

指数操作符

ES8新特性（2017）

async/await

Object.values()

Object.entries()

String padding

Object.getOwnPropertyDescriptors()

ES9新特性（2018）

ES10新特性（2019）

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

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

新的基本数据类型BigInt

CATALOG

FEATURED TAGS

FRIENDS

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

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

新的基本数据类型`BigInt`