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));

以上，完。

ITPub博客

ES6 特性快速扫盲

1. forEach

场景

传统实现

ES6 实现

2. map

场景

传统实现

ES6 实现

3. filter

场景

传统实现

ES6 实现

4. find

场景

传统实现

ES6 实现

5. every

场景

传统实现

ES6 实现

6. some

场景

传统实现

ES6 实现

7. reduce

场景1

传统实现1

ES6 实现1

场景2

传统实现2

ES6 实现2

8. let/const

var、let 区别

const

9. 模板字符串

场景1

传统实现1

ES6 实现1

场景2

传统实现2

ES6 实现2

场景3

传统实现3

ES6 实现3

10. 箭头函数

场景1

传统实现1

ES6 实现

场景2

场景3

传统实现3

ES6 实现3

11. 增强对象字面量

12. 函数参数默认值

13. 展开运算符

14. 解构

场景1

传统实现1

ES6 实现1

场景2

场景3

15. 面向对象 class

场景

传统实现

ES6 实现

16. generator 生成器

场景

传统实现

ES6 实现

17. 新的数据结构 Map

18. 新的数据结构 Set

19. Promise

场景

20. fetch

场景

21. async/await(ES7)

最新文章