ES6 新特性总结

阅读文本大概需要 7 分钟。

JavaScript 的标准 ECMAScript6 到目前为止已经得到广泛使用并被绝大数浏览器所支持，相比 ES5 ，ES6 增加了许多新特性，帮助开发者简化了许多操作，下面一起来看看这些新特性。

箭头函数

ES6 新增了用 => 来表示函数，在这之前，定义一个加法函数是这样子的

functionadd(x,y){

returnx + y;

}

而现在，可以省去 function 关键字，直接这样子写

let add =(x,y)=>returnx + y;

注意，如果箭头后面只有一句语句的话，可以省略 {}

let 与 const 关键字

也许你注意到了，上面这个 let 又是什么意思？它就是 ES6 新增的、用来替代 var 的关键字，let 与 var 的功能相同，都是定义声明变量，不同的是，let 声明的变量有一个块级作用域的概念，就是只有在当前的代码块下才能使用定义的这个变量;而 const 则是声明常量。

'use strict';

constx ='hello world';

x ='javascript';// Assignment to constant variable.

for(leti =; i

console.log(i);// 0 1 2 3 4

}

console.log(i);//错误，因为 i 只在它所在的代码块有效

字符串表示

新的 ES6 提供了操作字符串的简单方法，在这之前，连接字符串通常用 + 来表示，例如

vara ='hello world';

console.log('我写的第一句代码是 '+ a +' !');

ES6 提供了反引号$`来表示变量。

leta ='hello world';

console.log(`我写的第一句代码是$!`);//注意空格，也是有作用的

类的支持

ES6 新增了 class 关键字，有了类的概念，如果你熟悉 Java ，对类应该不陌生。创建一个类并实例化它也非常简单

classStudent{

//构造函数

constructor(name,grade) {

this.name = name;

this.grade = grade;

}

myGrade () {

console.log(this.name+'的成绩是 '+this.grade);

}

}

classProgrammerextendsStudent{

//调用 super 继承父类参数

constructor(name,grade){

super(name,grade);

}

key (){

console.log('I am a key man!');

}

}

varxiaoming =newStudent('xiaoming',86);

varxiaohong =newProgrammer()

xiaoming.myGrade();// xiaoming的成绩是 86

xiaohong.key();// I am a key man!

增强的对象

现在，定义对象字面量更加简单，可以直接定义原型，写方法不用使用 function 关键字

varbird = {

fly() {

console.log('I can fly !');

}

}；

varsmallBird = {

_proto_: bird,//设置原型为 bird，可以继承其方法

sing() {

console.log('I can sing a song');

}

}

for…of 循环

相比 for…in ,ES6 新引入的 for…of 循环可以只循环集合本身的元素。

varfruit = ['apple','orange','pear'];

// for...of

for(varioffruit) {

console.log(i);// apple orange pear

}

// for...in

for(variinfruit) {

console.log(i);// 0 1 2

}

解构

可以快速解析对应变量的对应参数,其中一个应用是可以快速交换变量

var[x,y,z] = [1,2,6];

console.log('x='+x+',y='+y+',z='+z);// x=1,y=2,z=6

//交换变量

varx =1;

vary =2;

[x,y] = [y,x];

console.log(x,y);// 2 1

关键字 argument

ES6 引入了 rest 参数来获得除定义外的参数

functionfoo(a,b,...rest){

console.log(rest);

}

foo(5,6,7,8,9,10,15);// (5) [7, 8, 9, 10, 15]

generator(生成器)

新引入的数据类型，与函数的使用类似，可以通过返回多次。通过定义，调用的时候不像普通函数那样调用，而是要通过对象的方法，执行到语句的时候，就返回一个对象,直到时结束程序。

function* odd(num) {

var n =;

while(n

if(n %2!=){

yieldn;

}

n++;

}

}

var f = odd(10);//找10以内的奇数

f.next();//{value:1,done:false}

f.next();//{value:3,done:false}

f.next();//{value:5,done:false}

f.next();//{value:7,done:false}

f.next();//{value:9,done:false}

f.next();//{value:undefined,done:true}

Iterable

新的数据类型，Array、Map 和 Set 都属于 iterable 类型，iterable 内置的方法可以更加方便地遍历数组。

vararr = ['apple','pear','orange'];

arr.forEach(i=>console.log(i) );// apple pear orange

Promise 对象

Promise 对象是为了解决回调函数代码冗杂问题，它支持链式操作，可在实现同样操作的情况下让代码更加得简洁

//声明一个 Promise 对象

letpromise =newPromise((resolve,reject) =>{

if(success){

resolve('success');

}else{

reject(error);

}

} ).then(data=>{// then方法成功后的回调

console.log(data);

} ).catch(err=>{// catch方法统一捕获错误在进行处理

console.log(err);

} )

「Stay hungry，stay foolish.」

关注、点赞、转发走一波