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

es6使用技巧的更多相关文章

  1. 6个讨喜的 ES6 小技巧

    [编者按]本文作者为 Axel Rauschmayer,主要介绍6个 ES6 小技巧.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中,笔者将介绍6个由 ES6 新功能带来的小技巧. ...

  2. es6小技巧

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

  3. 【js】中的小技巧

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

  4. ES6 完全使用手册

    前言 这里的 "ES6" 泛指 ES5 之后的新语法 这里的 "完全" 是指本文会不断更新 这里的 "使用" 是指本文会展示很多 ES6 的 ...

  5. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  6. 每个JavaScript工程师都应懂的33个概念

    摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:s ...

  7. 每个 JavaScript 工程师都应懂的33个概念

    简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的.它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南. 本篇文章是参照 @leonardomso 创立,英文版项 ...

  8. Day45--js基本小结

    JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...

  9. js汉字转拼音首字母

    js汉字转拼音首字母 2018-04-09 阅读 1018 收藏 1 原链:segmentfault.com 分享到:   前端必备图书<JavaScript设计模式与开发实践> > ...

随机推荐

  1. Oracle 11g数据库安装和卸载教程

    Oracle11g的安装教程 同时解压缩两个zip文件,生成一个database文件夹,进入到database文件夹,点击setup 去掉安全更新的选项,直接下一步 选择创建和配置数据库,点击下一步 ...

  2. 对ios、android开发程序员的14条忠告

    ————————本文摘自千锋教育(http://www.mobiletrain.org/)对ios\android开发程序员的14条忠告————————— 1.不要害怕在工作中学习. 只要有电脑,就可 ...

  3. directdraw显示yuv420(YV12)

    height=width=widthBytes=0;  m_screen.SetWindowPos(&CWnd::wndBottom,0,0,720,576, SWP_NOMOVE | SWP ...

  4. Error Code: 1414. OUT or INOUT argument 2 for routine company.new_procedure is not a variable or NEW

    1.错误描述 16:27:36 call new_procedure(20150112,1) Error Code: 1414. OUT or INOUT argument 2 for routine ...

  5. AM335x(TQ335x)学习笔记——USB驱动移植

    对于AM335x来讲,TI维护的USB驱动已经非常完善了,本文称之为移植,实际上仅仅是配置内核选项使能USB HOST/OTG功能.废话少说,直接动手开启AM335x的USB驱动配置项. Step1. ...

  6. 用OpenStack界面轻松创建虚拟机的你,看得懂虚拟机启动的这24个参数么?

    看这篇文章之前,保证看过以下文章: 我是虚拟机内核我困惑?! Qemu,KVM,Virsh傻傻的分不清 裸用KVM创建虚拟机,体验virtualbox为你做的10件事情 大家从OpenStack页面上 ...

  7. webpack学习(一):webpack 介绍&安装&常用命令

    一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...

  8. 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇,超详细教程

    项目内容 本案例选择>> 商品类目:沙发: 数量:共100页  4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...

  9. spring整合JMS

    浏览博客时看到大神写的,直接转载过来收藏了.原文地址:http://elim.iteye.com/blog/1893038

  10. [Luogu2463][SDOI2008]Sandy的卡片

    BZOJ权限题qwq Luogu sol "两个子串长度相同且一个串的全部元素加上一个数就会变成另一个串" 其实就是差分一波以后完全相同 所以对输入的数据进行差分,同时记一下每一个 ...