【编者按】本文作者为 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 字符。比如,表情符:
字符串实现了 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 小技巧的更多相关文章
-
es6小技巧
let myKey = 'variableKey'; let obj = { key1: 'One', key2: 'Two', [myKey]: 'Three' /* 棒呆! */ }; 给变量键加 ...
-
【js】中的小技巧
本文主要介绍一些JS中用到的小技巧 1. 类型强制转换 1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为 ...
-
ES6中常用的小技巧,用了事半功倍哦
ES6中常用的小技巧,如果能在实际项目中能使用到,必定事半功倍: 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了 ...
-
12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
-
( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...
-
( 译、持续更新 ) JavaScript 上分小技巧(三)
最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...
-
( 译、持续更新 ) JavaScript 上分小技巧(二)
考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...
-
( 译、持续更新 ) JavaScript 上分小技巧(一)
感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...
-
12个非常有用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
随机推荐
-
react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
-
eclipse快捷键失效的解决办法
今天敲html代码,突然发现ctrl+D不能用了,shift+enter/shift+ctrl+enter也不能用了,上网上搜了下,原来我是在文本模式下打开的.切换为html editor打开就o了. ...
-
Redis系列-存储篇string主要操作函数小结
通过上两篇的介绍,我们的redis服务器基本跑起来.db都具有最基本的CRUD功能,我们沿着这个脉络,开始学习redis丰富的数据结构之旅,当然先从最简单且常用的string开始. 1.新增 a)se ...
-
C#中区别多态、重载、重写的概念和语法结构
C#中区别多态.重载.重写的概念和语法结构 重写是指重写基类的方法,在基类中的方法必须有修饰符virtual,而在子类的方法中必须指明override. 格式: 基类中: public virtual ...
-
转:mysql性能优化的19个要点
原文来自于:http://outofmemory.cn/mysql/mysql-performance-tips 1.为查询优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方 ...
-
优化tomcat配置(从内存、并发、缓存4个方面)优化
Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 java_OPTS 参数. JAVA_OPTS参数 ...
-
Dynamics CRM2016 在实体命名时需要注意的事项
在使用web api的过程中遇到个很无语的设置,体现在对实体名的设置上,之前看到accounts以为只是在实体名上加个s,也没往深处看,但真正进入项目实施了问题就来了,city直接变成了cities不 ...
-
react基础篇 整理(一)
备注不知道为啥不能到出图片,详细知识自己百度一下就可以了,很简单的.画这个是为了更好的梳理知识,公司有个App项目,项目可控,所以尝试一下用React-native去做一下试试.
-
redis的spring的xml配置
<!-- 集群版配置 --> <bean id="jedisCluster" class="redis.clients.jedis.JedisClust ...
-
先验算法(Apriori algorithm) - 机器学习算法
Apriori is an algorithm for frequent item set mining and association rule learning over transactiona ...