es6入门

余杭子曰
360 阅读8分钟

前言

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的语法转换为标准的，前往官网地址，你也可以在这个页面练习使用理解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，它类似于数组，只不过没有重复的值

  • 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入门（阮一峰 著）等
avatar
文章
阅读
粉丝