ES6基本的语法(三) 扩展运算符

扩展运算符

扩展运算符具备两个功能，一个 spreed 展开功能 & rest 收集功能。ES6可以处理数组，ES7能处理对象。

扩展运算符的使用

function sum(...arg){
    console.log(arg); // 输出 [5,2,7,1,3,8]
}
sum(5,2,7,1,3,8);

function sum(a,b,...arg){
    console.log(a,b) // 输出5,2
    console.log(arg); // 输出 [7,1,3,8]
}
sum(5,2,7,1,3,8);

function sum(a,...arg,b){
    console.log(arg); // 报错: 扩展运算符的参数必须是最后一个
}
sum(5,2,7,1,3,8);

let a = [1,2,3,4,5];
let b = [6,7,8,9];
let c = [...a,...b]; // 可以拼接数组

我们先写一个 ES5 中不定参的例子，下面的例子中，sum 函数在被调用的过程中传的参数是不固定的

function sum (){

}
sum(1,2,3);
sum(1,2,3,4,5)

这种在 ES5 中遇到这种问题我们一般会用 arguments 去解决，

function sum (){
    let sumNumber = 0;
    for (let i = 0; i < arguments.length; i++){
        sumNumber += arguments[i];
    };
    return sumNumber;
}
sum(1,2,3);
sum(1,2,3,4,5)

这么写看上去还好，但是如果你要在函数中写排序和出去最大值最小值。

function sum (){
    let sumNumber = 0;
    let arg = [].slice.call(arguments);
    arg.sort();
    arg.pop();
    agr.shift()
    for (let i = 0; i < agr.length; i++){
        sumNumber += arguments[i];
    };
    return sumNumber;
}
sum(5,2,7,1,3,8);

代码没有问题，但是比较麻烦，如果用扩展运算符

function sum(...arg){
    let sumNumber = 0;
    // 因为本身 arg 就是数组所以不用在转成数组
    arg.sort();
    arg.pop();
    agr.shift()
    arg.forEach(function(ele){
        sumNumber += ele
    })
    console.log(sumNumber);
}
sum(5,2,7,1,3,8);

ES7 中的的扩展运算符

ES7 扩展运算符处理对象

let company = {
    name: 'chengcheng',
    age: 18
}

let b = {
    c:{
        name: 'haha',
        age: 50
    },
    d: 30
}

let obj = {
    ...company,
    ...b
}

完成了一个浅克隆。

可以用通过 ES6 新增的方法 assign 去实现一个深克隆 Object.assign(target, ...sources)