es6实例

1ES6ECMAScript62箭头操作符如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符=便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=outputs。我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子vararray=[1,2,3];//申明一个数组//传统写法回调方法array.forEach(function(v,i,a){console.log(v);});//ES6回调方法=相当于function(v,i,a){}array.forEach(v=console.log(v));3类的支持•ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化•//类的定义•classAnimal{•//ES6中新型构造器•constructor(name){•this.name=name;•}•//实例方法•sayName(){•console.log('Mynameis'+this.name);•}•}•//类的继承•classProgrammerextendsAnimal{•constructor(name){•//直接调用父类构造器进行初始化•super(name);•}•program(){•console.log(I'mcoding...);•}•}•//测试我们的类•varanimal=newAnimal('dummy'),•wayou=newProgrammer('wayou');•animal.sayName();//输出‘Mynameisdummy’•wayou.sayName();//输出‘Mynameiswayou’•wayou.program();//输出‘I'mcoding...’4增强的对象字面量•对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在：•可以在对象字面量里面定义原型•定义方法可以不用function关键字•直接调用父类方法•这样一来，对象字面量与前面提到的类概念更加吻合，在编写面向对象的JavaScript时更加轻松方便了•//通过对象字面量创建对象相当于类•varhuman={•breathe(){•console.log('breathing...');•}•};•varworker={•__proto__:human,//设置此对象的原型为human,相当于继承human•company:'freelancer',•work(){•console.log('working...');•}•};•human.breathe();//输出‘breathing...’•//调用继承来的breathe方法•worker.breathe();//输出‘breathing...’5字符串模板字符串模板相对简单易懂些。ES6中允许使用反引号`来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生//产生一个随机数varnum=Math.random();//将这个数字输出到consoleconsole.log(`yournumis${num}`);javascript字符串用tostring6解构•自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中•var[x,y]=getVal(),//函数返回值的解构•[name,,age]=['wayou','male','secrect'];//数组解构长度为三中间键值为空•functiongetVal(){•return[1,2];•}•console.log('x:'+x+',y:'+y);//输出：x:1,y:2•console.log('name:'+name+',age:'+age);//输出：name:wayou,age:secrect7默认参数值•现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了•functionsayHello(name){•//传统的指定默认参数的方式•varname=name||'dude';•console.log('Hello'+name);•}•//运用ES6的默认参数•functionsayHello2(name='dude'){•console.log(`Hello${name}`);•}•sayHello();//输出：Hellodude•sayHello('Wayou');//输出：HelloWayou•sayHello2();//输出：Hellodude•sayHello2('Wayou');//输出：HelloWayou8不定参数•不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中，…x代表了所有传入add函数的参数。•//将所有参数相加的函数•functionadd(...x){•returnx.reduce((m,n)=m+n);•}•//传递任意个数的参数•console.log(add(1,2,3));//输出：6•console.log(add(1,2,3,4,5));//输出：159拓展参数•拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过apply•varpeople=['Wayou','John','Sherlock'];•//sayHello函数本来接收三个单独的参数人妖，人二和人三•functionsayHello(people1,people2,people3){•console.log(`Hello${people1},${people2},${people3}`);•}•//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数•sayHello(...people);//输出：HelloWayou,John,Sherlock•//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法•sayHello.apply(null,people);//输出：HelloWayou,John,Sherlock10let与const关键字可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。for(leti=0;i2;i++)console.log(i);//输出:0,1console.log(i);//输出：undefined,严格模式下会报错11forof值遍历•我们都知道forin循环用于遍历数组，类数组或对象，ES6中新引入的forof循环功能相似，不同的是每次循环它提供的不是序号而是值。•varsomeArray=[a,b,c];••for(vofsomeArray){•console.log(v);//输出a,b,c•}12模块•在ES6标准中，JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。•将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用•//point.js•modulepoint{•exportclassPoint{•constructor(x,y){•publicx=x;•publicy=y;•}•}•}••//myapp.js•//声明引用的模块•modulepointfrom/point.js;•//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入•importPointfrompoint;••varorigin=newPoint(0,0);•console.log(origin);13Map，SetES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。vars=newSet();[2,3,5,4,5,2,2].map(x=s.add(x))for(letiofs){console.log(i)}//2354ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键•varm=newMap();•varo={p:HelloWorld};•m.set(o,content)•m.get(o)//content•m.has(o)//true•m.delete(o)//true•m.has(o)//false14其他分析模式MartinFowler组织（Organization）结构•其他还有很多新增特性•WeakMap，WeakSet•Proxies•Symbols•Math，Number，String，Object的新API•Promises