【翻译】概述ES6的350个要点

我的《深度学习ES6》系列由24篇文章组成,涵盖了ES6中大多数语法更改和功能。本文旨在总结所有这些内容,为您提供大多数ES6的实用见解,以便您快速入门。我还链接了《深度学习》中ES6中的文章,以便您可以轻松地深入研究您感兴趣的任何主题。

我听说你喜欢要点,所以写了一篇文章,其中包含数百个这些坏男孩。首先,这是一个包含所有主题的目录。很明显,它有要点。请注意,如果您想让这些概念渗透到您的大脑中,那么您将有更多的时间来学习该主题,方法是进行深入的系列讨论,然后自己实验ES6代码。

开演时间到了!

目录

  • 介绍
  • Tooling
  • 分配解构
  • 传播算子和剩余参数
  • 箭头函数
  • 模板文字
  • 对象文字
  • let 和 const
  • Symbols
  • Iterators
  • Generators
  • Promises
  • Maps
  • WeakMaps
  • Sets
  • WeakSets
  • Proxies
  • Reflection
  • Number
  • Math
  • Array
  • Object
  • Strings and Unicode
  • Modules

介绍

ES6(也称为Harmony,es-nextES2015)是该语言的最新最终定稿规范
该ES6规范是在完成2015年6月,(因此ES2015)
规范的未来版本将遵循该ES[YYYY]模式,例如ES2016 for ES7

  • 每年发布时间表,功能不会影响你接下来的练习。
  • 由于ES6早于该决定,因此我们大多数人仍将其称为ES6。
  • 从ES2016(ES7)开始,我们应该开始使用该ES[YYYY]模式来引用较新的版本
  • 命名方案的首要原因是迫使浏览器供应商迅速实施最新功能

Tooling

要使ES6今天开始工作,您需要一个JavaScript到JavaScript的 编译器
转运者在这里停留

  • 它们允许您将最新版本的代码编译为该语言的旧版本。
  • 随着浏览器支持的改善,我们将把ES2016和ES2017转换为ES6及更高版本
  • 我们需要更好的源映射功能
  • 它们是当今在生产中运行ES6源代码的最可靠方法(尽管浏览器获得了ES5)

Babel (翻译员)具有杀手级功能:可读的输出
用于babel将ES6转换为ES5进行静态构建
使用babelify纳入babel到你的 Gulp, Grunt,或npm run构建过程
使用Node.js v4.x.x或更高版本,因为它们具有不错的ES6支持,这要归功于v8
使用babel-node与任何版本node,因为它transpiles模块到ES5
Babel拥有一个蓬勃发展的生态系统,已经支持某些ES2016,并具有插件支持
阅读ES6工具简史

分配解构

var {foo} = pony 相当于 var foo = pony.foo
var {foo: baz} = pony 相当于 var baz = pony.foo
你可以提供默认值,var {foo='bar'} = baz,这样的话会产生的结果是:foo: 'bar'(如果baz.foo是undefined)
你可以根据需要提取很多的属性(带别名或不带别名)

  • var {foo, bar: baz} = {foo: 0, bar: 1},那么结果就是 foo: 0,baz: 1

你可以更深入。var {foo: {bar}} = { foo: { bar: 'baz' } },那么结果就是bar: 'baz'
你也可以使用别名。var {foo: {bar: deep}} = { foo: { bar: 'baz' } },那么结果就是deep: 'baz'
如果属性找不到,会显示undefined,例如:var {foo} = {}
找不到的深层嵌套属性会产生错误,例如: var {foo: {bar}} = {}
它也适用于数组,[a, b] = [0, 1],那么结果就是a: 0和b: 1
在数组中,你可以不填入值,[a, , b] = [0, 1, 2],那么结果就是a: 0和b: 2
你可以不使用“ aux”变量进行交换,[a, b] = [b, a]
您还可以在函数参数中使用解构

  • 分配默认值,例如 function foo (bar=2) {}
  • 这些默认值也可以是对象 function foo (bar={ a: 1, b: 2 }) {}
  • bar完全破坏,就像function foo ({ a=1, b=2 }) {}
  • 如果未提供任何内容,则默认为空对象,例如 function foo ({ a=1, b=2 } = {}) {}

