ES6，也称 ECMAScript2015，对目前来说，它并不是 JavaScript 最新的标准，但是它已经广泛用于编程实践中。如果你还没用过 ES6，现在还不算太晚，跟我一起扫一遍吧。
1. forEach
场景
数组遍历。
var languages = ["JavaScript", "Python", "Rust", "Go"];
传统实现
for (var i = 0; i < languages.length; ++i) { console.log(languages[i]);}
ES6 实现
languages.forEach(function (e) { console.log(e);})
2. map
场景
数组每个元素翻倍，存储到另一个数组中。
var numbers = [1, 2, 4, 8, 16];
传统实现
var doubled = []; for (var i = 0; i < numbers.length; ++i) { doubled.push(numbers[i] * 2);} console.log(doubled);
ES6 实现
var doubled = numbers.map(function (e) { return e * 2;}); console.log(doubled);
3. filter
场景
过滤掉数组中元素 weight 小于 10 的元素（即：大于等于 10 才存放）。
var apples = [ { id: 1, weight: 18 }, { id: 2, weight: 9 }, { id: 3, weight: 11 },];
传统实现
var filtered = []; for (var i = 0; i < apples.length; ++i) { if (apples[i].weight >= 10) { filtered.push(apples[i]); }} console.log(filtered);
ES6 实现
var filtered = apples.filter(function (e) { return e.weight >= 10;}); console.log(filtered);
4. find
场景
查找 name 为 bingo 的元素，找到第一个符合条件的就返回。
var users = [ { id: 1, name: "kevin" }, { id: 2, name: "cicic" }, { id: 3, name: "alexy" }, { id: 4, name: "bingo" }, { id: 5, name: "henry" },];
传统实现
var found;for (var i = 0; i < users.length; ++i) { if (users[i].name === "bingo") { found = users[i]; break; }} console.log(found);
ES6 实现
var found = users.find(function (e) { return e.name === "bingo";}); console.log(found);
5. every
场景
判断数组每本书的 year 是否都大于 2018（即：一假即假）。
var books = [ { id: 1, name: "book1", year: 2019}, { id: 2, name: "book2", year: 2017}, { id: 3, name: "book3", year: 2019},];
传统实现
var every = true; for (var i = 0; i < books.length; ++i) { if (books[i].year <= 2018) { every = false; break; }} console.log(every);
ES6 实现
var every = books.every(function (e) { return e.year > 2018;}); console.log(every);
6. some
场景
判断数组中是否存在 content 长度小于 3 的元素（即：一真即真）。
var inputs = [ { id: 1, content: "掘金阴明"}, { id: 2, content: "阿里小号"}, { id: 3, content: "微信"}, { id: 4, content: "头条大号"},];
传统实现
var some = false; for (var i = 0; i < inputs.length; ++i) { if (inputs[i].content.length < 3) { some = true; break; }} console.log(some);
ES6 实现
var some = inputs.some(function (e) { return e.content.length < 3;}); console.log(some);
7. reduce
场景1
计算元素总和。
var nums = [2, 4, 8, 16];
传统实现1
var sum = 0; for (var i = 0; i < nums.length; ++i) { sum += nums[i];} console.log(sum);
ES6 实现1
var sum = nums.reduce(function (init, number) { return init + number;}); console.log(sum);
场景2
属性抽离，将数组中的每个元素的 color 属性抽离出来放到数组中。
var colors = [ { id: 1, color: "red" }, { id: 2, color: "white" }, { id: 3, color: "yellow" },];
传统实现2
var newColors = []; for (var i = 0; i < colors.length; ++i) { newColors.push(colors[i].color);} console.log(newColors);
ES6 实现2
var newColors = colors.reduce(function (init, color) { init.push(color.color); return init;}, []); console.log(newColors);
注：reduce 可指定初始值，比如上面的
[]。
8. let/const
var、let 区别
•var
function testVar() { var a = 10; if (true) { var a = 20; console.log(a); // 20 } // 在外部也生效 console.log(a); // 20} testVar();
•let
function testLet() { let a = 10; if (true) { let a = 20; // 仅在当前作用域生效 console.log(a); // 20 } console.log(a); // 10} testVar();
注：在前面的示例中，var 可改为 let。
const
•常量值不可修改
const x = 100; // 这里会报错x = 1000; // Uncaught TypeError: Assignment to constant variable.
•数组元素可 push 添加
const arr = []arr.push(1)arr.push("2") // 正常打印console.log(arr) // [1, "2"]
9. 模板字符串
模板字符串使用反引号 ` (Tab 键上方的符号)来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法 ${expression} 的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来。
场景1
多行字符串。
传统实现1
// 这里是使用单引号 'console.log('string text line 1\n' +'string text line 2');// "string text line 1// string text line 2"
ES6 实现1
// 注意是使用反引号 `console.log(`string text line 1string text line 2`);// "string text line 1// string text line 2"
场景2
插入表达式。
传统实现2
var a = 5;var b = 10;console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');// "Fifteen is 15 and// not 20."
ES6 实现2
var a = 5;var b = 10;console.log(`Fifteen is ${a + b} andnot ${2 * a + b}.`);// "Fifteen is 15 and// not 20."
场景3
嵌套模板。
传统实现3
var classes = 'header'classes += (isLargeScreen() ? '' : item.isCollapsed ? ' icon-expander' : ' icon-collapser');
ES6 实现3
const classes = `header ${ isLargeScreen() ? '' : (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
10. 箭头函数
箭头函数的作用：
•简化代码•改变 this 指向
场景1
两数相加。
传统实现1
const add = function(a, b) { return a + b;}
ES6 实现
const add = (a, b) => a + b;
场景2
数组元素翻倍。
const original = [2, 4, 8, 16];const double = original.map(e => e * 2);console.log(double);
场景3
改变 this 指向。
传统实现3
const team = { members: ["bingo", "alex"], teamName: "ES6", teamSummary: function() { let self = this; return this.members.map(function (e) { return `${e}隶属于${self.teamName}小组`; }) } // 或者使用bind绑定的方式}console.log(team.teamSummary())
ES6 实现3
const team = { members: ["bingo", "alex"], teamName: "ES6", teamSummary: function() { return this.members.map(e => `${e}隶属于${this.teamName}小组`); }}console.log(team.teamSummary())
11. 增强对象字面量
增强对象字面量的一个作用就是：简化代码。在下面的示例中，注释的部分是简化前所使用。
function createBookShop(inventory) { return { // inventory: inventory, inventory, // inventoryValue: function() { inventoryValue() { return this.inventory.reduce((total, book) => total + book.price, 0); }, // priceForTitle: function(title) { priceForTitle(title) { return this.inventory.find(book => book.title === title).price; } }} const inventory = [ { title: "Vue.js", price: 20 }, { title: "React.js", price: 19 },] const bookShop = createBookShop(inventory);console.log(bookShop.inventoryValue());console.log(bookShop.priceForTitle("Vue.js"));
12. 函数参数默认值
function request(url, method="GET") { // ... console.log(method);} request("google.com", "POST");
以上使用了 ES6 函数参数默认值，看一下上面的代码，若使用 Babel 进行转化，会得到什么：
"use strict"; function request(url) { var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "GET"; // ... console.log(method);} request("google.com", "POST");
可以看到，使用 ES6 函数参数默认值，代码可以简化不少。
13. 展开运算符
Spread Operator，也叫展开运算符，有了它，我们可以更快、更便捷地操作数组。
// 不固定参数个数function total(...numbers) { return numbers.reduce((sum, number) => sum + number, 0);} console.log(total(2, 4, 6, 8)) // 4个参数，20console.log(total(1, 2, 3, 4, 5)); // 5个参数，15
再看个示例：
let colors1 = ["red", "orange"];let colors2 = ["blue", "white", "green"]; let totalColors = ["black", ...colors1, ...colors2];console.log(totalColors); // ["black", "red", "orange", "blue", "white", "green"]
14. 解构
场景1
解构对象。
let user = { name: "Amy", age: 20, college: "szu"}
传统实现1
function print(user) { console.log(`${user.name}的年龄是${user.age}`);} print(user); // Amy的年龄是20
ES6 实现1
function print({name, age, college}) { console.log(`${name}的年龄是${age}`);}print(user); // Amy的年龄是20
场景2
解构数组。
const names = ["Bingo", "Iris", "Alex"]; const [name1, name2, name3] = names;console.log(name1, name2, name3); // Bingo Iris Alex // 返回数组个数const { length } = names;console.log(length); // 3 // 结合展开运算符const [name, ...rest] = names;console.log(name); // Bingoconsole.log(rest); // ["Iris", "Alex"]
场景3
将数组转化为对象。
const points = [ [4, 5], [1, 2], [3, 6],]; let res = points.map(([x, y]) => { return { x, y };})console.log(res); // [{…}, {…}, {…}]
15. 面向对象 class
场景
创建对象，并实现继承。
传统实现
// 首字母大写function Car(options) { this.title = options.title;} Car.prototype.drive = function() { return "Vroom";} const car = new Car({ title: "BMW" });console.log(car);console.log(car.drive()) // 继承function Toyota(options) { // 通过Car调用call()方法 Car.call(this, options); this.color = options.color;} // 不容易理解Toyota.prototype = Object.create(Car.prototype);Toyota.prototype.constructor = Toyota; const toyota = new Toyota({ color: "red", title: "Focus" });console.log(toyota.title); // Focusconsole.log(toyota.drive()); // Vroom
ES6 实现
class Car { constructor({ title }) { this.title = title; } drive() { return "Vroom"; }} const car = new Car({ title: "BMW" });console.log(car);console.log(car.drive()) // 继承class Toyota extends Car { constructor({ title, color }) { super(title); this.color = color; }} const toyota = new Toyota({ color: "red", title: "Focus" });console.log(toyota) // Focusconsole.log(toyota.drive()) // Vroom
16. generator 生成器
场景
斐波那契数列。
传统实现
function fib(max) { var a = 0, b = 1, arr = [0, 1]; while (arr.length < max) { [a, b] = [b, a + b]; arr.push(b); } return arr;} console.log(fib(5))
ES6 实现
// 注意，function后加多了个*function* fib(max) { let a = 0, b = 1, n = 0; while (n < max) { // 使用yield关键字 yield a; [a, b] = [b, a + b]; ++n; } return;} // 使用for..of遍历for (let x of fib(10)) { console.log(x);}
17. 新的数据结构 Map
Map 中的键可以是任何类型的，比如 function()、{}、string 等。
const map = new Map(); const key1 = 'some string', key2 = {}, key3 = function() {}; // 为key设置valuemap.set(key1, 'Value of key1');map.set(key2, 'Value of key2');map.set(key3, 'Value of key3'); console.log(map.get(key1))console.log(map.get(key2))console.log(map.get(key3)) // 使用for..of遍历for (let [key, value] of map) { console.log(`${key}=>${value}`);} // 只获取keyfor (let key of map.keys()) { console.log(key);} // 只获取valuefor (let value of map.values()) { console.log(value);} // 使用forEach遍历map.forEach((key, value) => { console.log(`${key}=>${value}`);})
18. 新的数据结构 Set
Set 可以存储任何类型的不重复数据。
const set = new Set();set.add({name: "bingo"});set.add(100);set.add(true);set.add(100);console.log(set); // {{…}, 100, true} console.log(set.size) // 3console.log(set.has(100)); // trueconsole.log(set.has({name: "bingo"})) // 匹配的是地址，false set.delete(100); // 使用for..of遍历for (let item of set) { console.log(item);} // 使用forEach遍历set.forEach(e => { console.log(e);}) // 将set转换为arrayconst setArray = Array.from(set);console.log(setArray);
19. Promise
Promise 的三种状态：
•unresolved：等待任务完成；•resolved：任务完成并且没有任何问题；•rejected：任务完成，但是出现问题。
场景
生成 0-2 之间的随机数，如果小于 1，则等待一段时间后返回成功，否则返回失败。
let promise = new Promise((resolve, reject) => { var timeout = Math.random() * 2; setTimeout(() => { if (timeout < 1) { resolve("success:ok"); } else { reject("error:timeout"); } }, timeout * 1000);}); promise .then(res => console.log(`成功：${res}`)) .catch(res => console.log(`失败：${res}`))
成功时，执行 then；失败时，执行 catch。
20. fetch
场景
发送网络请求获取数据。
以下是一个基本的 fetch 请求，fetch() 返回一个包含响应结果的 promise（一个 Response 对象）：
fetch('https://jsonplaceholder.typicode.com/posts/1') .then(resp => resp.json()) .then(res => console.log(res))
fetch() 支持第二个可选参数，一个可以控制不同配置的 init 对象：
postData('https://jsonplaceholder.typicode.com/posts/1', {answer: 42}) .then(data => console.log(data)) .catch(error => console.error(error)) function postData(url, data) { return fetch(url, { cache: 'no-cache', credentials: 'same-origin', headers: { 'user-agent': 'Mozilla/4.0 MDN Example', }, method: 'GET', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, cors, *same-origin redirect: 'follow', // manual, *follow, error referrer: 'no-referrer', // *client, no-referrer }) .then(response => response.json()) // parses response to JSON}
21. async/await(ES7)
async/await 是 JavaScript 中最终极的异步解决方案。
async function getUsers() { const resp = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await resp.json(); return data;} // async 返回一个 Promise 对象，因此可以调用 then 获取结果。getUsers().then(users => console.log(users));
以上，完。
