Toptal 的快速实用的 JavaScript 备忘单:ES6 及更高版本

已发表: 2022-03-11

ECMAScript 6 (ES6) 是 Web 编程语言JavaScript的最新标准规范。 自HTML5Node.js的诞生以来,允许我们在服务器或桌面上运行 JavaScript 的运行时,JavaScript 获得了独特的发展势头。 企业的采用率越来越高,将其投入生产,因此它的最新功能备受期待。

我们创建了这个备忘单作为我们每天使用的 ES6 特性的列表。 在尝试全面但简洁的同时,新的 API 方法被分开了。 对于那些需要它们的人,请自行快速搜索或尝试探索 MDN 文档以获取最新的实验性 API。 但是,包含了一些最前沿的特性,例如下一个规范草案 (ES7) 中的asyncawait 。 这是因为我们大多数开发人员无论如何都会使用像 Babel 这样的转译器来利用最新的 JavaScript。

您可以通过使用以下命令运行节点 REPL 来测试一些提到的技巧:

 node --use-strict $(node --v8-options | grep harm | awk '{print $1}' | xargs) #ES6

或者,直接使用 babel-node 在控制台中充分利用 Javascript。

相关: Toptal 开发人员的实用 CSS 备忘单

下载 JavaScript ES6 备忘单

单击此处下载 JavaScript ES6 备忘单

JavaScript(ES6 及更高版本)备忘单

常数

让 vs var

> 常量欧拉 = 2.7182818284
> 欧拉 = 13
> 欧拉
> 2.7182818284

> var 平均值 = 5
> var 平均值 = (平均值 + 1) / 2
> 平均
> 3
> 让值 = '你好世界'
> 让值 = '什么是新的'
// -> 抛出 TypeError: Identifier 'value' has already been declared

警告! 如果是数组或对象,则引用保持不变 如果常量是对对象的引用,您仍然可以修改内容,但永远不能更改变量。

> 常量常量 = []
> CONSTANTS.push(欧拉)
> 常数
> [ 2.7182818284 ]
> 常数 = { '欧拉': 2.7182818284 }
> 常数
> [ 2.7182818284 ]

注意临时死区

> console.log(val) // -> '未定义'
> 变量值 = 3
> console.log(val) // -> 3

因为它相当于:

二进制、八进制和十六进制表示法

> 变量值
> 控制台日志(验证)
> 值 = 3
> 控制台日志(验证)

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

用“let/const”声明的变量不会被提升:

新类型

> 控制台日志(验证)
// -> 抛出引用错误
> 让 val = 3
> console.log(val) // -> 3

符号、地图、弱地图和集合

箭头功能

新的作用域函数

> setTimeout(() => {
… console.log('延迟')
… }, 1000)

> {
... let cue = '卢克,我是你的父亲'
控制台日志(提示)
… }
> “卢克,我是你的父亲”

等价于匿名函数

等效于立即调用的函数表达式 (IIFE)

> 设置超时(函数(){
… console.log('延迟')
… }.bind(this), 1000)

> (函数(){
... var cue = 'Luke,我是你父亲' ... console.log(cue) //'Luke,我是 -
… }())
> console.log(cue) // 引用错误

对象符号新奇

字符串插值,感谢模板文字

// 计算属性
> 让键 = new Date().getTime()
> 让 obj = { [键]: “值” }
> 对象
> { '1459958882881': '价值' }

// 对象字面量
气球= {颜色,大小};

// 与...一样
气球 = {
颜色:颜色,
尺寸:尺寸

}

// 更好的方法符号
对象 = {
foo (a, b) { … },
条形 (x, y) { … }
}

> 常量名称 = '老虎'
> 常量年龄 = 13
> console.log (`我的猫名叫 ${name} 并且是 ${age} 岁。`)
> 我的猫叫老虎,今年 13 岁。

// 我们可以保留换行符...
文本=(`猫

镍币`
)

</p>

默认参数

> 功能 howAreYou (answer = 'ok') {
console.log(answer) //可能是'ok'
}

承诺

类、继承、Setter、Getter

新的承诺((解决,拒绝)=> {
request.get(url, (错误, 响应,
身体)=> {
如果(身体){
解析(JSON.parse(body));
} 别的 {
解决({});
}
})
}).then(() => { ... })
.catch((err) => 抛出错误)

// 并行化任务
承诺.所有([
承诺1,承诺2,承诺3
]).then(() => {
//所有任务完成
})

类矩形扩展形状{
构造函数 (id, x, y, w, h) {
超级(id,x,y)
this.width = w
this.height = h
}
// 获取器和设置器
设置宽度 (w) { this._width = w }
获取宽度 () { 返回 this._width }
}

类圆形扩展形状{
构造函数(id,x,y,半径){
超级(id,x,y)
this.radius = 半径
}
do_a (x) {
让 a = 12;
super.do_a(x + a);
}
静态 do_b() { ... }
}
Circle.do_b()

解构数组

解构对象

> 让 [a, b, c, d] = [1, 2, 3, 4];
> 控制台.log(a);
> 1
> 乙
> 2

> 让卢克 = { 职业:'绝地',
父亲:“阿纳金”}
> 让 {职业,父亲} = 卢克
> console.log(职业,父亲)
> 绝地阿纳金

扩展运算符

...像老板一样解构

// 将数组转换为逗号分隔
// 值和更多
> 函数记录器 (...args) {
console.log('%s 个参数',
参数长度)
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

> const [ 猫,狗,...鱼 ] = [
“薛定谔”、“莱卡”、“尼莫”、“多莉”]
> 鱼// -> ['Nemo', 'Dori']

或者做一个更好的推动

...以及未来 ES7 中的解构

> 让 arr = [1, 2, 3]
> [...arr, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

{a, b, ...休息} = {a:1, b:2, c:3, d:4}

异步 ES7

等待 ES7

异步函数薛定谔(){
返回新的承诺((解决,拒绝)
=> {
常量结果 = Math.random > 0.5
设置超时(()=> {
返回结果? 解决('活着')
:拒绝('死')
})
})
}

尝试 {
console.log(等待薛定谔())
// -> '活着'
} 捕捉(错误){
控制台日志(错误)
// -> '死'
}

导出 ES7

导入 ES7

导出函数 sumTwo (a, b) {
返回 a + b;
}
出口常数欧拉 = 2.7182818284
让东西= { sumTwo,EULER }
导出 { 东西默认 }

从“反应”导入反应
从 './myexports' 导入 { EULER }
从 './myexports' 导入 * 作为东西
// 相当于
从“./myexports”导入东西
// { sumTwo, 欧拉 }

发电机

它们返回一个实现迭代协议的对象。 即它有一个 next() 方法返回 { value: < some value>, done: <true or false> }

function* incRand (max) { // Asterisk 将其定义为生成器
而(真){
// yield 后暂停执行,resume
// 当 next(<something>) 被调用时
// 并将 <something> 分配给 x
让 x = 产生 Math.floor(Math.random() * max + 1);
最大值 += x;
}
}

> var rng = incRand(2) // 返回一个生成器对象
> rng.next() // { value: <between 1 and 2>, done: false }
> rng.next(3) // 同上,但在 1 到 5 之间
> rng.next() // NaN,因为 5 + undefined 结果为 NaN
> rng.next(20) // 没人期待 NaN 吗?
> rng.throw(new Error('不可恢复的生成器状态。'))
// 将从产量中抛出

相关:对速度的需求:顶级 JavaScript 编码挑战回顾