阅读文本大概需要 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.」
关注、点赞、转发走一波
领取专属 10元无门槛券
私享最新 技术干货