js中es6扩展运算符和剩余参数的用法

一. 剩余参数（…rest）

作用：将一个不定数量的参数表示为一个数组（旨在取代arguments）
首先，我们看看arguments

function show(){
    return arguments;
}
console.log(show(1,2,3,4));// [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

arguments是一个类数组对象，表示输入的所有实参，但没法直接使用Array的方法。
console.log(show(1,2,3,4).sort());// TypeError: show(…).sort is not a function
转换arguments为数组

// Array.from()
console.log(Array.from(show(1,2,3,4)));// [1,2,3,4]
// Array.prototype.slice.call()
console.log(Array.prototype.slice.call(show(1,2,3,4)));// [1,2,3,4]

接下来，看看剩余参数是什么

function show(...args){
    return args;
}
console.log(show(1,2,3,4));// [1,2,3,4]

剩余参数居然是一个真正的数组，而且看起来作用和arguments一样，那有什么不同或者是改进呢？来看下一个例子

function show(a,...args){
    return args;
}
console.log(show(1,2,3,4));// [2,3,4]

估计大家都猜到了，剩余参数顾名思义就是剩下的参数，指没有对应形参的实参（也就是没显式命名的那些参数），上一个例子中…args对应的是后面三个参数。
总结：剩余参数可以看做是arguments的升级版，直接返回一个数组，可以更方便使用数组的方法来操作参数。
同时，配合ES6的解构赋值可以方便取参

function show(a,...[b,c,d]){
    return b + c + d;
}
console.log(show(1,2,3,4));// 9

二. 扩展运算符（…）

原理：遍历数组或对象内的可枚举元素，并展开。
例子1：展开字符串，返回数组

let arr1 = [...'hello'];
console.log(arr1);// [ 'h', 'e', 'l', 'l', 'o' ]
// 等价于
let arr2 =  'hello'.split('');
console.log(arr2);// [ 'h', 'e', 'l', 'l', 'o' ]

例子2：合并数组或对象

// 合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
console.log([...arr1,...arr2]);// [ 1, 2, 3, 4, 5, 6 ]
// 等价于
console.log(arr1.concat(arr2));// [ 1, 2, 3, 4, 5, 6 ]

// 合并对象
let obj1 = {name:'tom'};
let obj2 = {age:21};
console.log({...obj1,...obj2});// { name: 'tom', age: 21 }
// 等价于
console.log(Object.assign(obj1,obj2));// { name: 'tom', age: 21 }

例子3：函数传参

function sum(a,b,c){
    return a + b + c;
}
let arr = [1,2,3];
console.log(sum(...arr));

例子4：解构赋值

let [first,...arr] = [1,2,3,4,5];
console.log(arr);// [2,3,4,5]

例子5：转Set结构为数组(用于数组去重)

let arr = [1,2,2,'a','a'];
let result = [...new Set(arr)];
console.log(result);// [ 1, 2, 'a' ]

例子6：替代apply

let max1 = Math.max.apply(null,[1,2,3,4]);
// 等价于
let max2 = Math.max(...[1,2,3,4]);

// 等价于
let max3 = Math.max(1,2,3,4);
console.log(max1);// 4
console.log(max2);// 4
console.log(max3);// 4

三、加强理解：

1. 扩展运算符(spread)
   扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值

   //demo 1  传递数据代替多个字符串的形式
     function  test(a,b,c){
         console.log(a);
         console.log(b);
         console.log(c);
     }

     var arr = [1, 2, 3];
     test(...arr);//输出  1 2 3
     
    

     //demo2 将一个数组插入到另一个数据中
     var arr1 = [1, 2, 3,4];
     var arr2 = [...arr1, 4, 5, 6];
     console.log(arr2); //输出数组[1,2,3,4,4,5,6]


     //demo3  字符串转数据
     var str='loycoder';
     var arr3= [...str];
     console.log(arr3); //输出 ['l','o','y','c','o','d','e','r']

2.剩余运算符(rest)
rest运算符用三个点号表示，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

  //demo4  当函数参数个数不确定时，用 rest运算符
    function rest01(...arr) {
        for (let item of arr) {
            console.log(item);
        }
    }
    rest01(1, 3, 5);//输出  1  2  3

    //demo5 当函数参数个数不确定时的第二种情况
    function rest02(item, ...arr) {
        console.log(item);
        console.log(arr);
    }
    rest02(1, 2, 34);//输出 1 [2,34]

    //demo6 rest运算符配合 解构使用：
    var [a,...temp]=[1, 2, 4];
    console.log(a); //输出  1
    console.log(temp); //输出 [2,4]

四、形式辨别：

当三个点 ( … )在等号左边，或者放在形参上。为 rest 运算符（剩余参数） 。

 let str1 = "123"
 let [str2, ...str3] = str1;
 console.log(str2) // 2  数值
 console.log(str3) // [2,3]  数组
 
 function fn(...arg){
 consolog(arg) // [1,2,3]  数组
}
fn(1,2,3)

当三个在等号右边，或者放在实参上，是 spread运算符(扩展运算符)。

let abc = [1,2,3];
let bbc = [...abc];
console.log(bbc) //1 2 3 数值
let ddc = [9,5,2,7];
function fn(a,b,c,d){
	console.log(a)   //9
	console.log(b)   //5
	console.log(c)   //2
	console.log(d)   //7
}
fn(...ddc)

或者：放在被赋值一方是rest 运算符。 放在赋值一方式 spread运算符。

五、 扩展运算符和剩余参数的概括:

• 扩展运算符：

  • 能把整体展开成个体，常用于函数调用，数组或字符串处理等。

• 剩余参数：

  • 把个体合并成整体常用于函数声明，解构参数等

上述的整体指的可能是数组，字符串或类数组对象等
上述的个体指的可能是字符，数组的元素或函数的参数等