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 ' }
SkinnedMesh类扩展了三.Mesh {构造器(几何,材料){ super(几何,材料);这个。idmatrix=skinnedmesh。default matrix();这个。bones=[];这个。骨基质=[];//.}更新(相机){ //.超级棒。update();}获取骨骼计数(){返回此。骨头。长度;}设置矩阵类型(矩阵类型){这。id matrix=SkinnedMesh[矩阵类型]();}静态defaultMatrix(){ 0返回新的三.矩阵4();}}Lebab.io
物体。handler-()=“handler”obj。handler()-handler robj。tostring()-d ThE Protobject To string bj。道具_ 42-42
`你好${name},你好${time}?你好,鲍勃,你今天好吗?多行-该行跨越多行
//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
a - undefinedb - 1c - []
f(3) - 15f(3,2) - 5
函数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)可惜的是它还不支持:
国家预防机制安装-保存-开发巴贝尔-插件-转换-对象-休息-传播
功能演示(第一部分,第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]}
{ 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 a='b'a='a '结果:
类型错误:常量变量赋值。应该注意,const对象仍然可以被改变的。
const a={ a : ' a ' } a . a=' b '控制台。日志(a)结果:
a - {'a':'b'}
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
让无限={[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;}可迭代接口{[符号。迭代器]():迭代器}
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
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 };进口出口
var Set=new Set();set.add('马铃薯')。添加('番茄')。添加('番茄');控制台。日志(设置。尺寸)控制台。日志(设置。“has(”番茄'))适用于(集合中的不同项目){ console.log(项目)}结果:
set.size - 2set.has('番茄)- trueitem - Potatoitem - TomatoSet
var item={ a : ' Potato ' } var set=new WeakSet();set.add({ a: '马铃薯' })。添加(项目)。添加({ a: '番茄' })。添加({ a: '番茄' });控制台。日志(设置。尺寸)控制台。日志(设置。has({ a : '番茄}))控制台。日志(设置。有(项)用于(让项集){控制台。日志(项目)}结果:
准备好。大小-未定义的数据集。has({ a : '番茄}) - falseset.has(项)-truetyperror : set[符号。迭代器]不是函数WeakSet
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
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
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:}代理
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
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 ']
第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更多信息
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更多信息
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功能