V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
wilddog
V2EX  ›  JavaScript

ECMAScript 6( ES6): JavaScript 的下一个版本有什么新东西(一)

  •  1
     
  •   wilddog · 2015-11-04 13:34:46 +08:00 · 3576 次点击
    这是一个创建于 3310 天前的主题,其中的信息可能已经有所发展或是发生改变。

    QQ 截图 20151103202108.png

    作者: 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
        1
    menc  
       2015-11-04 14:59:37 +08:00
    ECMAScript 6 是 JavaScript 的下一个版本?还是 ECMAScript 的下一个版本?
    domty
        2
    domty  
       2015-11-04 15:27:50 +08:00
    @menc
    ECMAScript6 就是 ECMAScript2015 已经出了,下一个版本是 ECMAScript2016
    JavaScript 差不多就是 ECMA+DOM+BOM 。。。
    yoa1q7y
        3
    yoa1q7y  
       2015-11-04 15:30:44 +08:00
    geek123
        4
    geek123  
       2015-11-04 15:37:49 +08:00
    边学边练习的 free 内容,可以看看:
    http://hubwiz.com/course/5594e91ac086935f4a6fb8ef/
    lwbjing
        5
    lwbjing  
       2015-11-04 16:29:18 +08:00
    ES6 已经定稿,下一版本应该是 ES7...
    jasonliao
        6
    jasonliao  
       2015-11-04 16:32:12 +08:00
    @lwbjing 我刚想说 不是下一个版本,是这一个版本,下一个版本是 ES7
    wilddog
        7
    wilddog  
    OP
       2015-11-04 17:45:19 +08:00
    @jasonliao 感谢指正,这篇是前几天刚刚发布在 smashingmagazine 上的一篇文章,因为内容比较全面,所以想翻译一下,原作者用了这样的标题,作为一篇译文,改掉也不太好,所以就直接写成这个了。
    hkongm
        8
    hkongm  
       2015-11-04 17:46:52 +08:00
    https://www.v2ex.com/t/200471
    可耻地做个广告
    hantsy
        9
    hantsy  
       2015-11-04 17:48:12 +08:00
    @jasonliao 以后好像按年命名了,,,可能现在都习惯快速迭代了。
    wilddog
        10
    wilddog  
    OP
       2015-11-04 17:48:30 +08:00
    @yoa1q7y 同学不要这么凶残,这篇是前几天刚发布在 smashingmagazine 上的一篇文章,因为内容比较全面,所以想翻译一下
    hantsy
        11
    hantsy  
       2015-11-04 17:48:53 +08:00
    @wilddog Mozilla Developer Network 上 ES6 教程比较详细。
    hantsy
        12
    hantsy  
       2015-11-04 17:53:01 +08:00
    => 就和 Java 8 的 Lamada 一样啦。

    我觉得 ES 6 应该 OOP 算是最大的特性吧。
    xxppxiaowei
        13
    xxppxiaowei  
       2015-11-04 17:55:27 +08:00
    @yoa1q7y 还是看 MDN 吧。。
    xxppxiaowei
        14
    xxppxiaowei  
       2015-11-04 17:56:29 +08:00
    @domty DOM 和 BOM 是浏览器环境下的 ES6 语言本身不包含这些。
    domty
        15
    domty  
       2015-11-04 18:01:08 +08:00
    @xxppxiaowei
    我说的是 javascript...
    jint
        16
    jint  
       2015-11-04 18:13:07 +08:00 via Android
    第一个特性的第二个例子,在 i 存在的情况下,使用 j 不是顺理成章吗?非要再次用 i ,有什么特别的好处吗?
    carlosliu
        17
    carlosliu  
       2015-11-04 18:40:59 +08:00
    这代码格式看得我头晕,缺少好多换行,反花括号满天飞呀。建议发布前检查一下啊。另外推荐 https://github.com/lukehoban/es6features ,对 ES6 的新特性有比较简要的介绍。
    wilddog
        18
    wilddog  
    OP
       2015-11-04 19:10:44 +08:00
    @carlosliu 感谢指正,下次一定注意,不过 V2EX 不能后续编辑感觉好难受啊 T.T
    domty
        19
    domty  
       2015-11-04 21:18:17 +08:00   ❤️ 1
    @jint
    重点是 let 关键声明的变量的作用域。
    原有的 js 是不支持像 c 那样的块级作用域的,假设你在 for 循环中声明了计数变量 i ,那么在 for 循环结束后 i 是依然存在的,那就极有可能对你后面的代码造成影响。现在你使用 let 去声明 i ,在块级作用域结束的时候变量 i 就失效了。
    xxppxiaowei
        20
    xxppxiaowei  
       2015-11-05 09:31:54 +08:00
    @domty 那还有 flash JScript Node 在不同宿主环境下实现的 API 等。。
    menc
        21
    menc  
       2015-11-05 16:02:27 +08:00 via iPhone
    @domty c 没有, cpp 才有
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5994 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 163ms · UTC 02:39 · PVG 10:39 · LAX 18:39 · JFK 21:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.