6个讨喜的 ES6 小技巧

时间:2022-09-04 17:31:58

【编者按】本文作者为 Axel Rauschmayer,主要介绍6个 ES6 小技巧。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

在本文中,笔者将介绍6个由 ES6 新功能带来的小技巧。在每个技巧末尾,都会附上笔者的拙作“《探索 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 '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)) { ··· }

更多信息:

  • ”《探索 ES6》“中的“简单 mixins”一节

7、延伸阅读

《探索 ES6》中的下面两章完善地介绍了 ECMAScript 6:

  • ES6 中新特性概览
  • ECMAScript 6 快速入门(简单易学的新功能)

OneAPM 能帮助您轻松锁定 Node.js 应用性能瓶颈,通过强大的 Trace 记录逐层分析,直至锁定行级问题代码。以用户角度展示系统响应速度,以地域和浏览器维度统计用户使用情况。想阅读更多技术文章,请访问 OneAPM 官方博客

本文转自 OneAPM 官方博客

原文地址:http://www.2ality.com/2016/05/six-nifty-es6-tricks.html

6个讨喜的 ES6 小技巧的更多相关文章

  1. es6小技巧

    let myKey = 'variableKey'; let obj = { key1: 'One', key2: 'Two', [myKey]: 'Three' /* 棒呆! */ }; 给变量键加 ...

  2. 【js】中的小技巧

    本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为 ...

  3. ES6中常用的小技巧,用了事半功倍哦

    ES6中常用的小技巧,如果能在实际项目中能使用到,必定事半功倍: 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了 ...

  4. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  5. &lpar; 译、持续更新 &rpar; JavaScript 上分小技巧&lpar;四&rpar;

    后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...

  6. &lpar; 译、持续更新 &rpar; JavaScript 上分小技巧&lpar;三&rpar;

    最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...

  7. &lpar; 译、持续更新 &rpar; JavaScript 上分小技巧&lpar;二&rpar;

    考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...

  8. &lpar; 译、持续更新 &rpar; JavaScript 上分小技巧&lpar;一&rpar;

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

  9. 12个非常有用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

随机推荐

  1. react native 学习一&lpar;环境搭配和常见错误的解决&rpar;

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  2. eclipse快捷键失效的解决办法

    今天敲html代码,突然发现ctrl+D不能用了,shift+enter/shift+ctrl+enter也不能用了,上网上搜了下,原来我是在文本模式下打开的.切换为html editor打开就o了. ...

  3. Redis系列-存储篇string主要操作函数小结

    通过上两篇的介绍,我们的redis服务器基本跑起来.db都具有最基本的CRUD功能,我们沿着这个脉络,开始学习redis丰富的数据结构之旅,当然先从最简单且常用的string开始. 1.新增 a)se ...

  4. C&num;中区别多态、重载、重写的概念和语法结构

    C#中区别多态.重载.重写的概念和语法结构 重写是指重写基类的方法,在基类中的方法必须有修饰符virtual,而在子类的方法中必须指明override. 格式: 基类中: public virtual ...

  5. 转&colon;mysql性能优化的19个要点

    原文来自于:http://outofmemory.cn/mysql/mysql-performance-tips 1.为查询优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方 ...

  6. 优化tomcat配置&lpar;从内存、并发、缓存4个方面&rpar;优化

    Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 java_OPTS 参数. JAVA_OPTS参数 ...

  7. Dynamics CRM2016 在实体命名时需要注意的事项

    在使用web api的过程中遇到个很无语的设置,体现在对实体名的设置上,之前看到accounts以为只是在实体名上加个s,也没往深处看,但真正进入项目实施了问题就来了,city直接变成了cities不 ...

  8. react基础篇 整理(一)

    备注不知道为啥不能到出图片,详细知识自己百度一下就可以了,很简单的.画这个是为了更好的梳理知识,公司有个App项目,项目可控,所以尝试一下用React-native去做一下试试.

  9. redis的spring的xml配置

    <!-- 集群版配置 --> <bean id="jedisCluster" class="redis.clients.jedis.JedisClust ...

  10. 先验算法&lpar;Apriori algorithm&rpar; - 机器学习算法

    Apriori is an algorithm for frequent item set mining and association rule learning over transactiona ...