最近更新
阅读排行
读过本文章的之后读了
关注本站
ES6新增常用特性总汇
阅读：7722 次 编辑日期：2016-12-26
目录：
概述：
话说最近一年ES6很火，面试时你要说你没看过ES6你都不好意思，react里面也支持ES6的写法，ES6与ES5的变化是翻天覆地的，那么ES6常用的新增特性有哪些呢，今天我们说说。
JavaScript发展的时间轴：
1、1995：JavaScript诞生，它的初始名叫LiveScript。
2、1997：ECMAScript标准确立。
3、1999：ES3出现，与此同时IE5风靡一时。
4、2000–2005： XMLHttpRequest又名AJAX。
5、2009： ES5出现，也就是我们现在用的，例如foreach，Object.keys，Object.create和JSON标准。
6、2015：ES6/ECMAScript2015出现。
2、1997：ECMAScript标准确立。
3、1999：ES3出现，与此同时IE5风靡一时。
4、2000–2005： XMLHttpRequest又名AJAX。
5、2009： ES5出现，也就是我们现在用的，例如foreach，Object.keys，Object.create和JSON标准。
6、2015：ES6/ECMAScript2015出现。
let：
话说在ES5里面声明变量的方法只有用var，但是在ES6中新增了let和const。
let是可以理解为变量，让块级作用域也可以拥有自己的变量。
//ES5
var name = "uw3c";
if(true){
var name="javascript";
}
console.log(name) //javascript
ES5中上面的代码好理解，就是if执行了，把全局的变量改变了。
//ES6
let name = "uw3c";
if(true){
let name="javascript";
}
console.log(name) //uw3c
ES6的let让代if码块有了自己的作用域，所以互不干扰。
ES5中经常会出现for循环泄露全局变量的问题。
//ES5
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
alert(i);
};
}
a[6](); // 10
原因是因为for没有自己的作用域，导致i最后都会是10，ES5解决的办法也很简单，用闭包摆脱作用域。
//ES5
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = (function (index) {
return function(){alert(index)};
})(i);
}
a[6](); // 6
现在有了ES6的let，一切问题都解决了。
//ES6
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
const：
const声明的是常量，它不可以被改变。
//ES6
const PI = Math.PI;
PI = 99;
console.log(PI);//Assignment to constant variable
class、 extends、 super：
是不是越来越像java了，有了这些函数，我们就再也不用写prototype的继承了。
之前ES5我们要是写继承的话，会这么写。
//ES5
function Animal(){
this.type= "animal";
}
Animal.prototype.say = function(sound){
alert(this.type+ ",say:" + sound);
}
var An = new Animal();
An.say("hello");//animal,say:hello
function Cat(){};
Cat.prototype = new Animal();
Cat.prototype.type = "cat";
var blackCat = new Cat();
blackCat.say("hi");//cat,say:hi
ES6就很简洁了。
//ES6
class Animal {
constructor(){
this.type = "animal";
}
says(sound){
alert(this.type + ",says:" + sound)
}
}
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("hi") //cat,says:hi
constructor可以理解为构造方法，它里面声明的东西只能自己用，constructor以外的方法可以共用。
Class之间可以通过extends关键字实现继承。
子类继承父类的时候，在子类的constructor必须写super()。否则新建实例时会报错因为子类没有自己的this对象，而是继承父类的this对象。
arrow function箭头函数：
一门语言，肯定要有自己的函数，ES6的函数可是很大的革新，举个简单的例子。
//ES5
function(i){
return i + 1;
}
//ES6
(i) => i + 1
是不是简单的爆...
default默认值：
default顾名思义，默认值，省的我们经常需要用时||来赋值默认值了。
//ES5
function auto(name){
name = name || "uw3c"
console.log(name);
}
auto();
//ES6
function auto(name = "uw3c"){
console.log(name);
auto();
}
rest：
rest什么意思呢，之前写过一篇文章《JS函数没有形参如何使用数据》,
说的是在函数中没有形参怎么获取形参，在ES6里面有有类似的方法。
//ES5
function Fun1(){
var str = Fun1.arguments[0];
alert(str);//uw3c
}
Fun1("uw3c")
//ES6
function Fun2(...types){
var str = types[0];
alert(str);//uw3c
}
Fun2("uw3c")
import export：
话说我最近真的研究了一段时间的require.js，目的是可以引入文件，按需加载。在ES6中这点事儿基本不用require.js啦，直接上代码~
//a.js
var name="uw3c";
var echo=function(value){
console.log(value)
}
export {name,echo}
// b.js
import {name,echo} from "./a.js"
console.log(sex) // uw3c
echo(sex) // uw3c
export导出，import引入，上面是一个简单的例子，应该很容易理解。
