zoukankan      html  css  js  c++  java
  • es6使用技巧

    ##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

    更多信息:

    • ”《探索 ES6》“中的”必需参数“一节

    ##2、通过 for-of 循环迭代数组索引与元素 forEach() 方法允许你迭代数组中的元素。如果你想的话,还可以得到每个元素的索引:

    var arr = ['a', 'b', 'c'];
    arr.forEach(function (elem, index) {
        console.log('index = '+index+', elem = '+elem);
    });    // Output:    // index = 0, elem = a    // index = 1, elem = b    // index = 2, elem = c

    ES6 的 for-of 循环是支持 ES6 迭代(通过可迭代量与迭代器)与重构(destructuring)的循环。如果将重构与新的数组方法 entries() 相结合,可以得到:

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

    arr.entries() 会为索引元素对(index-element pair)返回一个可迭代量。而重构样式 [index, elem] 让我们可以直接访问对中的两个组成成分。console.log() 的参数是所谓的template literal(模板常量),后者会给 JavaScript 带去字符串插值。

    ###更多信息

    • ”《探索 ES6》“中的”重构“一章
    • ”《探索 ES6》“中的”可迭代量与迭代器“一章
    • ”《探索 ES6》“中的”带有重构样式的迭代“一章
    • ”《探索 ES6》“中的”模板常量“一章

    ##3、迭代统一码(Unicode)代码点 有些统一码代码点(大致上多为字符)包含两个 JavaScript 字符。比如,表情符:

    6个讨喜的 ES6 小技巧

    字符串实现了 ES6 迭代。如果迭代字符串,会得到编码的代码点(一或两个 JavaScript 字符)。举例如下:

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

    这样,你就可以计算一个字符串中的代码点数量:

    [...'xuD83DuDE80y'].length    3

    散布操作符 (…) 会将其操作数中的项目插入到一个数组中。

    ###更多信息

    • ”《探索 ES6》“中的”ES6 中的统一码“一章
    • ”《探索 ES6》“中的”散布操作符(…)“一节

    ##4、通过重构交换变量的值 如果你把两个变量放到一个数组中,之后重构该数组为相同的变量,你可以交换变量的值,而不需要中间变量:

    [a, b] = [b, a];

    我们有理由相信,JavaScript 引擎将来会优化这一模式从而避免创建数组。

    ###更多信息:

    • ”《探索 ES6》“中的”重构“一章

    ##5、通过模板常量实现简单模板 ES6 中的模板常量更像是字符串常量,而不是传统的文本模板。但是,如果将它们作为函数返回值,就可以把它们用于模板。

    const tmpl = addrs => `        <table>
        ${addrs.map(addr => `            <tr><td>${addr.first}</td></tr>            <tr><td>${addr.last}</td></tr>
        `).join('')}        </table>
    `;

    函数 tmpl (一个箭头函数)会将数组的 addrs 映射到一个字符串。让我们对数组的 data 应用 tmpl() 函数:

    const data = [
        { first: '<Jane>', last: 'Bond' },
        { first: 'Lars', last: '<Croft>' },
    ];
    console.log(tmpl(data));
    // Output:
    // <table>
    //
    //     <tr><td><Jane></td></tr>
    //     <tr><td>Bond</td></tr>
    //
    //     <tr><td>Lars</td></tr>
    //     <tr><td><Croft></td></tr>
    //
    // </table>

    ###更多信息:

    • 文章:“《处理 ES6 模板常量中空格》
    • ”《探索 ES6》“中的”通过未加标签的模板常量实现文本模板“一节
    • ”《探索 ES6》“中的“箭头函数”一章

    ##6、通过子类工厂实现简单混合(mixins) 如果一个 ES6 类继承了另一个类,该类要通过一个任意的表达式动态指定(而不是通过某个标识符静态指定)。

    // Function id() simply returns its parameter
    const id = x => x;    class Foo extends id(Object) {}

    这允许你将一个 mixin 实现为如下函数:该函数会把某个类 C 映射至一个新类(带有 mixin 方法),且该新类的父类为 C。例如,下面的 Storage 与 Validation 方法均为 mixins:

    const Storage = Sup => class extends Sup {
        save(database) { ··· }
    };    const Validation = Sup => class extends Sup {
        validate(schema) { ··· }
    };

    你可以将他们用于构建如下的 Employee 类:

    class Person { ··· }    class Employee extends Storage(Validation(Person)) { ··· }


    原文地址:http://www.2ality.com/2016/05/six-nifty-es6-tricks.html
  • 相关阅读:
    除草第一季 1 简单日常心得
    [搬家from qzone] 读书笔记 人间情味.半成品
    [搬家from qzone] 读书笔记 最好的告别
    [搬家from qzone] 读书笔记 爱是一种选择
    [搬家from qzone] 读书笔记 童年的王国
    [搬家from qzone] 我不是一个很好的学长,所以毕业前,给学习学妹们写写自己犯的错误吧
    博客重新开张 第一篇灌水
    我眼中的vim
    linux启动kdump失败
    centos7 minimal安装之后要做的事情
  • 原文地址:https://www.cnblogs.com/pomelott/p/8127847.html
Copyright © 2011-2022 走看看