[TOC] ## 前言 es6作为最新的js语言版本，有很多特性是不得不晓的。下面将语法中常用的分析出来，对应到基本对象类型的会在对象里描述。 ## 编译运行 ### nodejs * nodejs本身已经直接支持es6的大部分语法。 ~~~ var traceur=require("traceur"); var fs=require("fs"); var content=fs.readFileSync("es6-file.js").toString(); var result=traceur.compile(contents,{ filename:"es6-file.js", sourceMap:true, module:"commonjs" }); if(result.error){ throw result.error; } //转换之后的es5代码 fs.writeFileSync("out.js",result.js); //sourceMap对应的map文件 fs.writeFileSync("out.js.map",result.sourceMap); ~~~ ### 浏览器支持 现代浏览器比如火狐、谷歌等也已经支持了部分的es6语法，但部分手机浏览器以及落后版本，需要用babel转换es6语法为es5才可以正常使用。 ### traceur编译器 可以通过traceur来进行es6语法的转换。 1. 直接插入网页,当然你可以在谷歌浏览器运行这些新颖的语法，因为本来谷歌就是v8引擎支持的，但其他浏览器不一定支持。 ~~~ <script src="..../traceur.js" type="text/javascript"></script> <script> //打开实验选项 traceur.options.experimental=true; </script> <script type="module"> //type =module 注意 //es6 codes here </script> ~~~ 2. 在线转换 通过线上地址，可以帮你吧es6的语法转换为标准的，[前往官网地址](http://google.github.io/traceur-compiler/demo/repl.html)，你也可以在这个页面练习使用理解es6的不同。 3. 命令行转换--traceur模块 ~~~ cnpm i -g traceur; traceur demo.js;//直接运行 traceur --script demo.es6.js --out demo.es5.js; //为了避免某些加载不成功，最好最后加上--experimental ~~~ ## 变量声明 ### 局部变量声明-- let * let关键字，技能点：变量作用域（改变作用域），用于定义局部作用域。 ~~~ for(var i=0;i<5;i++){ arr[i]=function(){console.log("结果是："+i);} } arr[2]();//原来的位置用let 结果是2 ~~~ * 变量提升问题 ~~~ var j=1; function demo(){ console.log(j);//提示undefined ,因为布局有定义变量，先声明了变量，而赋值延迟 var j=3; console.log(j); } demo(); ~~~ ### 常量声明--const * const 常量：不可修改，如果为简单值，本身不可修改;但如果是对象，指的地址不可修改，并非值。 ~~~ const name="张三"; name="张三2"; //报错 提示常量不可改变 const person={"name":"张三","sex":"male"}; person.name="李四"; console.log(person.name);//name改为了李四 var person2=person; person2.name="晚五"; console.log(person2.name); console.log(person.name);//赋值的时候给的是地址，原对象的值也会改变 ~~~ ## 其他 * 其他的对应到具体对象类型的语法写在具体对象的拓展语法中。 ## 解构 * 解构分为对象解构以及数组解构，详细语法参考具体对象文档 * 具体用途 1. 交换变量 ` [x,y]=[y,x]; ` 2. 从函数返回多个值,并且方便的取值 ~~~ function demo(){ return [1,2,3];//return {name:1,str:2} } var [a,b,c]=demo; ~~~ 3. 函数参数的定义 ~~~ function demo(x,y,z){ } demo(x:1,y:2,z:3)；//对于提取json中数值非常有效 ~~~ 4. 函数参数默认值 ~~~ function demo(x=1,y=7,z=0){ //这样的写法避免了在函数内部写 var x=config.foo||"default foo"; } ~~~ 5. 遍历map结构 任何部署了Iterator的接口的对象，都可以通过for...of循环遍历。 ~~~ var map=new Map(); map.set("first","hello"); map.set("first","world"); for(let [key,value] of map){ console.log(key+" is "+value); } for(let [key] of map){ //... } for(let [,value] of map){ //... } ~~~ 6. 指定得到模块的方法,可以定义具体需要的方法，使得输入语句非常清晰。 `const {sourceCode}=require("source-map");` ## set和map数据结构 ### js提供了新的数据结构set，它类似于数组，只不过没有重复的值 ~~~ var s=new Set(); [1,1,556,6,89].map(x=>s.add(x)); //允许接受一个数组作为初始化 var ar=new Set([3,6,6,768,0]); //常用的四个方法 s.add(value); s.delete(value); s.has(value); s.clear(); //set 转换为数组 Array.from(ar); ~~~ ### map结构 * map结构主要是针对js中只能用字符串当键，而map中对象，元素等都可以。可以接受一个数组进行初始化。 ~~~ var map=new Map([['name',12],["value",123]]); map.has("name");//true map.get("name");// 12 map.set(["a"],3444); map.get(["a"]) //未被定义 var k1=["a"]; map.set(k1,3444); map.get(k1) //3444 var k2=["a"]; map.set(k2,3444);//虽然值相同 但是不同 识别为两个键 ~~~ * 属性和方法 size 返回成员总数 set(key,value);设置一个键值对 get(key) 获取对应键的值 has(key) 是否具有某个键，返回布尔值 delete(key) 删除某个键 ，删除成功返回true,没有删除失败返回false clear() 清除所有成员 * 遍历 Map 提供三个遍历器： keys(),value(),entires() ~~~ for(let key of map.keys()){ console.log(key) } for(let value of map.values()){ console.log(value) } for(let item of map){ console.log(item[0],item[1]) } //也可以用forEach() map.forEach(function(value,key,map){ console.log(key,value) }) ~~~ * WeakMap 与map的区别是只接受对象作为键，不接受原始数据类型作为键名 使用场景之一就是某个dom元素对应的结构，当这个元素移除的时候，对应的记录也会移除。 ## Iterator 遍历器 Iterator 是一种任何协议，任何对象只要部署了这个协议，就可以完成遍历操作。在es6中遍历操作特指for...of循环。 它的作用主要是两个，一个是为遍历对象的属性提供了统一的访问接口，而是让对象的属性能够被依次排列。 规定如下：只要部署了next方法的对象，就具备了这功能，next方法必须返回一个包含value和done的两个属性的对象。value是当前遍历位置的值，done是一个布尔值，表示遍历是否结束。 区分for in循环，这个可以拿到值，而后者只能拿到属性键。一般的对象不可以利用for...of，但都可以用for...in获取到属性键。 ~~~ var arr=[1,3,33,90]; for(var item in arr){ console.log(item);//0 1 2 3 键 } for(var itemof arr){ console.log(item);// 1 3 33 90 键值 } ~~~ ## Generator 所谓的Generator，简单说就是一个内部状态的遍历器，每调用一次遍历器，内部状态发生一次改变。es6引入Generator函数就是完全控制内部状态的变化，依次遍历这些状态。特征：1 function关键字后面加`*` 2函数内部使用yield语句定义遍历器的每个成员，即不同的内部状态（yield英语就是产出）； 用途：拓展延伸，本身用途之一就是可以当做暂停函数，跳出，与return类似，不同的是具有记忆位置的作用，下次开始从记忆位置开始。如果从Generator直接return就会暂停，直到Generator.next() 之后才会继续执行。 ~~~ function* generator(){ yield "1"; yield "2"; return "ending"; } var hw=generator(); hw.next(); // {value: "1", done: false} hw.next(); {value: "2", done: false} hw.next(); {value: "ending", done: true} hw.next(); {value: undefined, done: true} ~~~ * 拓展说明：部分效果上可以代替回调函数，等执行完成时，调用next() 即可 * 使用for of遍历时 ，不需要使用next * yeild* ,yeild后面追加的为遍历器时，需要加*号 ## Promise对象 es6用这个对象代表了将来要发生的某个事件，它的好处是可以按照同步的方式书写回调或者异步的程序，而不用层层嵌套。比如请求后台数据时。 var promise=new Promise(function(resolve,reject){ if(/*异步操作成功*/){ resolve(value) }else{ reject(error) }}) promise.then(fuction(value){ //sucess },function(value){ //failure }) * 链式操作 then方法返回的是一个promise对象，因此可以采用链式操作，不断的依次执行 promise.then(fn).then(fn()); * catch方法，捕捉错误 cathch方法是then的别名，用于发生错误时回调函数。 .then().catch(fn(error)); * all方法 用于将多个异步操作，包装成一个新的Promise对象。 * resolve ,用于将现在的对象转换为Promise对象。 * async 函数用来取代回调的另一种方式 函数前面加async关键字，对于异步的操作，前面加await，后面的语句就会等异步操作完成才会执行后面的程序。 ## class和module * Class 通过class关键字可以定义类。 ~~~ class Point{ constructor(x,y){//构造器，需要传入x y两个参数 this.x=x;//this代表实例对象 this.y=y; } toString(){ return this.x+this.y; } } var point=new Point(2,3); point.toString();//23 //通过extends 实现继承 class colorPoint extends Point{ constructor(x,y,color){//构造器，需要传入x y color两个参数 this.color=color; super(x,y);//等同于super. constructor(x,y),super暂不支持 } toString(){ return this.color+super(); }} ~~~ * module : export and import es6实现了模块功能，试图解决js代码上的依赖和部署问题，取代现有的commonJs和AMD规范，成为浏览器和服务器的通用模块解决方案。 es6中有两个关键字 export和import，export用于规定对外规范，import用于输入其他模块的功能。 es6中允许独立的js文件作为模块，也就是一个文件可以调用另一个文件，最简单的文件就是一个js文件，里面export输出变量。 profile.js var firstName="asfc"; var lastName="asfc"; export{ firstName,lastName } //其他文件使用： import {firstName,lastName} from "./profile.js"; //输出方法 export function area(){ console.log('area is 960'); } //导入整个模块 module circle from "circle"; circle,fn1(); circle,fn2(); //模块默认方法 默认属性的设置 export default function default(){} export default var demo=12; // 模块继承 circlePlus export * from 'circle'; ## 参考文档 * es6入门（阮一峰 著）等