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();

程序员小潘

发布了100 篇原创文章 · 获赞 23 · 访问量 9万+

私信关注

ES6新特性学习笔记

变量

var