es6入门

前言

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引擎支持的，但其他浏览器不一定支持。 ~~~ //打开实验选项 traceur.options.experimental=true; //type =module 注意 //es6 codes here ~~~

1. 在线转换 通过线上地址，可以帮你吧es6的语法转换为标准的，前往官网地址，你也可以在这个页面练习使用理解es6的不同。
2. 命令行转换–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，它类似于数组，只不过没有重复的值

• 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入门（阮一峰 著）等