ECMAScript 6（ES6）有什么新东西（一）
发布于 1天前 作者 ye123456 211 次浏览 最后一次编辑是 5小时前 来自 分享

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

回到顶部