ECMAScript6新特性范例大全

ECMAScript6(ECMAScript 2015，ES5，ES2016)技术已经在前端圈子很流行了，他给前端开发人员带来了很多惊喜，提供的语法糖使复杂的操作变得简单。

本文没有详细描述这些新特性，因为网上都已经有很多相关的介绍了。主要针对ES6新特性收集了相关范例代码，他可以让你快速了解这个新的爪哇岛描述语言规范。

箭头函数

功能()函数的简写表示法，但它不绑定这个。

var赔率=evens。map(v=v 1)；//没有父母，也没有bracketsvar nums=evens.map((v，I)=v I)；var对=evens。map(v=({偶数：v，奇数：v ^ 1 })；//语句bodiesnums。foreach(v={ if(v % 5===0)五。push(v)；});这是如何工作的？

var object={ name: 'Name '，arrowGetName: ()=this.name，常规GetName:函数(){ return this。Name }，arrow get this :()=this，regular get this : function(){ return this } } console。日志(这个。名称)控制台。日志(对象。arrow getname())；控制台。日志(对象。arrow getthis())；控制台。记录(此)控制台。日志(对象。正则getname())；控制台。日志(对象。正则getthis())；结果：

这个。名称-对象。arrow getname()-对象。arrowgetthis()-[对象窗口]这个-[对象窗口]对象。正则getname()-Name对象。常规get this()-{ ' Name ' : ' Name ' }

Classes(类)

我们知道"真正"语言中的类（类别).在ES6中类（类别)其实是原型继承的语法糖。

