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

[wilddog]

作者： 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 联系群主

[menc]

ECMAScript 6 是 JavaScript 的下一个版本？还是 ECMAScript 的下一个版本？

[domty]

@menc
ECMAScript6 就是 ECMAScript2015 已经出了，下一个版本是 ECMAScript2016
JavaScript 差不多就是 ECMA+DOM+BOM 。。。

[yoa1q7y]

http://es6.ruanyifeng.com/

拿好不谢

[geek123]

边学边练习的 free 内容，可以看看：
http://hubwiz.com/course/5594e91ac086935f4a6fb8ef/

[lwbjing]

ES6 已经定稿，下一版本应该是 ES7...

[jasonliao]

@lwbjing 我刚想说 不是下一个版本，是这一个版本，下一个版本是 ES7

[wilddog]

@jasonliao 感谢指正，这篇是前几天刚刚发布在 smashingmagazine 上的一篇文章，因为内容比较全面，所以想翻译一下，原作者用了这样的标题，作为一篇译文，改掉也不太好，所以就直接写成这个了。

[hkongm]

https://www.v2ex.com/t/200471
可耻地做个广告

[hantsy]

@jasonliao 以后好像按年命名了，，，可能现在都习惯快速迭代了。

[wilddog]

@yoa1q7y 同学不要这么凶残，这篇是前几天刚发布在 smashingmagazine 上的一篇文章，因为内容比较全面，所以想翻译一下

[hantsy]

@wilddog Mozilla Developer Network 上 ES6 教程比较详细。

[hantsy]

=> 就和 Java 8 的 Lamada 一样啦。

我觉得 ES 6 应该 OOP 算是最大的特性吧。

[xxppxiaowei]

@yoa1q7y 还是看 MDN 吧。。

[xxppxiaowei]

@domty DOM 和 BOM 是浏览器环境下的 ES6 语言本身不包含这些。

[domty]

@xxppxiaowei
我说的是 javascript...

[jint]

第一个特性的第二个例子，在 i 存在的情况下，使用 j 不是顺理成章吗？非要再次用 i ，有什么特别的好处吗？

[carlosliu]

这代码格式看得我头晕，缺少好多换行，反花括号满天飞呀。建议发布前检查一下啊。另外推荐 https://github.com/lukehoban/es6features ，对 ES6 的新特性有比较简要的介绍。

[wilddog]

@carlosliu 感谢指正，下次一定注意，不过 V2EX 不能后续编辑感觉好难受啊 T.T

[domty]

@jint
重点是 let 关键声明的变量的作用域。
原有的 js 是不支持像 c 那样的块级作用域的，假设你在 for 循环中声明了计数变量 i ，那么在 for 循环结束后 i 是依然存在的，那就极有可能对你后面的代码造成影响。现在你使用 let 去声明 i ，在块级作用域结束的时候变量 i 就失效了。

[xxppxiaowei]

@domty 那还有 flash JScript Node 在不同宿主环境下实现的 API 等。。

[menc]

@domty c 没有， cpp 才有