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入门(阮一峰 著)等

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信公众号:Java团长

Java面试宝典

允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不同的行为方式(发送消息就是函数调用).主要有以下优点:

23920
来自专栏令仔很忙

理解javascript作用域和作用域链

作用域就是变量和函数的可访问范围,控制着变量和函数的可见性与生命周期,在JavaScript中变量的作用域有全局作用域和局部作用域。

72610
来自专栏西枫里博客

Python学习笔记九(变量作用域及内置函数和闭包函数)

在上次的学习中,初步认识了Python的自定义函数方式及变量参数。那么编程中的局部变量和全局变量应该是大多数语言的标配。Python中如果定义局部变量和全局变量...

8620
来自专栏java相关

Shell脚本编程

linux中的变量分为环境变量和普通变量,其中环境变量可以理解为全局变量,在所有shell的子程序中都可以引用,普通变量只能在自己的shell程序中使用,程序结...

23520
来自专栏爱撒谎的男孩

Spring依赖注入

45470
来自专栏程序员互动联盟

【编程基础第十一讲】代码如何写才最漂亮第一篇

存在问题: 好多小伙伴对编码的格式作用模糊,以为只要完成功能就行,其实这种观点是错误的,一定要重视代码规范,不然你哭的地都找不到。 如何实施: 良好的代码开发习...

27970
来自专栏高性能服务器开发

Redis应用总结

首先, 我带大家简单的了解一下Redis Redis常用数据类型(最为常用的数据类型主要有以下五种) ●String ●Hash ●List ●Set ●Sor...

35670
来自专栏程序员互动联盟

【答疑解惑第三十一讲】如何使用全局变量?

疑惑一 全局变量如何用? ? 看图中的箭头的地方,声明全局变量的时候使用了static,这个问题就涉及到了static的使用,如果要使用全局变量,并且在多文件中...

35590
来自专栏用户2442861的专栏

Python基础学习篇——Global全局变量的使用

为了测试Python中全局变量的使用,我们试图撰写以下几个例子进行说明: #第一例子,是用来验证一个最基础的全局变量与局部变量的区别,内容如下: #-*- c...

11200
来自专栏mySoul

Java静态方法和实例方法 java中的数组作为形参传入

启动一个Java程序的时候,会诞生一个虚拟机实例,当程序关闭退出时,该实例会消失。

21810

扫码关注云+社区

领取腾讯云代金券