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 字符。比如,表情符:

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

for (const ch of ‘x\uD83D\uDE80y‘) {
    console.log(ch.length);
}    // Output:    // 1    // 2    // 1

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

[...‘x\uD83D\uDE80y‘].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

原文地址:https://www.cnblogs.com/pomelott/p/8127847.html

时间: 2024-11-04 12:28:50

es6使用技巧的相关文章

ES6小技巧

1.强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了一个required()函数作为参数a和b的默认值.这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误. const required = () => {throw new Error('Missing parameter')}; const add = (a = required(), b = required()) =

【js】中的小技巧

本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN '32' * 1            // 32 'ds' * 1            // NaN null * 1            // 0 undefined * 1    // NaN 1  * {

高阶组件&amp;&amp;高阶函数(一)

antd里面的form表单方面,遇到一个高阶函数,以及高阶组件,于是看了一下这方面内容,前辈们的文章写得也非常详细,这里就稍微kobe一下 高阶函数与高阶组件 高阶函数: 高阶函数,是一种特别的函数,接受的参数为函数,返回值也是函数 成立条件,二者兼一即可 1).一类特别的函数 a).接受函数类型的参数 b).函数返回值是函数 常见的高阶函数: 2).常见 a).定时器:setTimeout()/setInterval() b).Promise:Promise(()=>{}) then(valu

ES6的几个实用技巧,你了解吗?

本文给大家分享了es6的几个实用技巧,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧 Hack #1 交换元素 利用 数组解构来实现值的互换 let a = 'world', b = 'hello' [a, b] = [b, a] console.log(a) // -> hello console.log(b) // -> world Hack #2 调试 我们经常使用 console.log()来进行调试,试试 console.table()也无妨. const a = 5, b =

六个漂亮的 ES6 技巧

通过参数默认值强制要求传参 ES6 指定默认参数在它们被实际使用的时候才会被执行,这个特性让我们可以强制要求传参: /** * Called if a parameter is missing and * the default value is evaluated. */ function mandatory() { throw new Error("Missing parameter"); } function foo(mustBeProvided = mandatory()) {

收藏 19 个 ES6常用的简写技巧

代码精炼是每个有追求的程序所向往的,本文总结了19个JavaScript的简写技术,其中包括三元操作符.短路求值简写方式.声明变量简写方法等等,还有些自己的理解加上去:希望对你有帮助. 三元操作符 当想写if...else语句时,使用元操作符来代替 const x = 20; let answer; if(x > 10){ answer = 'is greater'; }else{ answer = 'is lesser'; } 简写: const answer = x > 10?'is gr

es6技巧写法

为class绑定多个值 普通写法 :class="{a: true, b: true}" 其他 :class="['btn', 'btn2', {a: true, b: false}]" 一个值判断a或者判断b 普通写法 if(flg === a || flg === b) 其他 ['a','b'].indexOf(flg) > -1 引用一个组件 普通写法 import a from './a.vue' componets: { a } node写法 com

es6常用数组操作及技巧汇总

常用方法 1. array.concat(array1, array2,...arrayN); 合并多个数组,返回合并后的新数组,原数组没有变化. const array = [1,2].concat(['a', 'b'], ['name']); // [1, 2, "a", "b", "name"] 2. array.every(callback[, thisArg]); 检测数组中的每一个元素是否都通过了callback测试,全部通过返回tr

WebStorm常用功能的使用技巧分享

WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大的 JavaScript 开发工具. 代码编辑 代码跳转: Ctrl + 左键 或者 Ctrl + B,可以跳转到函数或者变量的声明位置 调用位置: Alt + F7,查找调用者 自动补全: 最好是修改一下响应时间,Settings->Editors->General->Code Compl