• 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
  • 相关阅读:
    创建类以及引用一个类
    修改hosts文件
    微信第三方登录接口开发
    Android定位
    Leetcode 102. Binary Tree Level Order Traversal
    Leetcode 725. Split Linked List in Parts
    Leetcode 445. Add Two Numbers II
    Leetcode 328. Odd Even Linked List
    Leetcode 237. Delete Node in a Linked List
    Leetcode 234. Palindrome Linked List
  • 原文地址:https://www.cnblogs.com/pomelott/p/8127847.html
Copyright © 2020-2023  润新知