ES6 在日常工作中的运用

ES6实战

const let,模板字符串比较简单

函数

• 函数默认值

// ES5
function action(num) {
        num = num || 200 // ?? num传入为0的时候就是false， 此时num = 200 
        //当传入num时，num为传入的值
        //当没传入参数时，num即有了默认值200
        return num
}

// ES6
 function action(num = 200) {
    console.log(num)
 }
 action() //200
 action(300) //300

复制代码

• 箭头函数(函数表达式 --> 箭头函数)

当前 ES5 代码中，在使用了函数表达式的时候，你必须小心处理 this。
我会在下面的示例中创建一个 _this(A 行) 作为辅助变量，
这样在 B 行才可能访问到指向 UiComponent 对象的 this。
// ES5
function UiComponent() {
    var _this = this; // (A)
    var button = document.getElementById('myButton');
    button.addEventListener('click', function () {
        console.log('CLICK');
        _this.handleClick(); // (B)
    });
}
UiComponent.prototype.handleClick = function () {
    ···
};

// ES6
function UiComponent() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', () => {
        console.log('CLICK');
        this.handleClick(); // (A)
    });
}

处理只返回某个表达式的简短回调
// ES5
var arr = [1, 2, 3];
var squares = arr.map(function (x) { return x * x });

// ES6
const arr = [1, 2, 3];
const squares = arr.map(x => x * x);
在定义参数的时候，如果只有一个参数，你可以省略掉括号。
像 (x) => x * x 和 x => x * x 都可以。
复制代码

• 处理多个返回值 (解构)

有一些函数或者方便会通过数组或对象返回多个值。
在 ES5 中，你需要创建一个临时变量来访问那些值。
但在 ES6 中你可以使用解构。
// ES5
var matchObj =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');
var year = matchObj[1];
var month = matchObj[2];
var day = matchObj[3];

// ES6
const [, year, month, day] =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');
数组样板最开始空了一个位置，这是用来跳过第 0 个数组元素的。
复制代码

• 从 arguments 到剩余参数

// ES5
function logAllArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

// ES6
function logAllArguments(...args) {
    for (const arg of args) {
        console.log(arg);
    }
}

// 有一部分固定参数，有一部分剩余参数
function format(pattern, ...args) {
    ···
}
复制代码

• 拓展的对象功能

对象初始化简写
ES5我们对于对象都是以键值对的形式书写，是有可能出现key/value对重名的。
例如：
function people(name, age) {
    return {
        name: name,
        age: age
    };
}

// ES6 可以这样写
function people(name, age) {
    return {
        name,
        age
    };
}

对象字面量方法的赋值
ES6 同样改进了为对象字面量方法赋值的语法。
// ES5为对象添加方法：
const people = {
    name: 'lux',
    getName: function() {
        console.log(this.name)
    }
}

// ES6
const people = {
 name: 'lux',
 getName () {
     console.log(this.name)
 }
}

复制代码

• Spread Operator 展开运算符 就是 ...三个点运算符

连接合并数组和对象
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]

//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
// Rest运算 （获取数组 or 对象 除了某项的其它项）
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5

// 对象
const user = {
    username: 'lux',
    gender: 'female',
    age: 19,
    address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

拷贝数组
拷贝数组是个常见的任务，过去我们使用  Array.prototype.slice
来完成，但现在我们可以通过展开运算符得到数组的副本：

var arr = [1,2,3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4)

对象解构
解构操作在变量批量赋值上非常方便，省去了繁琐的声明和赋值操作。配合使用展开运算符，进一步简化操作：
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
复制代码

参考

Airbnb规范