ES6, 全称 ECMAScript 6.0,弥补了ES5的不足,新增了大量的语法糖,可以使代码编写更简洁。
变量
var
ES6之前声明变量用var,如下:
var name = 'admin';
缺点:
- 可以重复声明
- 没有块级作用域(作用域太大)
- 不能限制
JS是弱类型语言,对变量不能起到很好的限制,导致天生不适合用来构建大型项目。
ES6弥补了var的不足,增加了两个声明变量的关键字。
let和const
用法和var一样,如下:
let name = 'admin';
const age = 18;
和var的区别:
- 不允许重复声明
- 支持块级作用域
let和const区别:
- let声明的是变量,可以修改。
- const声明的是常量,不允许二次赋值。(可以理解为Java中的final)
解构赋值
解构赋值是对赋值运算符的扩展。
解构对象
ES6之前获取对象的属性:
let person = {
name:'lisa',
age:18
};
let name = person.name;
let age = person.age;
console.log(name, age);
ES6:
let person = {
name:'lisa',
age:18
};
let {name, age} = person;
console.log(name, age);
解构数组
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);
解构字符串
let [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e);
输出:h e l l o
剩余参数
ES6使用…来作为标记,存放剩余参数,如下:
var func = function (a,b,...arr) {
console.log(a,b,arr);
}
func(1, 2, 3, 4, 5, 6);
输出:1 2 [3,4,5,6]
数组展开
…的另一个作用是将数组展开,如下:
const func = function(a,b,c){
return a + b + c;
}
let arr = [1, 2, 3];
let result = func(...arr);
console.log(result);
输出:6
箭头函数
ES6之前定义函数:
var addOne = function (a) {
return a + 1;
}
ES6可以这么写:
const addOne = (a)=>{
return a + 1;
}
- 有且仅有一个参数,()可以省略
- 有且仅有一条语句,{}可以省略
所以还可以简写为:
const addOne = a => a + 1;
箭头函数的另一个好处是,修复了this指向的问题。
系统对象
Array
ES6对Array进行了一些扩展增强。
map
一对一,将元素映射为另一个元素。
let arr = [1, 2, 3, 4, 5];
let mapArr = arr.map(i => i%2==0?'偶数':'奇数');
console.log(mapArr);
输出:[奇数,偶数,奇数,偶数,奇数]
forEach
迭代数组。
let arr = [1, 2, 3, 4, 5];
arr.forEach(i => console.log(i));
输出:1 2 3 4 5
filter
过滤,遍历所有元素进行计算,根据结果返回true留下,false则过滤。
let arr = [1, 2, 3, 4, 5];
let filter = arr.filter(i => i % 2 == 0);
console.log(filter);
输出:2 4
reduce
遍历每一个元素进行计算,最终得到一个结果。
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((tmp, item)=>{
//tmp 计算的临时值
return tmp + item;
});
console.log(sum);
输出:15
String
支持字符串模板,解决了字符串和变量拼接麻烦的问题,使用反引号标记。
let name = 'admin';
let age = 18;
console.log(`我叫${name},今年${age}岁。`)
输出:我叫admin,今年18岁。
异步处理
Promise
Promise是一个对象,对异步操作进行了统一的封装。
const p = new Promise((resolve,reject)=>{
if (Boolean(Math.round(Math.random()))) {
//执行成功
resolve('success');
}else {
//执行失败
reject('error');
}
});
p.then(res => console.log(res))
.catch(res => console.error(res));
//随机的输出success和error
Promise只是统一封装了异步操作,实际的resolve和reject逻辑需要自己实现。
async、await
async用来修饰函数,表示函数内会进行异步运算,await用来等待异步运算。
例如:获取ajax异步获取的数据。
data1.json
{"name": "Lisa"}
//修饰为异步函数
const func = async ()=>{
//await 等待获取结果
let data = await $.ajax({
url:'data/1.json',
dataType:'json'
});
console.log(data);
//{name: "Lisa"}
};
func();