总结介绍ECMAScript 的新特性

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

来自阮一峰《ECMAScript 6 入门》

ES6 新特性

(1). 类（class）

对熟悉Java、C、C++等语言的开发者来说，class一点都不陌生。ES6引入了class（类），让JS的面向对象编程变得更加简单和易于理解。

(2).模块化（Module）

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

导出（export） ES6运行在一个模块中使用export来导出多个变量或函数

// 导出变量
export let name = 'gg'

// 导出常量
export const name = 'gg'

// 导出多个变量
let a = 2
let b = 4
export {a, b}

// 导出函数
export function myModule(someArg) {
    return someArg
}  

导入（import） 定义好模块的输出以后就可以在另外一个模块通过import引用。

import {myModule} from 'myModule'
import {a, b} from 'test'
import {a as c, b} from 'test'

(3).箭头（Arrow）函数

这是ES6中最令人激动的特性之一。=>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能很好的解决this的指向问题。

(4).函数参数默认值

ES6支持在定义函数的时候为其设置默认值，当函数的参数为布尔值false时，可以规避一些问题

// 不使用默认值
function foo(height, color) {
    let height = height || 50
    let color = color || 'red'
}

// 使用默认值
function foo(height = 50, color = 'red') {
    //
}

(5).模板字符串

// 不使用模板字符串
let name = 'Your name is ' + first + ' ' + last + '.'

// 使用模板字符串
let name = `Your name is ${first} ${last}.`

(6).解构赋值

通过解构赋值可以方便的交换两个变量的值：

let a = 1
let b = 3

[a, b] = [b, a];
console.log(a) // 3
console.log(b) // 1

获取对象中的值:

const student = {
    name:'Ming',
    age:'18',
    city:'Shanghai'
}

const {name,age,city} = student
console.log(name) // "Ming"
console.log(age) // "18"
console.log(city) // "Shanghai"

(7).延展操作符(Spread operator)和剩余运算符（rest operator）

当三个点(...)在等号右边，或者放在实参上，是 spread运算符

myFunction(...arr)

let arr1 = [1, 2, 3, 4]
let arr2 = [...arr1, 4, 5, 6]
console.log(arr2) // [1, 2, 3, 4, 4, 5, 6]

当三个点(...)在等号左边，或者放在形参上，是 rest 运算符

function myFunction(...arr) {

}

let [a,...temp]=[1, 2, 4]
console.log(a) // 1
console.log(temp) // [2, 4]

(8).对象属性简写

在ES6中允许我们在设置一个对象的属性的时候不指定属性名

// 不使用ES6
const name='Ming',age='18',city='Shanghai';
const student = {
    name:name,
    age:age,
    city:city
};
console.log(student)//{name: "Ming", age: "18", city: "Shanghai"}

// 使用ES6
const name='Ming',age='18',city='Shanghai'
const student = {
    name,
    age,
    city
};
console.log(student)//{name: "Ming", age: "18", city: "Shanghai"}

(9).Promise

Promise 是异步编程的一种解决方案，比传统的解决方案callback更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

(10).支持let与const

在之前JS是没有块级作用域的，const与let填补了这方便的空白，const与let都是块级作用域

let和var的区别：

• let没有变量提升，存在暂时性死区，必须等let声明完以后，变量才能使用
• let变量不能重复声明
• let声明的变量只在let代码块有效

---

ES7 新特性

(1).Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false

let arr = ['react', 'angular', 'vue']
if  (arr.includes('react')) {
    console.log('react存在')
}

(2).指数操作符

在ES7中引入了指数运算符**，**具有与Math.pow(..)等效的计算结果。

console.log(Math.pow(2, 10)) // 输出1024

console.log(2**10) // 输出1024

---

ES8 新特性

(1).async/await

在ES8中加入了对async/await的支持，也就我们所说的异步函数，这是一个很实用的功能。 async/await相当于一个语法糖，解决了回调地狱的问题

(2).Object.values()

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

const obj = {
    a: 1,
    b: 2,
    c: 3,
}
// 不使用Object.values()
const vals = Object.keys(obj).map(e => obj[e])
console.log(vals) // [ 1, 2, 3 ]

// 使用Object.values()
console.log(Object.values(obj)) // [ 1, 2, 3 ]

(3).Object.entries

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

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

// 使用Object.entries()
for(let [key,value] of Object.entries(obj1)){
    console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3

(4).String padding

在ES8中String新增了两个实例函数String.prototype.padStart和String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾

String.padStart(targetLength,[padString])

targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。 padString:(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "。

console.log('0.0'.padStart(4,'10')) //10.0
console.log('0.0'.padStart(20))	//                0.00  

String.padEnd(targetLength,padString])

targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。 padString:(可选) 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "；

console.log('0.0'.padEnd(4,'0')) //0.00    
console.log('0.0'.padEnd(10,'0'))//0.00000000

(5).函数参数列表结尾允许逗号

// 不使用ES8
let f = function(a,
                 b
) {
...
}

// 使用ES8
let f = function(a,
                 b,
) {
...
}

(6).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
//   }
// }

ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南)