ES6的集成比较

   <p>如果你仍然在用 <a href="/misc/goto?guid=4959677112442277893">ES5</a> (同样也可以称之为 ECMAScript 5)写JavaScript代码，并且希望能够用ES6 (ES2015)编写代码，但是却又有点担心写不好。那么我们详细介绍几种较为合理的方法，以使你们能够立即在自己的代码中开始使用这样新的像糖一样的语 法。我们将会讨论并且检查语法中几种比较集中的特征的使用方法，比如<code>let</code> 和 <code>const</code> 的比较，再加上 <code>var</code> 和 <code>let</code> 的对抗，最后理解什么时候去使用这些散用操作符。所以不要多想，让我们开始吧。</p>    <h3>简短的回顾</h3>    <p>对于从来没有使用过 ES6 的人，请继续阅读。其他人可以跳过这部分开始下一部分的术语部分。还在读这部分的人，现在是时候快速回顾一下使如何用ECMAScript 2015写代码的。</p>    <p>在我们写代码的过程中，为了使用 ES6，你们需要一个对我们开发者来说都知道的工具 <a href="/misc/goto?guid=4958865492110783321">Babel</a>; 一个JavaScript编辑器。这是一个很好的工具，它可以重新把开发者的代码编译成浏览器可识别的代码。你可以在这个网站上阅读这个系列的其他部分，在那里我分享了一些关于 <a href="/misc/goto?guid=4959677112565252892">Preparing for ES6</a> 的有用的建议。</p>    <p>术语</p>    <p>如果我们不复习一些术语就开始的话会是非常不明智的，所以就让我们先学习一些术语的解释来帮助我们更好的理解它。</p>    <h3><code>let</code></h3>    <p>在 ES2015 中， <code>let</code> 就是一个新的 <code>var</code> and 并且我们都知道它是一个 <strong>结构绑定的块级作用域</strong> 变量. 关键字 <code>let</code> 和 <code>const</code> 也同样是<a href="/misc/goto?guid=4958968604374563640">规格说明书</a> “<strong>声明和变量语句</strong>”部分的一部分。</p>    <p><code>let</code> 语句声明了一个本地的块状作用域变量,可初始化一个值。它可以在块状作用域，语句，或者使用within的表达式中声明变量。这不像 <code>var</code> 关键字，它声明一个全局变量，或者在本地的整个函数中起作用而不是在块状作用域。同样这也可以当做一个信号，当这个变量分配在一个循环中，或者在一个算法中来回转换的时候。</p>    <h3><code>const</code></h3>    <p>关键字 <code>const</code> 声明了一个值不可以更改的标识符，不像 <code>let</code> 和 <code>var</code> 一样，它们是可以修改的。这个关键字是单赋值的，然而<code>let</code> 可以被定义 <strong>多次</strong>。熟悉PHP的人可能已经理解了<a href="/misc/goto?guid=4959677112692422821">这类标识符</a>. 一个 <code>const</code> 对象的属性可以变化而对应的标识符不可以被重新赋值。<code>const</code>的静态约束特性可以防止在赋值前使用。</p>    <h3>散布操作符 <code>(…)</code></h3>    <p>就像我们经常使用的那样，散布操作符是一种通过单值代替多参数的一种方法。这就允许当一个表达式有多个函数参数，或者多值元素（数组迭代）或者多变量（解构赋值）时，可以以一种适当的方法进行扩展。 (来源: <a href="/misc/goto?guid=4958965675075917997">MDN</a>).</p>    <h3>例子</h3>    <p>既然你决定尽快能够使用 ES2015, 但是我们如何知道什么时候用<code>let</code> 还是 <code>var</code> 更合适呢? 我们应该如何决定什么时候使用 <code>const</code> 或者散布操作符呢?</p>    <h3>如何使用 <code>let</code></h3>    <p>当你需要赋值一个变量或者保护块状区域的值的时候就使用 <code>let</code>。 一般用 <code>let</code> 的时候往往是在一个循环中或者数学的算法中。关键字<code>let</code>同样表明变量只会作用于它定义的块状区域中; 不要提升它的作用范围。如果你想要重新用<code>let</code>分配变量，那么请一定不要使用 <code>let</code>关键字，并且使用已经分配过的。比如…</p>    <p>Incorrect</p>    <pre>  <code class="language-javascript"> let window_width = window.innerWidth;  let window_width = 'string';</code></pre>    <p>Correct</p>    <pre>  <code class="language-javascript"> let window_width = window.innerWidth;  window_width = 'string';</code></pre>    <p>关键字 <code>let</code> 同样可以在一个函数块状作用域内使用。</p>    <pre>  <code class="language-javascript"> function windowSize() {    let window_width = window.innerWidth;  }    windowSize();    window.onresize = function() {    windowSize();  };    console.log(window_width) // reports undefined</code></pre>    <p>在用例中为了检测出窗口的resize事件中窗口的宽度，我们只在使用它的作用域内定义了<code>window_width</code>。记住<code>window_width</code> 在 <code>windowSize</code> 函数外是永远不可访问的。</p>    <h3>如何使用 <code>const</code></h3>    <p>恒量是块状作用与的,和用<code>let</code>关键字定义的变量很像。恒量的值在整个过程中都是不可变的,也不能被重新声明。想象一下 “constant”作为“one-time assignment”的意思。</p>    <pre>  <code class="language-javascript"> `const window_width = window.innerWidth;`</code></pre>    <p>如果我们试图重新分配一个标识符我们将会在控制台得到一个警告:</p>    <pre>  <code class="language-javascript"> const window_width = window.screen.width;  window_width = 'string'; // Uncaught TypeError: Assignment to constant variable.</code></pre>    <p>当一个值在你的应用中就像在这个例子中数学中的纸一样不会改变的时候，你就可以用恒量修饰。</p>    <pre>  <code class="language-javascript"> `const pi = Math.PI;`</code></pre>    <p>这里我们创建了一个只读的参考，我们不能再重新分配它，就像我们之前说明的那样。</p>    <p>在一个文字描述的对象上，我们可以围绕不变的规则来定义我们的值。全局配置是一个很好地使用 <code>const</code> 的例子，想下面这样使用就是一种潮流:</p>    <pre>  <code class="language-javascript"> const config = {      url: window.location.origin,      width: window.screen.width,      path: window.location.pathname  };    // The object's properties can be mutated so we can reassign values.  config.url = "https://codepen.io";    console.log(config)    Object {url: "https://codepen.io", width: 1440, path: "/index.html"} // url key reports reassigned value</code></pre>    <p>这里我们创建了一个只读的参考，我们只可以读取 (<code>config</code>)的值，但是就像之前说的不能重新对它进行分配。基本上 <code>config</code> 标识符就是一个恒量并且不能被重载，但是就像我们展示的那样，我们可以改变他的属性。</p>    <h3>如何使用 <code>(…)</code> : 散布操作符</h3>    <p>散布操作符给我们之前在ES5\遇到的冗长的上下文参数的处理添加了更多的能力。散布操作符可以接受带有这样参数的数组;比如:</p>    <pre>  <code class="language-javascript"> function spreadReporter(...values) {    let object = [...values];    return object[0].length;  }    var items = ['one', 'two', 'three'];    console.log(spreadReporter(items)); // reports the numerical value 3</code></pre>    <p>这些包含多个值的参数可以是你希望事。它可以是一个表示对象字面量的值或者数组的值的标识符。</p>    <p>你可以在一个基于事件的电子商务的环境中使用散布操作符，比如添加物品到购物车中。</p>    <pre>  <code class="language-javascript"> let dairy = [];  let store = {    add: function(category, ...items) {      category.push(...items);    }  };    store.add(dairy, 'milk', 'sour cream');  store.add(dairy, 'ice cream', 'yogurt', 'cheese');  console.log(dairy);    // outputs ["milk", "sour cream", "ice cream", "yogurt", "cheese"]</code></pre>    <p>事件也是一个很好用的例子来表明发生的类型是否是点击，触摸或者一些其他的姿势。我会把这个问题留给你们作为一个你们的挑战，所以在下面自己的发表你们的解法方法吧。</p>    <h3>总结</h3>    <p>随着事务的发展，可能会有很多种方法去解决问题。这些例子只是作为建议来进行讨论 ，并且例子展示了ES6\ 中新特性的力量。如果你有其他的上面没有提到的例子，建议。请让我们在评论区知道。快乐编码，并且享受你的新的ES6知识。更进一步，分享，讨论然后变得优秀。</p>    <p> </p>    <p>来自：http://www.zcfy.cc/article/integration-and-comparison-for-es6-1024.html</p>