【转】ES6 手册

ES6 手册

这篇手册包含了 ES2015(ES6) 的使用小技巧、最佳实践以及可以给你每天的工作参考的代码片段。

var 和 let/const 的比较

除了 var ，我们现在还可以使用两个新的标示符来定义一个变量 —— let 和 const。和 var 不一样的是，let 和 const 不存在变量提升。

var snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        var snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false); // undefined

当我们用 let 代替 var 的时候，观察会发生什么：

let snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false); // 'Meow Mix'

当我们重构使用 var 的老代码的时候应该注意上面的变化。盲目地使用 let 替换 var 可能会出现出乎意料的情况。

注意： let 和 const 是块级作用域，因此在变量未被定义之前使用它会产生一个 ReferenceError。

console.log(x); // ReferenceError: x is not defined

let x = 'hi';

最佳实践：在遗留代码中放弃使用 var 声明意味着需要很小心地重构；在新的项目代码中，使用 let 声明一个可以改变的变量，用 const 声明一个不能被重新赋值的变量。

用块级作用域代替 IIFES

函数立即执行表达式的通常用途是创造一个内部的作用域，在 ES6 中，我们能够创造一个块级作用域而不仅限于函数作用域：

IIFES：

(function () {
    var food = 'Meow Mix';
}());

console.log(food); // Reference Error

使用 ES6 的块级作用域：

{
    let food = 'Meow Mix';
}

console.log(food); // Reference Error

箭头函数

我们经常需要给回调函数维护一个词法作用域的上下文 this。
看看这个栗子：

function Person(name) {
    this.name = name;
}

Person.prototype.prefixName = function (arr) {
    return arr.map(function (character) {
        return this.name + character; // Cannot read property 'name' of undefined
    });
};

一个常用的解决办法是把 this 存在一个变量中：

function Person(name) {
    this.name = name;
}

Person.prototype.prefixName = function (arr) {
    var that = this; // Store the context of this
    return arr.map(function (character) {
        return that.name + character;
    });
};

我们也可以传递一个合适的 this 上下文：

function Person(name) {
    this.name = name;
}

Person.prototype.prefixName = function (arr) {
    return arr.map(function (character) {
        return this.name + character;
    }, this);
}

我们还可以绑定上下文：

function Person(name) {
    this.name = name;
}

Person.prototype.prefixName = function (arr) {
    return arr.map(function (character) {
        return this.name + character;
    }.bind(this));
};

使用箭头函数，this 将不会受到影响，并且我们可以重写上面的函数：

function Person(name) {
    this.name = name;
}

Person.prototype.prefixName = function (arr) {
    return arr.map(character => this.name + character);
};

最佳实践：当你需要维护一个 this 上下文的时候使用箭头函数。

在我们写一个函数的时候，箭头函数更加简洁并且可以很简单地返回一个值：

var squares = arr.map(function (x) { return x * x }); // Function Expression
const arr = [1, 2, 3, 4, 5];
const squares = arr.map(x => x * x); // Arrow Function for terser implementation

最佳实践：尽可能使用箭头函数代替原来的写法。

字符串

在 ES6 中，标准库升级了很多，在这些变化中有许多新的对于字符串的函数，比如 .includes() 和 .repeat()。

.includes( )

var string = 'food';
var substring = 'foo';

console.log(string.indexOf(substring) > -1);

之前我们使用 indexOf() 函数的返回值是否 >-1 来判断字符串是否包含某些字符串，现在我们更简单地使用 .includes() 来返回一个布尔值来判断：

const string = 'food';
const substring = 'foo';

console.log(string.includes(substring)); // true

.repeat( )

function repeat(string, count) {
    var strings = [];
    while(strings.length < count) {
        strings.push(string);
    }
    return strings.join('');
}

在 ES6 中，可以更简便地实现：

// String.repeat(numberOfRepetitions)
'meow'.repeat(3); // 'meowmeowmeow'

模版字符串

使用模版字符串我们就可以不用对某些特殊自负进行转义处理了：

var text = "This string contains \"double quotes\" which are escaped.";
let text = `This string contains "double quotes" which don't need to be escaped anymore.`;

模版字符串还支持插入，可以把变量值和字符串连接起来.

var name = 'Tiger';
var age = 13;

console.log('My cat is named ' + name + ' and is ' + age + ' years old.');

更简单：

const name = 'Tiger';
const age = 13;

console.log(`My cat is named ${name} and is ${age} years old.`);

在 ES5 中，需要换行时，需要这样：

var text = (
    'cat\n' +
    'dog\n' +
    'nickelodeon'
);

或者这样：

var text = [
    'cat',
    'dog',
    'nickelodeon'
].join('\n');

模版字符串可以支持换行并且不需要额外的处理：

let text = ( `cat
dog
nickelodeon`
);

模版字符串还支持表达式：

let today = new Date();
let text = `The time and date is ${today.toLocaleString()}`;

解构

结构可以让我们用一个更简便的语法从一个数组或者对象（即使是深层的）中分离出来值，并存储他们。

结构数组

var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
let [a, b, c, d] = [1, 2, 3, 4];

console.log(a); // 1
console.log(b); // 2

结构对象

var luke = { occupation: 'jedi', father: 'anakin' };
var occupation = luke.occupation; // 'jedi'
var father = luke.father; // 'anakin'
let luke = { occupation: 'jedi', father: 'anakin' };
let {occupation, father} = luke;

console.log(occupation); // 'jedi'
console.log(father); // 'anakin'

模块

在 ES6 之前，我们使用 Browserify 这样的库来创建客户端的模块化，在 node.js 中使用 require。
在 ES6 中，我们可以直接使用所有类型的模块化（AMD 和 CommonJS）。

使用 CommonJS 的出口

module.exports = 1;
module.exports = { foo: 'bar' };
module.exports = ['foo', 'bar'];
module.exports = function bar () {};

使用 ES6 的出口

在 ES6 中我们可以暴漏多个值，使用 Exports：

export let name = 'David';
export let age  = 25;

或者暴露一个对象列表：

function sumTwo(a, b) {
    return a + b;
}

function sumThree(a, b, c) {
    return a + b + c;
}

export { sumTwo, sumThree };

我们还可以暴露函数、对象和其他的值，通过简单地使用 export 这个关键字：

export function sumTwo(a, b) {
    return a + b;
}

export function sumThree(a, b, c) {
    return a + b + c;
}

最后，我们还可以绑定一个默认的输出：

function sumTwo(a, b) {
    return a + b;
}

function sumThree(a, b, c) {
    return a + b + c;
}

let api = {
    sumTwo,
    sumThree
};

export default api;

/* Which is the same as
 * export { api as default };
 */

View Code

目录