ES6
学习文档：http://es6.ruanyifeng.com/
变量let和const
var的问题：可以重复声明，无法限制修改，没有块级作用域，只能用函数包裹限制作用域。
let和const：
1、不能重复声明。
2、都是有块级作用域，在{ }块内声明的，块外无效。
3、let是变量，可以修改。
4、const是常量，不能修改。
箭头函数
写法：
1、只有一个参数，( ) 可以省略。
2、只有一个return，{ } 可以省略。
function name() { } //普通函数
() => { } //箭头函数，去掉function，加上 =>
作用：
1、简写函数。
2、把父级的this传进里面，里面使用this就是在调用父级的this。
注意：ES6默认采用严格模式，因此this不会自动指向window对象，而箭头函数本身并没有this，所以this是undefined。如果还想用this，就不要用使用箭头函数。
rest参数（剩余参数）
收集不定数目的参数，必须放在最后一个参数位置。
名字可随便起，但必须要有 … 表示这是剩余参数。
这个rest参数提供的剩余参数是个数组。
function show(a, b, ...args){
console.log(args); //输出 3, 4, 5
}
show(1, 2, 3, 4, 5);
以前的不定参arguments 不要再用了，因为只能提供类似数组的对象。
而剩余参数能显式的表明你想要获取参数，并提供一个真正的数组。
展开运算符（…）
一种简写，比如在数组前面加三个点，效果和直接写数组内容一样。
let arr = [1, 2, 3];
console.log(...arr); //输出 1,2,3
let arr2 = [...arr]; //...arr等价于1,2,3，所以这里数组arr2和arr相等
let arr3 = [...arr, 4, 5, ...arr2]; //可以随便组合写
对象也能展开。
还可以转换字符串为数组。
[...'hello'] // [ "h", "e", "l", "l", "o" ]
默认参数
function show(a, b = 5){ //直接在此设置默认参数
console.log(a, b);
}
show(1); //输出 1,5
show(1, 2); //输出 1,2
解构赋值
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); //输出 1, 2, 3
let {x, y, z} = {x: 1, y: 2, z: 3};
console.log(x, y, z); //输出 1, 2, 3
1、左右结构必须一样，比如左右都是数组，参数和赋值的个数能对应。
2、右边必须是个合法的东西。
3、声明和赋值不能分开，必须写在一句话中。
解构的粒度可以随意调控，如下
let [json, arr, num, str] = [{a: 1, b: 2}, [1, 2, 3], 8, 'abc'];
console.log(json, arr, num ,str); //输出 {a: 1, b: 2}, [1, 2, 3], 8, "abc"
let [{a, b}, [n1, n2, n3], num, str] = [{a: 1, b: 2}, [1, 2, 3], 8, 'abc'];
console.log(a, b, n1, n2, n3, num, str); //输出 1, 2, 1, 2, 3, 8, "abc"
数组
新增了一些数组的方法。
1、 map( ) 映射
能遍历数组中的每一个元素，并对每一个元素做操作。
可以在map函数的参数中定义一个函数，写要对数组中的每一个元素做什么操作，最后可以return返回结果。
let arr = [1, 2 , 3]
let double = arr.map(function(item){
return item*2
}
let double2 = arr.map(item => item*2) //上面函数的简写
console.log(double) //输出 [2, 4, 6]
let score = [22, 70, 61, 45]
let result = score.map(item => item >= 60? '及格' : '不及格')
console.log(result) //输出 ['不及格', '及格', '及格', '不及格']
2、reduce( ) 汇总
使每一个元素依次顺序相邻的运算求出一个值。
第一参数是保存临时的运算结果，第二参数是当前元素，第三参数是运算了第几次（从1开始算）。
比如下面求和。
let arr = [1, 2, 3, 4]
let sum = arr.reduce((tmp, item, index) => {
console.log(tmp, item, index) //依次输出(1,2,1), (3,3,2), (6,4,3)
return tmp + item
})
console.log(sum) //输出 10
第一次运算时没有临时结果，tmp的值是数组中第一个元素1，和第二个元素2相加等于3。
第二次运算时tmp就保存上一次运算结果3，和数组中第三个元素3相加，如此下去。
下面是求平均数例子。
let arr = [1, 2, 3, 4]
let sum = arr.reduce((tmp, item, index) => {
if(index != arr.length - 1){ //如果不是最后一次就相加，否则除以数组长度求平均值。
return tmp + item
}else{
return (tmp + item)/arr.length
}
})
console.log(sum) //输出 2.5
3、filter( ) 过滤器
过滤数组中的元素。
可以在filter函数的参数中定义一个函数，写对数组的筛选条件，最后可以return返回过滤后结果。
let arr = [12, 4, 8, 9]
let result = arr.filter(item => (item % 3 === 0) ? true : false) //ture表示保留
//let result = arr.filter(item => item % 3 === 0) 这样简写也行
console.log(result) //输出 [ 12, 9 ]
let arr = [
{ name: '张三', age: 10 },
{ name: '李四', age: 20 },
]
let result = arr.filter(json => json.age >= 20)
console.log(result) //输出 [ { name: '李四', age: 20 } ]
4、forEach( ) 循环迭代
迭代循环数组中的元素。
可以在forEach函数的参数中定义一个函数，写对数组中每个元素的遍历操作。
let arr = [12, 2, 7]
let result = arr.forEach((item, index) => console.log(item, index)) //依次输出(12, 0), (2, 1), (7, 2)
5、set( )、Array.from( ) 去重
set( ) 可以接收一个数组或者是类数组对象，自动去除其中的重复元素。
Array.from( ) 可以把类数组对象、可迭代对象转化为数组。
因为Set去重后返回的是一个对象，所以要配合Array.from转换为数组。
let arr = [1, 1, '1', '1', null, null , undefined, undefined, NaN, NaN]
console.log(Array.from(new Set(arr))) //输出 [ 1, '1', null, undefined, NaN ]
6、keys( )、values( )、entries( )、for…of、for…in
keys( )遍历下标，values( )遍历值，entries( )同时遍历下标和值。
for … in 遍历数组的下标 key，可以遍历对象，但不能与上面那三个方法一起使用。
for … of 遍历数组的值 value，不能遍历对象，常用于与上面三个方法一起使用。
let arr = ['a', 'b', 'c']
for (let i in arr) {
console.log(i) //输出 0 1 2
}
for (let i of arr) {
console.log(i) //输出 a b c
}
for (let i of arr.keys()) {
console.log(i) //输出 0 1 2
}
for (let i of arr.values()) {
console.log(i) //输出 a b c
}
for (let [key, value] of arr.entries()) {
console.log(key + value) //输出 0a 1b 2c
}
//使用for in遍历对象
let json = { a: 12, b: 5, c: 7 }
for (let i in json) {
console.log(i) //输出 a b c
}
startsWith( )、endsWith( )
检测字符串开头或结尾是否包含指定字符串，返回布尔值。
let str = 'abcd'
console.log(str.startsWith('ab')) //输出 true
console.log(str.endsWith('d')) //输出 true
console.log(str.endsWith('b')) //输出 false
字符串模板
使用反引号 `，${变量}，可以拆行。
let a = 1
let str = `abc${a}`
console.log(str) //输出 abc1
面向对象
和Java很像，有class，extend，super，构造函数等之类的。
class User {
constructor(name, pass) {
this.name = name
this.pass = pass
}
showName() {
console.log(this.name)
}
showPass() {
console.log(this.pass)
}
}
let u1 = new User('abc', 111) //创建User的实例
u1.showName() //输出 "abc"
u1.showPass() //输出 111
//继承
class VipUser extends User {
constructor(name, pass, level) {
super(name, pass) //必须写，表示继承父类
this.level = level
}
showLevel(){ //子类新增的方法
console.log(this.level)
}
showPass(){ //子类重写父类的方法（覆盖）
console.log(123)
}
showPass(level){ //测试能不能重载
console.log('这是子类重写父类的方法'+ level)
}
}
let v1 = new VipUser('red', 123, 1) //创建VipUser的实例
v1.showLevel() //输出 1
v1.showName() //调用继承父类的方法，输出 "red"
v1.showPass(2) //输出 这是子类重写父类的方法2
v1.showPass() //输出 这是子类重写父类的方法undefined，证明不能重载。
和JAVA的区别之一是不能重载函数，即调用相同函数名的函数时，根据你传递参数不同，调用相应的函数。
对象
1、简写对象的字面量
键值一样时可以简写，里面的函数可以简写, 去掉 :function
var a = 1, b = 2
let obj = {a: a, b: b, show:function(){}}
let obj = {a, b, show(){}} //简写
2、属性名的定义
obj.foo = true; // 常见
obj['a' + 'bc'] = 123; //ES6
var obj = { // 常见
foo: true,
abc: 123
};
var obj = { // ES6
[foo]: true,
['a' + 'bc']: 123
};
例子：
var obj = {
id0: '00',
id1: '11',
name0: '张三',
name1: '李四'
};
// 把扁平化的对象结构化为两组对象，每组对象包含两组键值对
var arr = [];
for (let i = 0; i < 2; i ++) {
const item = {
id: obj[`id${i}`],
name: obj[`name${i}`]
};
arr.push(item);
}
console.log(arr); //输出 [{id:'00',name:'张三'},{id:'11',name:'李四'}]
3、Object.is( ) 比较
相等运算符（==）和严格相等运算符（===）都有缺点。前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。
JS缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。该函数就是来弥补这一缺点。
console.log(Object.is('foo', 'foo')) // true
console.log(Object.is(+0, -0)) // false
console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(null, null)) //true
console.log(Object.is(undefined, undefined)) //true
console.log(Object.is({ }, { })) // false，特殊例子
console.log(Object.is([ ], [ ])) // false，特殊例子
只有空对象或空数组间比较是false，不是同值相等的情况。
4、Object.assign( ) 合并
如果有同名属性，后面会覆盖前面。
const obj1 = { a: 1, b: 1 };
const obj2 = { b: 2, c: 2 };
const obj3 = { c: 3 };
const obj = Object.assign(obj1, obj2, obj3);
console.log(obj) //输出 { a: 1, b: 2, c: 3 }
5、Object.keys( )，Object.values( )，Object.entries( ) 对象转为数组
我都放在这里一起记。
这三个函数的分别是：
ES5方法，把对象的键返回成一个数组。
ES8方法，把对象的值返回成一个数组。
ES8方法，把对象自身返回成一个数组。
const obj = { a: 'str', b: 1 }
Object.keys(obj) // ["a", "b"]
Object.values(obj) // ["str", 1]
Object.entries(obj) // [ ["a", "str"], ["b", 1] ]
新增的两个方法的作用是方便把对象转成数组后，对值或者键值对遍历，例子如下：
let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) => { //以前只有key方法
console.log(key + ": " + obj[key]); //输出 a: 1, b: 2, c: 3
})
Object.entries(obj).forEach(([key, value]) => { //现在entries方法
console.log(key + ": " + value); //输出 a: 1, b: 2, c: 3
})
7、Object.fromEntries( ) 数组转为对象
ES8方法，把键值对数组转为对象。
Object.fromEntries([ ["a", "str"], ["b", 1] ]) // { a: "str", b: 1}
模块
引入：
let { stat, exists, readFile } = require('fs') //以前
import { stat, exists, readFile } from 'fs' //ES6
暴露：
module.exports = { stat, exists, readFile } //以前
export default { stat, exists, readFile } //ES6
Promise
Promise用来解决地狱回调问题，能把异步操作代码写成同步样子。
Promise对象是个构造函数，通过new创建一个Promise实例，在这实例中有个then方法，看下面例子使用。
// 传统写法
step1( value1 => {
step2( value1, value2 => {
step3(value2, value3 => {
step4(value3, value4 => {
// ...
});
});
});
});
// Promise 的写法
new Promise(step1)
.then(step2)
.then(step3)
.then(step4);
简单来说就是这样：
function f1(resolve, reject) {
// 异步代码...
}
var p1 = new Promise(f1);
p1.then(f2).then(f3).then(f4)
// f1的异步操作执行完成，就会执行f2，依次下去
每当new一个Promise实例时，就会立刻执行实例中的异步操作，所以要用函数包裹new的过程，来控制什么时候执行。
Promise实例中还自带两个函数，resolve为成功回调函数，reject为失败回调函数。
读取文件例子如下：
const fs = require('fs') //引入读取文件模块
getFile = path => { //把创建Promise过程放在函数里，按需执行
return new Promise( (resolve, reject) => {
fs.readFile(path, 'utf-8', (err, data) => {
if(err) return reject(err) //如果有err就返回执行失败回调函数
resolve(data) //否则就执行失败回调函数
})
})
}
getFile('1.txt') //调用读取文件函数，由上面函数代码可知，生成第一个promise实例
.then( data => { //这里.then就是运行上面生成的第一个promise实例
console.log('成功回调函数' + data)
return getFile('2.txt') //下面的.then就是在运行这里return的第二个promise实例
}, err => {
console.log('失败回调函数' + err)
return getFile('2.txt') //如果前面的promise出错，想让后面的promise继续运行，就在成功和失败回调函数都返回promise实例
})
.then( data => {
console.log('成功回调函数' + data)
return getFile('3.txt')
})
.then( data => {
console.log('成功回调函数' + data)
})
如果前面的promise出错，不想让后面的promise运行，就不要写失败回调函数，同时在最后面加如下代码：
.catch( err => {
console.log(err) //promise如果出错，会直接跳到这里运行出错处理代码
})
Promise.all(promiseArray)方法
1、将多个Promise对象实例包装，生成并返回一个新的Promise实例。
2、promise数组中所有的promise实例都变为resolve（成功）的时候，该方法才会返回，并将所有结果传递results数组中。
3、promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象。
var p1 = Promise.resolve(1)
var p2 = Promise.resolve(2)
var p3 = Promise.resolve(3)
Promise.all([p1, p2, p3]).then( results => {
console.log(results) //输出 [1, 2, 3]
}, err => {
console.log(err)
})
Promise.all(promiseArray)方法
1、用法和上面一模一样。
2、哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
3、了解即可。
Generator生成器函数
普通函数，一路到底。
1、 generator函数，中间可以停，到哪停呢，遇到yield就会停。
2、调用generator函数，会生成一个generator对象，此时函数还未运行。
**3、**generator对象有个next()方法，调用该方法就会运行generator函数。
4、generator函数遇到 yield 会停止时，想要运行就继续用next()启动执行。
5、 在函数名前加个 * 就是generator函数，不能使用箭头函数。
背后实际上生成多个小函数，实现走走停停。
function *show() {
console.log('1')
yield
console.log('2')
}
let genObj = show2() //用变量接住generator函数创建的generator对象
genObj.next() //输出 1
genObj.next() //输出 2
genObj.next() //最后了，没有结果输出
6、yield 只能在Generator函数内使用。
7、yield 既可传参，又可以返回。
8、第一个next()只用来启动，传参无效。
传参例子如下
function * show() {
console.log('1')
var a = yield
console.log('2')
console.log(a)
}
var gen = show()
gen.next() //输出 1
gen.next() //输出 2 undefined，因为没有传参，yield没有返回值
var gen = show()
gen.next(10) //输出 1 第一个next只用来启动，传参没用
gen.next(20) //输出 2 20
返回例子如下
function* show() {
yield 10
yield 20
}
var gen = show()
console.log(gen.next()) //输出 { value: 10, done: false }
console.log(gen.next()) //输出 { value: 20, done: false }
console.log(gen.next()) //输出 { value: undefined, done: true }
value是每一段小函数的yield值，done表示整个函数完成了没有。
因为最后一段函数是没有yield的，所以输出为undefined。
如果想要最后有值输出，在函数最后return一个值就行。
generator函数的作用：把异步操作写成同步代码，如下所示：
runner(function * () {
let data1 = yield $.ajax({url: 'data1'})
let data2 = yield $.ajax({url: 'data2'})
let data2 = yield $.ajax({url: 'data3'})
})
利用yield会暂停，等上一次请求完，下一次才能请求。写成同步代码的样子，非常好看。
promise 只适合一次读一组数据，不适合有逻辑性的异步操作。要是一次读了一组数据，还要进行逻辑判断再读不同的数据，就比回调写法还糟糕。
generator适合有逻辑性的异步操作，这是比promise 好的地方是。例子如下，写法完全和平时普通写代码一样。
runner(function * () {
let data = yield $.ajax({url: 'data '})
if (data .type == 'VIP') {
let items = yield $.ajax({url: 'dataVip '})
} else {
let items = yield $.ajax({url: 'dataNormal '})
}
})
在Node.js中，用同步方式写异步，请求数据库：
server.use(function * () {
let data = yield db.query(`select * from user_table`)
this.body = data
})
ES7
1、幂运算
用法：3 ** 2 ，这是3的2次方。
由于是运算符，所以可以和 +=一样的用法
let b = 2
b **= 7 //2的7次方，9
2、Includes( )
检测数组是否包含某个东西。第一参数是要找的内容，第二参数是找的起点位置，没有第二参数就默认从头开始找。
let arr = ['a', 'b', 'c']
console.log(arr.includes('a')) //输出 true
console.log(arr.includes('a', 1)) //输出 false
ES8
padStart( )、padEnd( )
字符串补全长度的功能，如果某个字符串不够指定长度，会在头部或尾部补全。
第一参数是要补至多少位，第二参数是如果不够位数要补什么，可以不写。
console.log('ab'.padStart(4, '0')) //输出 00ab
console.log('ab'.padEnd(4, '0')) //输出 ab00
如果不写第二参数，可以用来做对齐的作用，例子如下：
console.log('0.00')
console.log('10,000.00')
console.log('250,000.00')
输出结果如下：
0.00
10,000.00
250,000.00
使用padStart( )在字符串前面填充至指定位数20：
console.log('0.00'.padStart(20))
console.log('10,000.00'.padStart(20))
console.log('250,000.00'.padStart(20))
输出结果如下，全部右对齐了：
0.00
10,000.00
250,000.00
使用padEnd()可以在字符串后面填充至指定位数20：
console.log('0.00'.padEnd(20) + '0.00' )
console.log('10,000.00'.padEnd(20) + '10,000.00' )
console.log('250,000.00'.padEnd(20) + '250,000.00')
输过结果如下，因为前面全部是20位，所以后面的数字对齐了：
0.00 0.00
10,000.00 10,000.00
250,000.00 250,000.00
Async/Await
Async函数是用来替代Generator函数的，所以和Generator函数非常相似。
1、 async可以使用箭头函数，generator却不可以。
2、async放在函数名最前面来修饰，这generator的 * 类似。
3、await只能用在async函数中，道理和yield只能在generator中使用一样。
4、直接调用就行，async并不是像generator 一样走走停停，所以和普通函数使用方式一样。
最基础的例子，如图所示，和以前几乎一样：
async function show() {
console.log(1)
await
console.log(2)
}
show() //输出 1 2
async函数执行异步操作写法：
async () => {
let data1 = await $.ajax({url: 'data1'})
let data2 = await $.ajax({url: 'data2'})
let data2 = await $.ajax({url: 'data3'})
}
5、不用依赖外部，虽然和以前Generator函数使用方式几乎一样，但不用自己写一个runner函数来使用了，已经原生封装写好了。
例子，异步操作2需要异步操作1的结果，异步操作3需要异步操作1和2的结果：
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}