SkinnedMesh类扩展了三.Mesh {构造器（几何，材料){ super(几何，材料);这个。idmatrix=skinnedmesh。default matrix()；这个。bones=[]；这个。骨基质=[]；//.}更新（相机){ //.超级棒。update()；}获取骨骼计数(){返回此。骨头。长度；}设置矩阵类型(矩阵类型){这。id matrix=SkinnedMesh[矩阵类型]()；}静态defaultMatrix(){ 0返回新的三.矩阵4()；}}Lebab.io

增强的对象字面量

var ProToObj={ ToString : function(){ return ' ThE ProToObj To string ' } } var handler=()=' handler ' var obj={/_ _ proto _ _ _ _ _ ProToObj ://handler : handler ' handler的简写，//方法toString() { //Super调用返回超级。ToString()；},//计算（动态)属性名[' prop _ '(()=42)()]: 42 }；控制台。日志。handler)控制台。日志。handler())控制台。日志。tostring())控制台。日志。道具_ 42)结果：

物体。handler-()=“handler”obj。handler()-handler robj。tostring()-d ThE Protobject To string bj。道具_ 42-42

字符串插值

字符串插值的好语法

字符串插值

var name='Bob '，time=' todayvar multiLine='此行pan multipleLine ' console。日志(` hello $ { name }，你好${time}？`)console.log(multiLine)结果：

`你好${name}，你好${time}？你好，鲍勃，你今天好吗？多行-该行跨越多行

解构 Destructuring

愚人码头注：列表匹配

//list 'matching'var [a，b]=[1，2，3]；控制台。日志(a)结果：

a - 1b - 3对象也能很好的解构

nodes=()={ return {op: 'a '，lhs: 'b '，rhs: 'c'}}var { op: a，lhs: b，RHS 3360 c }=nodes()console。日志控制台。日志控制台。日志(c)结果：

a - ab - bc - c使用速记表示法。

nodes=()={ return {lhs: 'a '、op: 'b '、RHS : ' c ' }//绑定scopevar {op、lhs、rhs}中的` op`、lhs `和` RHS '=nodes()控制台。日志(op)控制台。日志(lhs)控制台。日志结果：

op - blhs - arhs - c可在参数位置使用

函数g({ name : x }){ return x }函数m({ name }){ return name }控制台。log(g({ name : 5 })控制台。日志(m({ name : 5 }))结果：

g({ name : 5 })-5m({ name : 5 })-5

故障弱化解构

var[a]=[]var[b=1]=[]var c=[]；控制台。日志控制台。日志(b)；控制台。日志(c)；结果：

a - undefinedb - 1c - []

参数默认值（Default）

函数f(x，y=12){ return x y；}控制台。log(f(3))控制台。对数(f(3，2))结果：

f(3) - 15f(3，2) - 5

扩展（Spread）

在函数中：

函数f(x，y，z){ return x y z；}//传递数组的每个元素作为参数console.log(f(.[1,2,3]))结果：

f(.[1,2,3]) - 6在数组中：

var parts=['肩膀','膝盖'];定义变量歌词=['头'，零件，'和','脚趾'];console.log(歌词)结果：

歌词- ['头','肩','膝','和','脚趾']

扩展 + 对象字面量

我们可以使用这个创造很酷的对象。

让{ x，y，z }={ x: 1、y: 2、a: 3、b : 4 }；控制台。log(x)；//1个con sole。日志(y)；//2 con sole。log(z)；//{ a: 3，b : 4 }//Spread属性让n={ x，y，z }；控制台。log(n)；//{ x: 1，y: 2，a: 3，b: 4 }console.log(obj)可惜的是它还不支持：

国家预防机制安装-保存-开发巴贝尔-插件-转换-对象-休息-传播

Rest

我们可以使用休息操作符来允许无限参数。

功能演示（第一部分，第2部分){ 0返回{part1，part2}}console.log(演示(1,2,3,4,5,6))结果：

demo(1，2，3，4，5，6) - {'part1':1，' part2':[2，3，4，5，6]}

Let

let是新的var。因为它有块级作用域。

{ var global var='来自演示1 ' } { let global let='来自演示2 '；}控制台。日志(全局var)控制台。日志(全局字母)结果：

globalVar -来自演示1 globalLet-referenceerror :未定义全球信函但是，它不会向窗户分配任何内容：

让我走='走；//全局作用域var i=' able//全局作用域控制台。日志(窗口。我)；控制台。日志(窗口。(一)；结果：

窗户。我-不设防的伦敦。我能不能使用让重新声明一个变量：

让我=' foo '让我='吧；控制台。日志(我)；结果：

语法分析器：标识符“我”已经被声明为变量me=" foovar me=' barconsole.log(me)结果：

me - bar

Const

const是只读变量。

const a='b'a='a '结果：

类型错误：常量变量赋值。应该注意，const对象仍然可以被改变的。

const a={ a : ' a ' } a . a=' b '控制台。日志(a)结果：

a - {'a':'b'}

For..of

迭代器的新类型，可以替代为.在2005年。它返回的是值而不是钥匙。

let list=[4，5，6]；console.log(列表)为（让我在列表中){控制台。日志(一)；}结果：

list - [4，5，6]i - 0i - 1i - 2let list=[4，5，6]；console.log(列表)用于（列表中的字母I){控制台。日志(一)；}结果：

列表- [4，5，6]i - 4i - 5i - 6

迭代器（Iterators）

迭代器是一个比数组更动态的类型。

让无限={[symbol . iterator]({)让c=0；返回{ next(){ c；返回{ done: false，值： c } } } } }控制台。日志(“开始”)；对于(var n为无穷大){ //如果(^ 10号)中断，则在1000处截断序列；控制台。log(n)；}结果：

start '-startn-1n-2n-3n-4n-5n-6n-7n-8n-9n-10使用打字稿，我们可以看到它接口的样子：

接口迭代器结果{ done:布尔值；value: any}接口迭代器{ next(): IteratorResult；}可迭代接口{[符号。迭代器]():迭代器}

生成器（Generators）

生成器创建迭代器，并且比迭代器更具动态性。他们不必以相同的方式跟踪状态并不支持完成的的概念。

var infinity={[符号。迭代器]:函数*(1){ var c=1；for(；){产量c .} } }控制台。(var n of infinity){//如果(^ 10号)中断，则在1000处截断序列；控制台。log(n)；}结果：

start '-startn-1n-2n-3n-4n-5n-6n-7n-8n-9n-10使用以打字打的文件再次显示接口：

接口生成器扩展迭代器{下一个(值？ any): IteratorResult；抛出(例外： any)；}函数*迭代器和生成器

一个产量的例子*

函数*其他GENERATOR(I){ yield I 1；产量I2；产量i3；}函数*生成器(一){产量一；产量*另一个发电机；产量i 10}var gen=发电机(10);console.log(gen.next().值);console.log(gen.next().值);console.log(gen.next().值);console.log(gen.next().值);console.log(gen.next().值);结果：

gen.next().value - 10gen.next().value - 11gen.next().value - 12gen.next().value - 13gen.next().值- 20

Unicode

ES6为统一码提供了更好的支持。

var regex=new RegExp('\u{61} '，' u ')；控制台。日志(正则表达式。unicode)控制台。日志(' ud 842 \ udfd 7 ')控制台。日志(' \ ud 842 \ udfd 7 ' .codePointAt())结果：

regex.unicode - true'' -' ' .codePointAt() - 134103

模块和模块加载器

原生支持模块。

从"模块名"导入默认成员从"模块名称"中导入*作为名称；从"模块名称"导入{成员};从"模块名称"导入{成员作为别名};从"模块名称"导入{成员1，成员2 }；将{成员1，成员2 }导入为alias2 , [.] }来自"模块名";导入默认成员，{成员[，[.] }来自"模块名";从"模块名称"中导入defaultMember，* 1作为名称；导入"模块名称";导出{ name1，name2，…，Namen }；将{变量1导出为名称1，变量2导出为name2，…，Namen }；导出信函名称1、名称2、…、名称n；//同样varexport让name1=…，name2=…，…，nameN//同样是var，constexport表达式；导出默认表达式；导出默认函数(…) { … } //还类，函数*导出默认函数name1(…) { … } //还类，函数*导出{姓名1为默认，…};从…导出*;从…导出{名称1,名称2,…,名称n }；从…导出{导入一为名称1,导入2为名称2,…,名称n }；进口出口

Set

集为数学对应，其中所有项目都是唯一的。对于知道结构化查询语言的人来说，这相当于独特的。

var Set=new Set()；set.add('马铃薯')。添加('番茄')。添加('番茄');控制台。日志(设置。尺寸)控制台。日志(设置。“has(”番茄'))适用于（集合中的不同项目){ console.log(项目)}结果：

set.size - 2set.has('番茄)- trueitem - Potatoitem - TomatoSet

WeakSet

WeakSet对象允许您在集合中存储弱持有的对象。没有引用的对象将被垃圾回收。

var item={ a : ' Potato ' } var set=new WeakSet()；set.add({ a: '马铃薯' })。添加（项目)。添加({ a: '番茄' })。添加({ a: '番茄' });控制台。日志(设置。尺寸)控制台。日志(设置。has({ a : '番茄}))控制台。日志(设置。有(项)用于(让项集){控制台。日志(项目)}结果：

准备好。大小-未定义的数据集。has({ a : '番茄}) - falseset.has(项)-truetyperror : set[符号。迭代器]不是函数WeakSet

Map

地图也称为词典。

var Map=new Map()；map.set('马铃薯',12);map.set('番茄',34);控制台.日志(地图.获取('马铃薯')用于（让项目进入地图){ console.log(项目)}用于（让项目进入地图){ console.log(项目)}结果：

map.get('马铃薯)- 12item - ['马铃薯，12]项- ['番茄',34]可以使用除字符串之外的其他类型。

var Map=new Map()；var key={a: 'a'}map.set(key，12)；控制台。日志(地图。get(key))控制台。日志(地图。get({ a : ' a ' })结果：

地图。get(key)-12地图。get({ a : ' a ' })-undefinedMap

WeakMap

使用键的对象，并且只保留对键的弱引用。

var WM=new weak map()；var O1={ } var O2={ } var O3={ } WM。set(O1，1)；wm.set(o2，2)；wm.set(o3，{ a : ' a ' })；wm.set({}，4)；控制台。日志(WM。get(O2))；console.log(wm.has({}))删除O2；控制台。日志(WM。get(O3))；用于(让项目进入wm) { console.log(项目)}for(让项目进入wm) { console.log(项目)}结果：

WM。获得(O2)-2毫米。has({ })-false WM。get(O3)-{ ' a ' : ' a ' }类型错误： WM[符号。迭代器]不是functionWeakMap

代理（Proxy）

代理可以用来改变对象的行为。它们允许我们定义陷阱。

var obj=function ProfanityGenerator(){ return { words : '恐怖单词} }()var handler=function detectinghandler(){ return { get : function(target，key){ return target[key]} .替换('恐怖','美好');}，}}()var proxy=new Proxy(obj，handler)；控制台。日志(代理。字数)；结果：

代理人。单词-漂亮的单词提供以下陷阱：

定义变量处理程序={ get:set:has:deleteProperty:应用：construct:getowntpropertysdescriptor :定义操作：getPrototypeOf:设置：的协议类型.枚举：ownKeys:预防措施：isExtensible:}代理

Symbols

符号是一个新类型。可用于创建匿名属性。

var类型符号=Symbol(' type ')；类pet { constructor(type){ this[typeymbol]=type；} GetType(){ 0返回此[类型符号]；} } var a=new Pet(' dog ')；控制台。log(a . GetType())；控制台。日志(对象。getowntpropertnetames(a))控制台。日志(符号(' a')==符号(“a”)结果：

a。GetType()-DogObject。getowntpropertynames(a)-[]符号(' a')==符号(' a') -假更多信息

可继承内置函数

我们现在可以继承原生类。

班级习惯光线扩展数组{ } var a=new习惯光线();a[0]=2console.log(a[0])结果：

a[0] - 2不能使用数组的代理（代理)来覆盖吸气剂函数。

新类库

各种新的方法和常量。

控制台日志（编号EPSILON)控制台。日志(编号。isinteger(Infinity))控制台。日志(编号。isnan(' NaN ')控制台。日志(数学。控制台。日志(数学。hypt(3，4))控制台。日志(数学。imul(Math.pow(2，32) - 1，数学。pow(2，32) - 2))console.log('abcde ' .包括(“光盘”)控制台。日志(' ABC ').重复(3) )console.log(Array.of(1，2，3) )console.log([0，0，0]).填充(7,1))控制台日志([1,2,3]。find(x=x==3) )console.log([1，2，3]).find index(x=x==2))控制台。log([1，2，3，4，5]).copy InTerface(3，0)) console.log(['a '，' b '，' c'].entries() )console.log(['a '，' b '，' c'].keys() )console.log(['a '，' b '，' c'].values())控制台。日志(对象.赋值({}，{ origin: new Point(0，0) }))结果：

号码-2.220446049250313 e-16号。是整数(无穷大)-假数字。是NAn(' NAn ')-假数学。acosh(3)-1。58860 . 88888888861hypt(3，4) - 5Math.imul(Math.pow(2，32) - 1，Math.pow(2，32) - 2) - 2'abcde ' .包括(“CD”)-真abc ' .重复(3)-ABc ABc阵列。(1，2，3) - [1，2，3][0，0，0]的.填充(7,1) - [0,7,7][1,2,3]。find(x=x==3) - 3[1，2，3].findIndex(x=x==2) - 1[1，2，3，4，5]。copy InTerface(3，0) - [1，2，3，1，2]['a '，' b '，' c'].条目()- {}['a '，' b '，' c'].keys() - {}['a '，' b '，' c'].values() - TypeError: ['a '，' b '，' c'].价值观念不是functionObject.assign({}，{ origin: new Point(0，0) }) - ReferenceError: Point未定义文档：数字，数学，数组。从，数组。的数组。原型。复制内部，对象。分配

二进制和八进制

二进制和八进制数字的字面量。

控制台。日志(0b 11111)控制台。日志(0o 2342)控制台。日志(0xff)；//也在es5中结果：

0b 1111-310 o 2342-12500 xff-255

Promises

异步编程。

var p1=新的承诺(解析，拒绝)={ setTimeout(()=解析(' 1 '，101)})var p2=新的承诺(解析，拒绝)={ setTimeout(()=解析(' 2，100)})Promise.race([p1，p2]).然后((RES)={控制台。log(RES)})承诺。所有([P1，p2]).然后((res)={ console.log(res)})结果：

res - 2res - ['1 '，' 2 ']

快速的 Promise

var P1=promise。解析(' 1 ')变量p2=承诺。拒绝承诺。种族(P1，p2).然后((res)={ console.log(res)})结果：

第1

快速失败

号决议如果一个承诺失败，全部和人种也将拒绝（拒绝)。

var p1=新的承诺(解析，拒绝)={ setTimeout(()=解析(' 1 '，1001)})var p2=新的承诺(解析，拒绝)={ setTimeout(()=拒绝(' 2，1)})Promise.race([p1，p2]).然后((RES)={控制台。日志('成功' RES)}，RES={控制台。日志(' error ' RES)})承诺。所有([P1，p2]).然后((RES)={控制台。日志('成功' res)}，res={ console.log('错误' RES)})结果：

错误res -错误2 '错误res -错误2更多信息

反射（Reflect）

新类型的元编程与新的应用程序接口现有的还有一些新的方法。

var z={ w : ' Super Hello ' } var y={ x : ' Hello '，_ _ proto _ _ : z }；控制台。日志(反映。getowntpropertysdescriptor(y，' x ')；console.log(Reflect.has(y，' w '))；console.log(Reflect.ownKeys(y，' w '))；console.log(Reflect.has(y，' x '))；控制台。日志(反映。删除属性(y，' x ')console . log(reflect . has(y，' x '))；结果：

反思。GetOwnPrOperty描述符(y，' x') - {'value':'hello '，'可写' :街'可枚举：真实反映。has(y，' w') - trueReflect.ownKeys(y，' w') - ['x']Reflect.has(y，' x ')-true reflect。删除属性(y，' x') - trueReflect.has(y，' x') - false更多信息

尾调用（Tail Call）优化

尾调用的概念非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。

ES6可以确保尾调用不会造成堆栈溢出。 (不是所有的实现工作)。

函数阶乘(n，acc=1) { if (n=1)返回行政协调会；返回阶乘(n - 1，n * ACC)；}console.log(阶乘(10))console.log(阶乘(100))控制台.日志(阶乘(1000))控制台.日志(阶乘(10000))控制台.日志(阶乘(100000))控制台.日志(阶乘(1000000))结果：

阶乘(10)-3628800阶乘(100)-9 . 56860 . 68868686861阶乘(1000) -无限阶乘(10000) -无限阶乘(100000) -范围错误：最大调用堆栈大小超出了因子(1000000) -范围错误：超出了最大调用堆栈大小原文：ES6功能