使用es6简化代码

es6简化代码。

块作用域

使用 var :

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000)
}
// 5 5 5 5 5

使用 let :

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000)
}
// 0 1 2 3 4

es5使用闭包可以实现块作用域的效果。

解构

使用解构简化变量声明和赋值

// es5
let a = 1;
let b = 2;
let c = 3;

// es6
let [a, b, c] = [1, 2, 3];

使用解构交换变量

// es5
let a = 1;
let b = 2;
let tmp;
tmp = a;
a = b;
b = tmp;

// es6
let a = 1;
let b = 2;
[a, b] = [b, a]

使用对象解构给对象赋值

let obj = {
    x: 1,
    y: 2,
    c: 1
}
let {
    x,
    y
} = obj;

字符串解构

let [a, b, c, d, e] = 'hello';

函数参数解构

const PERSON = {
    name: 'Mason',
    age: 22,
}

function getAge({
    name,
    age
}) {
    return `${name}今年${age}岁`
}

getAge(PERSON);

箭头函数

箭头函数内部 this 指向定义时所在对象且固定不变。

// es5
var func(param) {
    return ret;
}

// es6, 没参数
var func = () => ret

// es6, 单个参数
var func = param => ret

// es6, 多个参数
var func = (param1, param2) => ret

模板字符串

用于在字符串中嵌入变量。

const NAME = 'Mason';
const AGE = 22;
const SELF_STATEMENT = `My name is ${NAME}, 今年${AGE}岁`;

展开符

... 变量名 用于获取函数的多余参数可以代替 arguments 对象。
... 变量名 可以将一个数组转化为用逗号隔开的参数序列 param1, param2, ...paramN

用展开符合并数组：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2];

用展开符取得对象中的属性和方法并拷贝到新对象中，只能对基本数据类型拷贝，如果成员含有引用类型则为浅拷贝。

let obj1 = {
    name: 'Mason',
    age: 22
};

let obj2 = {
    ...obj1
};

对象字面量简写

let name = 'Mason';
let age = 22;

let person = {
    name,
    age,
    printName() {
        console.log(this.name);
    }
};

数组的 includes() 判断数组中是否存在给定值

可以判断是否含有 NaN

[1, 2, 3].includes(2);
// true

[1, 2, 3].includes(4);
// false

[1, 2, 3, NaN].includes(NaN);
// true

[1, 2, 3].includes(NaN);
// false

async/await 异步语法

async function getData(url) {
    let response = await fetch(url);
    let html = await response.text();
    return html.match(/<title>([sS]+)</title > /i)[1] 
}

getData(url).then(res) => console.log('success!');

上面代码的执行顺序是：先执行 getData() 里面的三个操作，等待三个操作全部执行完毕再执行 then() 中的语句。