深入阅读ES6 JavaScript解构

传播算子和剩余参数

其余参数更好 arguments

  • 你可以在方法签名中声明它,例如 function foo (...everything) {}
  • everything 是一个数组,所有参数都传递给 foo
  • 你可以在之前命名一些参数...everything,例如function foo (bar, ...rest) {}
  • 命名参数不包括在内 ...rest
  • ...rest 必须是列表中的最后一个参数

扩展运算符比魔术更好,也用...语法表示

  • 避免.apply在调用方法时,fn(...[1, 2, 3])等效于fn(1, 2, 3)
  • 串联比较容易 [1, 2, ...[3, 4, 5], 6, 7]
  • 将类似数组或可迭代对象的类型转换为数组,例如 [...document.querySelectorAll('img')]
  • 在解构时也很有用,[a, , ...rest] = [1, 2, 3, 4, 5],那么结果就是:a: 1和rest: [3, 4, 5]
  • 使new+ .apply毫不费力,new Date(...[2015, 31, 8])

深入阅读ES6 Spread and Butter

箭头函数

  • 声明函数的简洁方式 param => returnValue

  • 在做类似功能的事情时很有用 [1, 2].map(x => x * 2)

  • 有几种口味可供选择,可能会让您习惯一些

    • p1 => expr 可以使用单个参数
    • p1 => exprreturn对于提供的expr表达式具有隐式语句
    • 要隐式返回对象,请将其包装在括号中,() => ({ foo: 'bar' })否则会出现错误
    • 当你有零个,两个或更多参数时,需要括号,() => expr或者(p1, p2) => expr
    • 右侧的括号代表一个代码块,可以包含多个语句, () => {}
    • 使用代码块时,没有隐式return,你必须提供它–() => { return 'foo' }
  • 你不能静态地命名箭头函数,但是现在运行时可以更好地为大多数方法推断名称

  • 箭头函数绑定到其词法范围

    • this this与父范围内的上下文相同
    • this不能使用.call,.apply或类似的“反射”型方法进行修改
  • 深入阅读ES6箭头功能

模板字符串

  • 除了单引号和双引号之外,你还可以使用(反撇号)声明字符串。
  • 用反撇号括起来的字符串是模板字符串
  • 模板字符串可以是多行
  • 模板字符串允许插值,例如变量是ponyfoo.com is ${rating},注意:rating是变量
  • 你可以在插值中使用任何有效的JavaScript表达式,例如${2 * 3}${foo()}
  • 你可以使用加标签的模板来更改表达式的内插方式
    - 添加一个fn前缀 fnfoo, ${bar} and ${baz}
    - fn 被调用一次 template, ...expressions
    - template['foo, ', ' and ', '']expressions[bar, baz]
    - fn的结果是成为模板字符串的值
    - 可能的用例包括表达式的输入清理,参数解析等。
  • 模板字符串几乎严格比单引号或双引号引起来的字符串更好
  • 深入阅读ES6模板字符串

对象文字

代替{ foo: foo },您可以做{ foo }–称为属性值的简写
计算的属性名称,其中{ [prefix + 'Foo']: 'bar' }prefix: 'moz',也就是{ mozFoo: 'bar' }
您不能将计算所得的属性名称和属性值速记组合在一起,{ [foo] }是无效的
可以使用其他更简洁的语法声明对象文字中的方法定义, { foo () {} }
你可以参考Object节
深入阅读ES6对象文字功能

