前言
网上有很多关于ES6的文章教程，但是总觉得比较教科书话，繁琐难懂，因此特意在此对ES6常用的新特性，做了一些简化概述，以帮助新人理解。
一、箭头函数
let fn = () => {
console.log('箭头函数');
}
// 回调函数中的运用
let arr = [1, 2];
let increaseArr = arr.map((item, index) => {
return item + 1;
});
1、参数只有一个，那么()可以不要；如果函数主体只有return，那么{}可以不要；下面是个例子：
let arr = [1, 2];
let increaseArr = arr.map(item => item + 1);
2、如果箭头函数是对象中的属性值，那么this作用域会跳出对象
window.color = 'blue';
let obj = {
color: 'red',
sayColor: () => {
console.log(this.color);
}
};
obj.sayColor(); // blue
二、函数参数
1、参数扩展
let showArg = (a, b, ...args) => {
console.log(...args);
}
showArg(1, 2, 3, 4, 5); // 3 4 5
2、默认参数
let sum = (a=2, b=5) => {
return a + b;
}
sum(); // 7
sum(5); // 10
sum(5, 10); // 15
三、解构赋值
1、左右两边的数据结构必须一致
let [a, b, c] = [1, 2, 3];
let {a, b, c} = {a: 1, b: 2, c:3};
let [{a, b}, c] = [ {a: 1, b: 2}, 3];
// 以上任何一种赋值方式：console.log(a, b, c); // 1 2 3
2、右边必须是一种有效的JavaScript数据类型
// 这样会报错，因为右边{1, 2}，不是JavaScript中6种数据类型中的任何一种
let {a, b} = {1, 2};
3、申明和赋值不能分开
// 这样会报错
let [a, b];
[a, b] = [1, 2];
四、字符串模板
过去ES5字符串拼接写法
let data = {
title: '标题',
content: '内容文字'
};
let divHtml = '<div>'
+'<span class="title">' + data.title + '</span>'
+'<span class="content">' + data.content + '</span>'
+'</div>';
ES6新字符串模板，新增特性：支持换行、${变量}
let data = {
title: '标题',
content: '内容文字'
};
let divHtml = `<div>
<span class="title">${data.title}</span>
<span class="content">${data.content}</span>
</div>`;
五、对象简写
键和值，如果值是个变量，并且变量名和键同名，可以这样写：
let name = 'Dave',
age = 26;
let person = {
name,
age
}
如果值是函数，可以这么简写
let name = 'Dave',
age = 26;
let person = {
name,
age,
sayName() {
console.log(this.name)
}
}
六、面向对象
1、类（构造函数）
回往ES5过去的写法
function User(name, age) {
this.name = name;
this.age = age;
this.sayName = function () {
console.log(this.name);
}
}
ES6模仿JAVA的写法
class User{
// 这是类的写法，不是ES6函数简写
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName() {
console.log(this.name);
}
}
2、继承
回往ES5过去的写法
function VipUser(vipCode) {
this.vipCode = vipCode;
this.showVipCode = function() {
console.log(this.vipCode);
}
}
VipUser.prototype = new User(name, age);
VipUser.prototype.constructor = VipUser;
ES6模仿JAVA的写法
class VipUser extends User{
constructor(name, age, vipCode) {
// super方法是ES6类写法内部自带的，相当于User.call(this, name, age);
super(name, age);
this.vipCode = vipCode;
}
showVipCode() {
console.log(this.vipCode);
}
}
七、Promise
let p = () => {
return new Promise((resolve, reject) => {
$.ajax({
url: '/login?username=xxx&pass=xxx',
success(data) {
resolve(data);
},
error(data) {
reject(data);
}
});
});
}
p().then(data => {
console.log(`success返回的data:${data}`);
}).catch(data => {
console.log(`error返回的data:${data}`);
});
上面看起来，就是两个普通的回调函数，简直就是多此一举。是的！但是有一些些区别；Promise承诺，会记住数据，任何时候去调用，都可以拿到想要的数据：
let res = p();
// 下面任何时候调用，都可以拿到返回的数据。
res.then(data => {
console.log(`success返回的data:${data}`);
}).catch(data => {
console.log(`error返回的data:${data}`);
});
function p1(flag) {
return new Promise((resolve, reject) => {
setTimeout(() => {
flag ? resolve('1') : reject();
}, 1000)
})
}
function p2(flag) {
new Promise((resolve, reject) => {
if (flag) {
return p1(flag);
} else {
reject();
}
})
}
p2(true).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
async function fn() {
var result = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve('1');
}, 1000)
})
console.log(result); // '1'
}
fn();
下面两种倒是有用的方法：
let p1 = new Promise(resolve => {
$.get('/xxx1', (data1) => {
resolve(data1);
});
});
let p2 = new Promise(resolve => {
$.get('/xxx2', (data2) => {
resolve(data2);
});
});
// 批量请求；获取到所有请求数据，组成数组返回
Promise.all([p1, p2]).then(arr => {
// arr: [data1, data2]
console.log(arr);
});
// 竞赛请求；获取到请求最快的数据
Promise.race([p1, p2]).then(data => {
console.log(data);
});
八、set数据结构
// 实例化set，参数是个可选参数，类型为数组 | set实例化对象
let set = new Set();
let set = new Set([1, 2]);
// 添加成员
set.add(3).add('abc').add({name: 'Dave'});
// 删除成员
set.delete('abc');
// 查找是否存在某个成员
set.has('abc');
// 清空
set.clear();
// 长度
set.size
// 遍历
set.keys();
set.value();
set.entries();
for (let i of set.keys()){}
for (let i of set.value()){}
for (let [key, value] of set.entries()){}
for (let i of set){}
set.forEach((item, index) => {})
下面是一种数组去重常用技巧
let arr = [1,3,5,4,5,2,3];
let newArr = [...new Set(arr)];
set如何使用数组方法（Set原型对象本身没有的方法），例如map、filter
let set = new Set([1, 2]);
set = new Set([...set].map(item => item * 2));
set = new Set([..set].filter(item => item < 2));
九、map数据结构
map类似对象，但对象属性只能是字符串，而map可以是其他6中数据类型
let map = new Map();
map.set('key', 'value');
map.get('key');
map.delete('key');
map.has('key');
map.clear();
// 遍历
map.keys();
map.value();
map.entries();
for (let i of map.keys()){}
for (let i of map.value()){}
for (let [key, value] of map.entries()){}
for (let i of map){}
map.forEach((item, index) => {})
十、模块化import用法
被引入的modules.js；下面介绍三种导出方法：
// 可以直接申明赋值导出
exports let a = 3;
// 可以先申明赋值，然后再导出；分开来写
let b = 4;
let person = {name: 'Dave'}
exports {
b,
person
}
// 还可以匿名导出，但一个模块只能有一个匿名导出
exports default{
b,
person
}
// 导出从(from)其他模块引入的变量【重定向功能】
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
需要引入的imports.js
// 匿名的导入需要给它取一个变量名，名字任意但一定要放在最前面
import mod, {b, person} from 'modules.js';
// 给在modules.js指定变量名导出的变量，取别名
import mod, {b as a, person as dave} from 'modules.js';
// 统一导入到一个变量（对象）
import * as modules from 'modules.js';
十一、generator中的异步函数async
// generator函数写法
function *ye() {
console.log(1);
yield;
console.log(2);
yield;
console.log(3);
return;
}
// 调用
let yeObj = ye();
ye.next();
ye.next();
这样看起来，没什么用。重点说下：异步函数async
// async需要await配合，await需要Promise配合；三者结合起来使用
async function getDatas() {
await new Promise(resolve => {
$.get('/xxx1', function (data1) {
// 这里的resolve是必须的，不执行resolve，await将不起作用
resolve(data1);
});
}).then(data1 => {});
await new Promise(resolve => {
$.get('/xxx2', function (data2) {
// 这里的resolve是必须的，不执行resolve，await将不起作用
resolve(data2);
});
}).then(data2 => {});
}
getDatas();
