漂亮的5个es6技巧演示

pre{ font-family: Courier New!important; font-size: 12px!important; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); font-family: Courier New!important; font-size: 12px!important; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0; color: rgb(0, 0, 0);

1. 通过参数默认值强制要求传参

 ES6 指定默认参数在它们被实际使用的时候才会被执行，这个特性让我们可以强制要求传参：

  /**
    * Called if a parameter is missing and
    * the default value is evaluated.
    */

    function mandatory() {
       throw new Error("Missing parameter");
    }
    function foo(mustBeProvided = mandatory()) {
        return mustBeProvided;
    }
   

函数调用 mandatory() 只有在参数 mustBeProvided 缺失的时候才会被执行，测试结果如下：

   > foo()
       Error: Missing parameter
   > foo(123)
       123

2. 利用for-of来循环来遍历数组元素的索引

es5的做法：

var arr = ['a','b','c'];
arr.forEach(function(elem,index){
   console.log("index="+index+',elem='+elem);
})

ES6 的 for-of 循环支持 ES6 迭代（通过 iterables 和 iterators）和解构。如果你通过数组的新方法 enteries() 再结合解构，可以达到上面 forEach 同样的效果：

const arr = ["a", "b", "c"];
for( let[index,elem] of arr.entries() ){
console.log(`index=${index},elem=${elem}`);
}

arr.enteries() 通过索引-元素配对返回一个可迭代对象,没有生成其他东西，只是让这个数组变成了对象。然后通过解构数组 [index, elem] 直接得到每一对元素和索引。console.log() 的参数是 ES6 中的模板字面量特性，这个特性带给字符串解析模板变量的能力。

3. 通过变量解构交换两个变量的值

    如果你将一对变量放入一个数组，然后将数组解构赋值相同的变量（顺序不同），你就可以不依赖中间变量交换两个变量的值：

var one = 'anikin';
let two = 'jack';

[one,two] = [two,one]
console.log(`one=${one}`);  // jack
console.log(`two=${two}`);  // anikin

可以想象，JavaScript 引擎在未来将会针对这个模式进行特别优化，去掉构造数组的开销。

4.通过模板字面量（template literals）进行简单的模板解析 

    ES6 的模板字面量与文字模板相比，更接近于字符串字面量。但是，如果你将它们通过函数返回，你可以使用他们来做简单的模板渲染：

const tmpl = addrs => `
    ${addrs.map(addr => `
        ${addr.first}${addr.last}
    `).join("")}
`;

   const data = [
        { first: "", last: "Bond" },
        { first: "Lars", last: "" },
   ];

console.log(tmpl(data));

5.遍历 Unicode 表示的字符串

一些 Unicode 编码的字由两个 JavaScript 字符组成，例如，emoji 表情：

 字符串实现了 ES6 迭代，如果你通过迭代来访问字符串，你可以获得编码过的单个字（每个字用 1 或 2 个 JavaScript 字符表示）。例如：

 for (const ch of "xuD83DuDE80y") {
        console.log(ch.length);
    }
    // Output:
    // 1
    // 2
    // 1