不是“传统”类,而是在原型继承之上的语法糖
类似于声明对象的语法, class Foo {}
实例方法- new Foo().bar-使用的是短申报对象文本语法,class Foo { bar () {} }
静态方法- Foo.isPonyFoo()-需要一个static关键词前缀,class Foo { static isPonyFoo () {} }
构造方法 class Foo { constructor () { /* initialize instance */ } }
使用简单语法的原型继承 class PonyFoo extends Foo {}
深入阅读ES6类

let 和 const

letconst是var声明变量时的替代方法
let 是块作用域的,而不是词法范围的 function
let被提升到块的顶部,而var声明被提升到函数的顶部
“临时死区” – TDZ的简称
let foo声明的块的开头开始
let foo在用户代码中放置该语句的结尾(此处无关紧要)
尝试访问fooTDZ 或在TDZ中进行分配(在let foo到达该语句之前)会导致错误
在声明变量之前对其进行操作时,有助于防止神秘的bug
const 也受TDZ语义的块作用域,提升和约束
const 变量必须使用初始化程序声明, const foo = 'bar'
const初始化后分配给会失败(除非—在严格模式下)
const 变量不会使分配的值不变
const foo = { bar: 'baz' }意味着foo将始终引用右侧对象
const foo = { bar: 'baz' }; foo.bar = 'boo' 不会抛出异常
声明相同名称的变量将抛出异常
旨在修复在你重新分配变量并丢失其他地方传递的引用的错误
在ES6中,函数是块作用域的
防止通过吊装泄漏窥探范围内的机密, { let _foo = 'secret', bar = () => _foo; }
在大多数情况下都不会破坏用户代码,通常情况下仍然是你想要的
阅读ES6 Let,Const和“临时死区”(TDZ)的深度

Symbols

ES6中的新原始类型
你可以使用创建自己的符号 var symbol = Symbol()
您可以添加说明以进行调试,例如 Symbol('ponyfoo')
Symbols是不变的且唯一的。Symbol(),Symbol(),Symbol('foo')和Symbol('foo')代表的都是不一样的
符号的类型为symbol,因此:typeof Symbol() === 'symbol'
你还可以使用创建全局符号 Symbol.for(key)

  • 如果提供的符号key已经存在,您可以将其找回来
  • 否则,将使用key描述作为新符号
  • Symbol.keyFor(symbol)是反函数,取a symbol并返回其key
  • 全局符号尽可能具有全局性,即跨域。单个注册表用于在运行时中查找这些符号
    - window 语境
    - eval 语境
    - <iframe> 上下文 Symbol.for('foo') === iframe.contentWindow.Symbol.for('foo')

还有“知名”符号

  • 不在全局注册表中,可通过访问Symbol[name],例如:Symbol.iterator
  • 跨域也就是: Symbol.iterator === iframe.contentWindow.Symbol.iterator
  • 通过说明书中使用来定义协议中,如可迭代协议在Symbol.iterator
  • 用口语来说,他们实际上并不知名

虽然很难去遍历symbol 属性,但并非不可能,而且绝对不是私有的

  • 所有ES6之前的“反射”方法都隐藏符号
  • 可通过以下方式访问符号 Object.getOwnPropertySymbols
  • 你不会偶然发现它们,但如果积极寻找,就会找到它们

深入阅读ES6符号

Iterators

迭代器和可迭代协议定义了如何迭代任何对象,而不仅仅是数组和类似数组的对象
一个众所周知的Symbol用于将迭代器分配给任何对象
var foo = { [Symbol.iterator]: iterable}, 或者 foo[Symbol.iterator] = iterable
iterable是返回的方法iterator,其具有对象next方法
该next方法返回具有两个属性的对象,valuedone

  • 该value属性指示要迭代的序列中的当前值
  • 该done属性指示是否还有其他项目要迭代
    具有[Symbol.iterator]值的对象是可迭代的,因为它们订阅了可迭代协议
    在ES6中Array,某些内置插件(例如Array,String或arguments)以及NodeList在浏览器默认是可迭代的
    可迭代对象可以使用进行循环for..of,例如for (let el of document.querySelectorAll('a'))
    可以使用散布运算符来合成可迭代对象,例如 [...document.querySelectorAll('a')]
    你还可以Array.from(document.querySelectorAll('a'))用于将可迭代序列合成为数组
    迭代器是惰性的,并且产生无限序列的迭代器仍可以导致有效程序
    要小心,不要试图用合成的无限序列,...Array.from作为会导致无限循环
    深入了解ES6迭代器

