ES6较ES5之优点

 

 

ECMAScript(以下简称ES6)是Javascript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript2015

也就是说，ES6就是2015

虽然目前并不是所有的浏览器都兼容其特性，但是现在使用vuejs angular2等框架写项目大多都使用es6语法。

在正式讲解ES6语法之前，先了解babel

babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。不同的编辑器如何配置babel，可以自行百度。

最常用的ES6特性

let,const,class,extends,super,arrow function, template string,destructuring,default,rest arguments

这些是ES6最常用的几个语法，以下都是简短版的介绍。

let, const

这两个的用途与var类似，都是用来声明变量

var name='zach'
while (true) {
 var name = 'obama'
console.log(name) //obama
break

}
console.log(name)//obama
//es5 只有全局和作用域的区别 没有块级作用域
//var 声明的变量 同样的变量名后面会覆盖前面，内层变量会覆盖外层变量。

而let 为javascript增加了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效

let name = 'zach'

while (true) {
let name='obama'
console.log(name)//obama
break


}
console.log(name)//zach

另外一个var 带来的不合理场景就是用来计数的循环变量泄露为全局变量。

var a = []
for (var i=0;i<10;i++) {
 a[i] = function () {

console.log(i)

}

}
a[6]();//10

上面代码中，变量i是var 声明的，在全局范围内都有效，所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i值。而使用let 则不会

var a=[]
for (let i = 0;i<10;i++) {
 a[i]= function () {
 console.log(i)

}


}
a[6]();//6

再来看一个更常见的例子，了解下如果不用es6，而用闭包如何解决这个问题

var clickBox = document.querySelectorAll('.clickBox')
for (var i=0;i<clickBoxs.length;i++) {
 clickBoxs[i].onclick = function(){
  console.log(i)
}

}
我们本来希望的是点击不同的clickBox，显示不同的i，但事实是无论我们点击哪个clickBox，输出的都是5。下面我们来看下，如何用闭包搞定它。

如何使用闭包来解决：

function iteratorFactory(i){
    var onclick = function(e){
        console.log(i)
    }
    return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = iteratorFactory(i)
}

 或者：

var divBox=document.getElementsByTagName('div')
	for (var i=0;i<divBox.length;i++){
		divBox[i].index=i
		console.log(this.i)
		divBox[i].onclick=function() {
			
			alert(this.index)
		};
	}

const也是用来声明变量，但是声明的是常量。一旦声明，常量的值就不能变

const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

 

当我们尝试去改变const声明的常量时浏览器就会报错。

所以，const有一个很好的应用场景，就是当我们引用第三方库的时候声明的变量，用const声明可以避免不小心重命名而导致出现bug

const moment=require('moment')

class,extends,super

这三个特性涉及了ES5中最令人头疼痛的几个部分：原型，构造函数，继承

es6提供了更接近传统语言的写法，引入了class这个概念。新的class写法让对象原型的写法更加清晰，更像面向对象的语法。

class Animal {
  constructor() {
  this.type = 'animal' 
}
say(say){
 console.log(this.type+'says' + say)
}

}
let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
 constructor() {
  super()
  this.type = 'cat'
 }

}
let cat = new Cat()
cat.says('hello') //cat says hello

上面代码首先用class定义了一个类。可以看出里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰很多、

上面定义了一个cat类，该类通过extends关键字，继承了Animal类的所有属性和方法

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this(所以必须先调用super方法)，然后再用子类的构造函数修改this

arrow function

这个恐怕是ES6最常用的一个新特性了，用它来写function比原来的写法要简洁很多

function(i) {return i+1;}//ES5

(i) => i+1//ES6

如果方程比较复杂，则需要用{}把代码包起来

function(x,y) {
 x++;
 y--;
return x+y;

}
//转换成es6
(x,y)=>{x++;y--;return x+y}

除了间接以外，arrow function 还有一项非常特别的功能

长期以来，javascript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this,必须非常小心

class Animal {
 constructor() {

 this.type = 'animal'

}
says(say){
 setTimeout(function(){

  console.log(this.type + 'says' +say)
},1000)

}
}

var animal = new Animal()

animal.says('hi')//undefined says hi

运行上面的额代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了它能有效运转，解决方法通常有：

1.第一种是将this传给self，再用self来指代this

says(say){

var self = this;

 setTimeout(function(){

console.log(self.type+'syas'+say)

},1000)

}

第二种是将bind(this)即

says(say){
setTimeout(function(){

 console.log(this.type+'says'+say)

}.bind(this),1000)

}

但是箭头函数就不需那么麻烦

class Animal{

constructor(){

this.type = 'animal'

}

says(say){

setTimeout( () => {

console.log(this.type+'says' +say)

},1000)

}}

var animal = new Aanimal()

animal.says('hi')//animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

并不是因为箭头函数内部有绑定的this机制，实际原因是箭头函数根本没有自己的this,它的this是继承外面的额，因此内部的this就是外层代码块的thi s

template string

这个东西也是非常有用，当我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常引用一些模板工具，比如arttemplate

我们需要写一堆‘+’来连接

而使用es6的新特性后，可以直接用tab键上面的``

 

$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用反引号（\）来标识起始，用${}`来引用变量，而且所有的空格和缩进都会被保留在输出之中，是不是非常爽？！

destructuring

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

看下面的例子：

let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

用ES6完全可以像下面这么写：

let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

反过来可以这么写：

let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

default,rest

default很简单，意思就是默认值。大家可以看下面的例子，调用animal()方法时忘了传参数，传统的做法就是加上这句 type = type || 'cat'来指定默认值

function animal(type){
 type = type || 'cat'
 console.log(type)

}
animal()

如果用ES6我们而已直接这么写

function animal(type = 'cat') {

console.log(type)
}
animal()

最后一个rest语法也很简单

function animals(...types){
console.log(types)
}
animals('cat','dog','fish')//["cat", "dog", "fish"]
//而如果不用ES6的话，我们则得使用ES5的arguments。

 

转载于:https://my.oschina.net/u/3653125/blog/1536725