ECMAScript 6（ ES6）： JavaScript 的下一个版本有什么新东西（一）

作者： Lars Kappert
原文： http://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/
译：王瑾南审校：陈万幸
野狗官网： https://www.wilddog.com/
野狗官博： https://blog.wilddog.com

你可能已经听说过 ECMAScript 6 ， JavaScript 的下一个版本，它有一些非常棒的新功能。这些功能略微复杂，在简单的脚本和复杂的应用中都可以使用。在这篇文章中，我们将挑选一些 ES6 的功能进行讨论，你可以在日常 JavaScript 编码中使用它们。

需要注意的是，当前的各种浏览器对 ES6 的这些新功能的支持各不相同。

下面的很多代码样本下都带有“ run this code ”的链接，可以看到这些代码并直接使用它。

变量

LET

你习惯用 VAR 来声明变量，现在你可以使用 LET 来做的更好。唯一细微的差别在于作用域。

if(true) {
    let x = 1;}
     console.log(x); // undefined

这样可以使代码更简洁，从而减少变量环绕。我们用这个经典的数组迭代：

for(let i = 0, l = list.length; i < l; i++) {
      // do something with list[i]}
    console.log(i); // undefined

通常 1 在使用的时候，例如， J 变量为在同一作用域内的另一迭代。但是对于 LET 变量，你可以放心的再一次声明 I 变量，因为他只能在自己限定的范围内定义和使用。

CONST

还有另外一种方式来声明块级作用域的变量： const ，使用 const 变量赋值时，是一个只读引用。你必须直接声明一个变量。如果你改变变量，或者你没有立即赋值，就会报错：

const MY_CONSTANT = 1;
    MY_CONSTANT = 2 // Error
    const SOME_CONST; // Error

需要注意的是，你仍然可以更改对象属性或者数组成员：

const MY_OBJECT = {some: 1};
    MY_OBJECT.some = 'body'; // Cool

箭头函数

箭头函数对于 JS 来说，是一个伟大的功能，它可以使代码更简短。我们在比较早的时候将箭头函数引入，这样就可以在后面使用它了。下面的代码片段展示了箭头函数，以及在 ES5 中的相同功能：

let books = [{title: 'X', price: 10}, {title: 'Y', price: 15}];
    let titles = books.map( item => item.title );
    // ES5 equivalent:var titles = books.map(function(item) {
      return item.title;
            });

Run this code

使用箭头函数不需要 function 关键字，只有 0 个或多个参数、“=>”和函数表达式。

return 是默认就有的。而且，不管有没有参数，你都必须使用括号。

// No argumentsbooks.map( () => 1 ); // [1, 1]
    // Multiple arguments[1,2].map( (n, index) => n * index ); // [0, 2]

如果你需要复杂的逻辑，把函数表达式放进块（{ … }）中：

let result = [1, 2, 3, 4, 5].map( n => {
    n = n % 3;
    return n;
            });

Run this code

箭头函数不仅可以减少代码量，与普通函数也有不同。箭头函数会从周围的环境中继承 this 和 arguments 。这意味着你可以摆脱像 var that = this 一样丑陋的语句，不需要把函数绑定到正确的上下文中。下面是一个例子：

let book = {
     title: 'X',
     sellers: ['A', 'B'],
    printSellers() {
       this.sellers.forEach(seller => console.log(seller + ' sells ' + this.title));
       }}
    // ES5 equivalent:var book = {
    title: 'X',
    sellers: ['A', 'B'],
    printSellers: function() {
    var that = this;
    this.sellers.forEach(function(seller) {
    console.log(seller + ' sells ' + that.title)
       })
     }
            }

Run this code

此文为译文，如有问题请加 QQ 群 105454604 联系群主