作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
杰西·达里奥的头像

耶稣达里奥

杰西是Netbeast的联合创始人.co. 他有两年的全栈开发经验和一年的CTO经验.

专业知识

工作经验

8

分享

ECMAScript 6 (ES6)是最新的标准规范 JavaScriptWeb的编程语言. 自 HTML5 以及 节点.js即允许我们运行的运行时 JavaScript 在服务器端或桌面端,JavaScript获得了独特的发展势头. 企业的采用率在不断提高, 将其应用于生产, 因此,它的最新功能备受期待.

我们创建了这个备忘单,作为我们日常使用的ES6功能列表. 为了同时做到全面而简洁,新的API方法被搁置一边. 对于那些需要它们的人,可以自己快速搜索或尝试探索 MDN文档 获取最新的实验性api. 然而,一些最前卫的特征,比如 异步等待 包括下一个规范草案(ES7). 这是因为我们大多数开发人员都会使用 像巴别塔一样的翻译器 来利用最新的JavaScript.

你可以用下面的命令运行节点REPL来测试上面提到的一些技巧:

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

或者直接用a babel-node 以便在您的控制台中充分利用Javascript.

下载JavaScript ES6 Cheat Sheet

点击这里下载JavaScript ES6小抄

JavaScript (ES6及以上版本)备忘单

常量

Let vs var

> const EULER = 2.7182818284
> EULER = 13
> EULER
> 2.7182818284

> var average = 5
> var average = (average + 1) / 2
> average
> 3
> 让 value = ‘hello world’
> 让 value = ‘what is new’
// -> throws TypeError: Identifier 'value' has already been declared

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

> const CONSTANTS = []
> CONSTANTS.推动(欧拉)
> CONSTANTS
> [ 2.7182818284 ]
> CONSTANTS = { ‘euler’: 2.7182818284 }
> CONSTANTS
> [ 2.7182818284 ]

注意到 时间死亡区:

> 控制台.日志(val) // -> 'undefined'
> var val = 3
> 控制台.日志(val)
 // -> 3

因为它等于:

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

> var val
> 控制台.日志(val)
> val = 3
> 控制台.日志(val)

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

用"让/const"声明的变量不会被提升:

新类型

> 控制台.日志(val)
// -> Throws ReferenceError
> 让 val = 3
> 控制台.日志(val)
// -> 3

符号,映射,弱映射和集合

箭头功能

新的作用域函数

> setTimeout(() => {
…控制台.日志(延迟)
… }, 1000)

> {
卢克,我是你的父亲。
 控制台.日志(提示)
… }
> 'Luke, I am your father'

与匿名函数等价

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

> setTimeout(function () {
…控制台.日志(延迟)
… }.bind (), 1000)

> (function () {
卢克,我是你的父亲。
…控制台.日志(提示) //“卢克,我是——
… }())
> 控制台.日志(提示)
//参考错误

对象符号的新奇之处

字符串插值,多亏了模板字面值

//计算属性
> 让 key = new Date().取得时间()
> 让 Obj = {  [key]: “value” }
> obj
> { '1459958882881': 'value' }

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

//与
气球= {
  颜色:颜色,
  尺寸:大小

}

//更好的方法符号
Obj = {
   Foo (a, b){…},
   Bar (x, y){…}
}

> const name = 'Tiger'
> const age = 13
>
控制台.日志(“我的猫叫${name}, ${age}岁.`)
> My cat is named Tiger 和 is 13 years old.

//可以保留换行符…
 Text = (' cat . '

nickelodeon”
)

默认参数

> function howAreYou (answer = ‘ok’) {      
控制台.日志(回答) // 可能 ‘ok’
}

承诺

类,继承,setter, getter

new 承诺((resolve, reject) => {
  请求.获取(url,(错误,响应)  
  body) => {
    If (body) {
        解决(JSON.解析(身体));
      } else {
        解决({});
      }
  })
}).then(() => { ... })
.catch((err) => throw err)

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

类矩形扩展形状{
  构造函数(id, x, y, w, h) {
    Super (id, x, y)
    这.宽度= w
    这.高度= h
  }
  // Getter和setter
  设置宽度(w) {这._宽度= w}
  获取width(){返回这个._width}
}

类圆扩展Shape {
  构造函数(id, x, y, radius) {
    Super (id, x, y)
    这.半径=半径
  }
  do_a(x) {
    设a = 12;
    超级.Do_a (x + a);
  }
  静态do_b () { ... }
}
圆.do_b ()

解构数组

解构的对象

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

> 1
> b
> 2

> 让 luke = {  occupation: 'jedi',
 父亲:“阿纳金”
> 让 {occupation, father} = luke
> 控制台.日志(职业,父亲)

> jedi anakin

传播算子

...像老板一样进行破坏

//将数组转换为逗号分隔
//值等
> function 日志ger (...arg游戏) {
控制台.日志(“% s参数”,
    arg游戏.长度)
 arg游戏.forEach(控制台.日志)
 //参数[0],参数[1],参数[2]
}

> const [ cat, 狗, ...鱼]= [
' schroedinger ', ' Laika ', ' Nemo ', ' Dori ']
> fish // -> [‘Nemo’, ‘Dori’]

或者做一个更好的推动

...以及ES7之后的解构

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

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

Async ES7

等待ES7

异步函数 薛定谔 () {
返回new 承诺((resolve, reject))
  => {
   const result = Math.r和om > 0.5
   setTimeout(() => {
     返回结果 ? 解决(“活着”)
     :拒绝(“死”)
   })
  })
}

尝试{
   控制台.日志(等待薛定谔())
   // -> ‘alive’
} catch (err) {
   控制台.日志(err)
   // -> ‘dead’
}

导出ES7

导入ES7

导出函数sumTwo (a, b) {
   返回a + b;
}
导出const EULER = 2.7182818284
让 stuff = {sumTwo, EULER}
导出{stuff为默认值}

从“React”中导入React
导入{EULER}./ myexports '
将*作为素材从'./ myexports '
//等同于
从'./ myexports '
// {sumTwo, EULER}

发电机

他们 返回一个实现迭代协议的对象. i.e. it has a next() method that returns { value: < some value>, done: }.

function* incR和 (max) {// Asterisk将此定义为生成器
 While (true) {
   //在yield之后暂停执行,resume

    // when next() is called
   // 和 assign to x
   让x = yield.地板(数学.R和om () * Max + 1);
   Max += x;
 }
}

> var rng = incR和(2) // Returns a generator object
> rng.next() // { value: , done: false }
> rng.Next(3) //如上所述,但介于1和5之间
> rng.next() // NaN自5 +未定义的结果
> rng.next(20) //没有人期望NaN再次出现?

> rng.不可恢复的生成器状态.'))
//将从yield抛出

就这一主题咨询作者或专家.
预约电话
杰西·达里奥的头像
耶稣达里奥

位于 西班牙塞维利亚

成员自 2015年10月29日

作者简介

杰西是Netbeast的联合创始人.co. 他有两年的全栈开发经验和一年的CTO经验.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

工作经验

8

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal开发者

加入总冠军® 社区.