Generators

生成器函数是一种特殊的迭代器,可以使用以下function* generator () {}语法进行声明:
生成器函数用于yield发出元素序列
生成器函数还可以yield*用于委派给另一个生成器函数–或任何可迭代对象
生成器函数返回遵循迭代器和迭代器协议的生成器对象
给定g = generator(),g坚持使用可迭代协议,因为这g[Symbol.iterator]是一种方法
给定g = generator(),g坚持使用迭代器协议,因为g.next是一种方法
生成器对象的迭代器g是生成器本身:g[Symbol.iterator]() === g
使用提取值Array.from(g),[...g],for (let item of g),或只调用g.next()
在四种不同情况下,生成器函数的执行被挂起,记住最后一个位置
yield表达序列中返回的下一个值
一条return语句返回序列中的最后一个值
一条throw语句完全停止了生成器中的执行
到达发电机功能信号的末端 { done: true }
一旦g序列已经结束,g.next()只是返回{ done: true },并没有影响
使异步流感到同步很容易

  • 采取用户提供的发电机功能
  • 发生异步操作时,用户代码被挂起
  • 调用g.next(),在用户代码中暂停执行

深入了解ES6生成器

Promises

遵循Promises/A+规范,在ES6标准化之前在野外广泛实施(例如bluebird
承诺就像一棵树。使用p.then(handler)和添加分支p.catch(handler)
与创造新的p承诺new Promise((resolve, reject) => { /* resolver */ })
resolve(value)回调将履行与所提供的承诺value
reject(reason)回调将拒绝p与reason错误
您可以异步调用这些方法,从而阻塞承诺树的更深层分支
每次呼叫p.thenp.catch创建另一个诺言,该诺言在p结算时被阻止
在承诺开始时挂起状态,并定居时,他们要么履行或拒绝
承诺只能解决一次,然后解决。已兑现的承诺解除了更深层次的分支
您可以根据需要在任意数量的分支上兑现尽可能多的承诺
每个分支将执行一个.then或多个.catch处理程序,而不会两者都执行
一个.then回调,可以返回一个值变换先前分支的结果
一个.then回调可以返回它的另一个承诺阻止
p.catch(fn).catch(fn) 不会做您想做的事–除非您要在错误处理程序中捕获错误
Promise.resolve(value) 创建提供的承诺 value
Promise.reject(reason) 创建一个被提供的拒绝的承诺 reason
Promise.all(...promises)创建一个承诺,在全部...promises实现或拒绝其中一项时解决
Promise.race(...promises)创建一个承诺,只要其中的1个...promises被解决
使用Promisees(承诺可视化场所)来更好地了解承诺
深入阅读ES6承诺

Maps

替换了使用普通JavaScript对象创建哈希图的常见模式
避免了用户提供的密钥的安全性问题
允许键为任意值,您甚至可以将DOM元素或函数用作key条目的
Map遵守迭代协议
创建一个map使用new Map()
初始化地图与iterable[[key1, value1], [key2, value2]]new Map(iterable)
使用map.set(key, value)添加条目
使用map.get(key)来获得入门
检查key使用map.has(key)
删除条目 map.delete(key)
map使用for (let [key, value] of map),传播算子Array.from等进行迭代
深入阅读ES6Maps

WeakMaps

与相似Map,但不完全相同
WeakMap没有迭代,这样你就不会得到枚举的方法一样.forEach,.clear和别人对你的了Map
WeakMap键必须是引用类型。您不能将符号,数字或字符串之类的值类型用作键
WeakMapkey唯一引用引用变量的条目将受到垃圾回收
最后一点意味着WeakMap在保留对象的元数据的同时,这些对象仍在使用中
您可以避免内存泄漏,而无需进行手动引用计数– WeakMap就像IDisposable.NET中一样
深入阅读ES6 WeakMaps

Sets

与相似Map,但不完全相同
Set 没有键,只有值
set.set(value)不看的权利,所以我们必须set.add(value)代替
集不能有重复的值,因为值也用作键
深入阅读ES6集

WeakSets

WeakSet是Set和之间的杂种WeakMap
A WeakSet是无法迭代且没有枚举方法的集合
WeakSet 值必须是引用类型
WeakSet 对于指示参考是否正在积极使用的元数据表可能很有用
深入阅读ES6弱集

Proxies

使用创建代理new Proxy(target, handler),其中target,任何对象handler都是配置
a的默认行为proxy充当基础target对象的传递
处理程序确定如何在target常规对象属性访问语义之上访问基础对象
您忽略了对方法的引用,proxy并严格控制如何target与之交互
处理程序也称为陷阱,这些术语可互换使用
您可以使用以下方式创建可撤销的代理Proxy.revocable(target, handler)
该方法返回具有proxyrevoke属性的对象
您可以为了方便而破坏 var {proxy, revoke} = Proxy.revocable(target, handler)
您可以将proxy所有配置与new Proxy(target, handler)
之后revoke()被调用时,proxy将抛出的任何操作,使其在方便的时候你不能相信消费者
get–陷阱proxy.prop和proxy['prop']
set–陷阱proxy.prop = value和proxy['prop'] = value
has–陷阱in操作员
deleteProperty–陷阱delete操作员
defineProperty–陷阱Object.defineProperty和声明性替代
enumerate–陷阱for..in循环
ownKeys–陷阱Object.keys和相关方法
apply–陷阱函数调用
construct–限制new操作员的使用
getPrototypeOf –捕获内部呼叫 [[GetPrototypeOf]]
setPrototypeOf –陷阱呼叫 Object.setPrototypeOf
isExtensible –陷阱呼叫 Object.isExtensible
preventExtensions –陷阱呼叫 Object.preventExtensions
getOwnPropertyDescriptor –陷阱呼叫 Object.getOwnPropertyDescriptor
深入阅读ES6代理
深入阅读ES6代理陷阱
了解更多深入了解ES6代理陷阱

Reflection

Reflection是MathES6中新的静态内置(认为)
Reflection方法具有合理的内部,例如,Reflect.defineProperty返回布尔值而不是抛出
Reflection每个代理陷阱处理程序都有一个方法,它们代表每个陷阱的默认行为
展望未来,新的反射方法Object.keys将与Reflection命名空间相同
阅读《ES6深度思考》

Number

0b对二进制文件使用前缀,0o对八进制整数文字使用前缀
Number.isNaN而Number.isFinite像他们的全球同名,但他们不把输入到Number
Number.parseInt 和 Number.parseFloat与他们的全球同名完全相同
Number.isInteger检查输入是否为Number不带小数部分的值
Number.EPSILON帮助找出两个数字之间可忽略的差异–例如0.1 + 0.2和0.3
Number.MAX_SAFE_INTEGER 是可以安全地用JavaScript精确表示的最大整数
Number.MIN_SAFE_INTEGER 是可以安全且精确地用JavaScript表示的最小整数
Number.isSafeInteger 检查整数是否在这些范围内,可以安全且准确地表示
阅读ES6 Number深度改进

Math

Math.sign –数字的符号功能
Math.trunc –数字的整数部分
Math.cbrt –价值的立方根,或 ∛‾value
Math.expm1- e在value零下1,或evalue - 1
Math.log1p– value + 1或的自然对数ln(value + 1)
Math.log10– value或的以10为底的对数log10(value)
Math.log2– value或的以2为底的对数log2(value)
Math.sinh –双曲正弦数
Math.cosh –双曲余弦数
Math.tanh –数字的双曲正切
Math.asinh –数字的双曲反正弦
Math.acosh –双曲余弦
Math.atanh –数字的双曲反正切
Math.hypot –平方和的平方根
Math.clz32 –数字的32位表示形式中的前导零位
Math.imul– 类似C的 32位乘法
Math.fround –数字的最接近的单精度浮点表示
深入阅读ES6 Math添加

Array

Array.from– Array从类似数组arguments或可迭代对象的对象创建实例
Array.of–类似new Array(…items),但没有特殊情况
Array.prototype.copyWithin –将一系列数组元素复制到数组中的其他位置
Array.prototype.fill –用提供的值填充现有数组的所有元素
Array.prototype.find –返回满足回调的第一项
Array.prototype.findIndex –返回满足回调的第一项的索引
Array.prototype.keys –返回一个迭代器,该迭代器产生一个序列,该序列包含数组的键
Array.prototype.values –返回一个迭代器,该迭代器产生一个保存数组值的序列
Array.prototype.entries –返回一个迭代器,该迭代器产生一个包含数组的键值对的序列
Array.prototype[Symbol.iterator]–与Array.prototype.values方法完全相同
深入阅读ES6 Array扩展

Object

Object.assign –对来自的属性进行递归的浅覆盖 target, …objects
Object.is–像以===编程方式使用运算符一样,只不过是true用于NaNvs NaN和false用于+0vs-0
Object.getOwnPropertySymbols –返回在对象上找到的所有自己的属性符号
Object.setPrototypeOf–更改原型。相当于Object.prototype.__proto__二传手
另请参见“ 对象文字”部分
阅读ES6 Object深度更改

Strings and Unicode

字符串操作
String.prototype.startsWith –字符串是否以 value
String.prototype.endsWith –字符串是否结尾 value
String.prototype.includes–字符串是否包含value任何地方
String.prototype.repeat–返回字符串重复amount次数
String.prototype[Symbol.iterator]–使您可以遍历一系列Unicode代码点(而非字符)
统一码
String.prototype.codePointAt –字符串中给定位置的代码点的以10为基的数字表示
String.fromCodePoint–给定…codepoints,返回由其unicode表示形式组成的字符串
String.prototype.normalize –返回字符串的unicode表示形式的规范化版本
深入阅读ES6字符串和Unicode添加

Modules

ES6模块系统中默认情况下严格模式已打开
ES6模块是exportAPI的文件
export default value 导出默认绑定
export var foo = 'bar' 导出命名绑定
命名导出是可以在导出它们的模块中随时更改的绑定
export { foo, bar }出口已命名出口的清单
export { foo as ponyfoo }别名出口为引用ponyfoo,而不是
export { foo as default } 将命名的出口标记为默认出口
作为最佳实践,export default api在所有模块的末尾,其中api是一个对象,避免混乱,
模块加载是特定于实现的,允许与CommonJS互操作
import 'foo'foo模块加载到当前模块中
import foo from 'ponyfoo'将默认导出分配给ponyfoo本地foo变量
import {foo, bar} from 'baz'命名出口进口foo和bar从baz模块
import {foo as bar} from 'baz'导入名为export,foo但别名为bar变量的导入
import {default} from 'foo' 也导入默认导出
import {default as bar} from 'foo' 导入默认导出别名为 bar
import foo, {bar, baz} from 'foo'将默认值foo与命名导出混合在一起,bar并baz在一个声明中
import * as foo from 'foo' 导入名称空间对象
包含以下所有已命名的出口 foo[name]
foo.default如果在模块中声明了默认导出,则包含中的默认导出
深入阅读ES6模块补充

猜你喜欢

转载自blog.csdn.net/weixin_42554191/article/details/106178189
ES6