ES6 (Es2015) 的新特性光速之旅
简介
ES6, 全称ECMAScript 6.0, 是JaveScript的下一个版本标准, 2015.06发版.
ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现
使用目的
提供了大量复杂度不同的特性, 来满足不同复杂程度的应用开发.
主要的新特性
-
变量与常量
es5 的写法
var a = 10;
var a = 15;
var b = 20;
b = 16;
-----------------------------------
//有三个按钮绑定点击事件点击，依次弹出1,2,3
window.onload = function(){
var oBtn = document.getElementsByTagName('button');
for(var i =0; i < oBtn.length;i++){
oBtn[i].addEventListener('click',function(){
alert(i); // 3,3,3
})
}
}
//解决办法: 加立即执行函数
window.onload = function () {
var oBtn = document.getElementsByTagName('button');
for (var i = 0; i < oBtn.length; i++) {
(function (i) {
oBtn[i].addEventListener('click', function () {
alert(i); //0,1,2
})
})(i);
}
}
es6的写法
let a = 10;
let a = 15;//error
let b = 11;
b = 22;//22
const c = 20;
const c = 25; //error
const d = 30;
d = 35; //16
-----------------------------------
window.onload = function(){
var oBtn = document.getElementsByTagName('button');
for(let i =0; i < oBtn.length;i++){
oBtn[i].addEventListener('click',function(){
alert(i); // 0,1,2
})
}
}
小结
-
var 可以重复声明,无限次修改,没有作用域
-
let 不能重复声明,变量可以修改值,有作用域
-
const 不能重复声明,常量不可以修改值,有作用域
-
解构赋值
let [a,b] = [1,2];
console.log(a,b); //1,2
let [a,b];
[a,b] = [1,2]; //error
let {name,age,job} = {name:"bobocode",age:23,job:'web'}
console.log(name,age,job); // bobocode 23 web
let [{a,b},[arr]] = [{a:'testa',b:'testb'},[1,2,3]];
console.log(a,b,arr); // testa testb [1, 2, 3]
let arr1 = [1,2,3];
let arr2 = [5,6,7];
let newArr = [...arr1,...arr2];
console.log(newArr); //[1, 2, 3, 5, 6, 7]
小结
- 解构赋值声明和赋值不能分开写
- 解构赋值等号左右两边的结构必须相同
- 解构赋值右边必须是有意义的结构(arr,json等)
-
数组新方法
// map(映射)
[1,2,3,4].map(function(item){
console.log(item*2); //1,4,9,16
});
// reduce(总和)
[1,2,3,4].reduce(function(temp,value,index){
return temp+ value; //10
})
// fliter(过滤)
[1,2,4,8,9].filter(function(item){
return item % 2 == 0; // 2,4,8
})
// forEach(迭代)
[3,51,34,53].forEach(function(item,index){
console.log(item+","+index);//3,0 51,1 34,2 53,3
})
-
箭头函数
es5 的写法
function Test(a,b){
return a + b;
}
function Test(c){
return c*c;
}
es6的写法
(a,b)=>{a+b}
c=>{c*c}
小结
- 函数只有一个参数,() 可以省略
- 函数返回语句只有一个,{} 可以省略
-
模板字符串
es5 的写法
// 字符串拼装
var text = 'hello';
var div = '<div><ul>\
<li>'+text+'</li>\
</ul></div>';
es6的写法
// 字符串模板
let text = 'hello';
let div =`<div>
<ul>
<li>${text}</li>
</ul>
</div>`
// 新的方法
//startWith()
"http://www.baidu.com".startsWith('http'); //true
//endsWith()
"js/index.js".endsWith('.js'); //true
-
面向对象class
es5 的写法
var Person = function(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showInfo = function(){
console.log(this.name + ","+ this.age);
}
var p = new Person('bb',12)
p.showInfo() //bb,12
// es5继承的写法
var Student = function(name,age,score){
Person.call(this,name,age);
this.score = score;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
Student.prototype.showScore= function(){
console.log(this.name + ","+ this.age +","+ this.score);
}
var s = new Student('bb',12,98);
s.showScore() //bb,12,98
es6 的写法
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showInfo(){
console.log(this.name + ","+ this.age);
}
}
var p = new Person('bb',12)
p.showInfo() //bb,12
// es6继承的写法
class Student extends Person{
constructor(name,age,score){
super(name,age,score);
this.score = score;
}
showScore(){
console.log(this.name + ","+ this.age +","+ this.score);
}
}
var s = new Student('bb',12,98);
s.showScore() //
bb,12,98
-
Promise
// 发送一个ajax请求（jquery3版本之前的写法，版本3ajax内嵌promise语法）
var p = new Promise(function(resolve,reject){
$ajax({
url: '',
dataType: 'json',
success(){
resolve();
},
error(){
reject();
}
});
});
let result = p.then(function(data){
console.log('success'+data);
},function(err){
console.log('error'+err);
})
-----------------------------------
// Promise.all 的使用
function createPromise(urls){
reutrn new Promise(function(resolve,reject){
$ajax({
urls //key 和 value 相同,可以省略
dataType: 'json',
success(){
resolve();
},
error(){
reject();
}
});
});
}
Promise.all([
createPromise('data/test.txt'),
createPromise('data/test2.txt')
]).then(function(arr){
let [res1,res2] = arr;
console.log('success'+res1);
console.log(''+res2);
},function(err){
console.log('error'+err);
})
-
generator
// 标准的生成器写法
let a = 'a';
let b = 'b';
function *test(){
console.log(a);
yield;
console.log(b);
}
let res = test();
res.next(); // 'a'
res.next(); // 'b'
-----------------------------------
// yeild 带参数的
let a = 'a';
let b = 'b';
function *test(){
console.log(a);
b = yield;
console.log(b);
}
let res = test();
res.next(11); //a
res.next(3); //3
//{value: undefined, done: true} 没返回值
-----------------------------------
// yeild 带返回值的
let a = 'a';
let b = 'b';
let c = 'c';
function *test(){
console.log(a);
b = yield;
console.log(b);
c = yield;
console.log(c);
return 5;
}
let res = test();
res.next(11); //a
res.next(3); //3
res.next(2); //2
//{value: 5, done: true} 返回值是5
-
async/await(Es7)
// yield-runner-blue 库的使用
//http 请求中用
runner(function *(){ //不可以用箭头函数
let arr1 = yield $ajax({url:'1.txt'.dataType:'json'});
console.log(arr1);
let arr2 = yield $ajax({url:'2.txt'.dataType:'json'});
console.log(arr2);
console.log('read over');
});
//async/await的使用
官方的runner版本 (去掉*,可以用箭头函数,yield 换成 await)
((async)=>{
let arr1 = await $ajax({url:'1.txt'.dataType:'json'});
console.log(arr1);
let arr2 = await $ajax({url:'2.txt'.dataType:'json'});
console.log(arr2);
console.log('read over');
})();
-
模块化
- 民间的 sea.js(CMD ), require.js(AMD)
- node.js
- Es6 模块化
作用
- 解决文件依赖
- 按需引用
//新建index.html 引入sea.js,新建test.js
//test.js
define(function(require,exports,module){
//var other = require('a.js'); 其他依赖模块
exports.a = 23; //单个导出
module.exports ={ //批量导出
b:12,
c:22,
show(b,c){
console.log(b+c);
};
}
});
//index.html
sea.use(['test.js'],function(mod){
console.log(mod.a);//23
mod.show();//34
})
总结
Es6的新特性使代码更加简明易懂,，加快了编码效率，让编码更加规整。