...扩展运算符和rest运算符的区别?

… 扩展运算符

扩展运算符用三个点 … 来表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值

用法:

	var obj = function(a, b, c) {
          console.log(a);  // 1
          console.log(b);  // 2
          console.log(c);  // 3
        }
        var arr = [1, 2, 3];
        // 普通写法
        obj(arr[0], arr[1], arr[2]);
        //扩展运算符写法
        obj(...arr)

深拷贝和浅拷贝:
深拷贝: 把里面的内容一个一个的复制出来,开一个新的内存放进去,内存地址不一样,互不影响.(不改变的是深拷贝)

浅拷贝: 数组和对象直接等号赋值的通常是浅拷贝,一个发生变化,另外一个也会跟着改变,它只是指向另外一个地址.(发生改变的是浅拷贝)

深拷贝:
	对象
		var obj = {name:'张三'} //name: "张三"
	    var obj2 = {...obj}  // name: "张三"
        obj.name='李四'
        console.log(obj)  // name: "李四"
        console.log(obj2) // name: "张三"
	
	数组:
		 var arr = [1,2,3,4]  // [1, 2, 3, 4]
	    var arr2 = [...arr]  // [1, 2, 3, 4]
        arr[0] = 5
        console.log(arr) // [5, 2, 3, 4]
        console.log(arr2) //  [1, 2, 3, 4]

浅拷贝:
	对象
	var obj = {name:'张三'} //name: "张三"
	var obj2 = obj // name: "张三"
	obj.name='李四'
	console.log(obj)  // name: "李四"
	console.log(obj2) // name: "李四"

	数组
	 	var arr = [1,2,3,4]  // [1, 2, 3, 4]
	    var arr2 = arr  // [1, 2, 3, 4]
        arr[0] = 5
        console.log(arr) // [5, 2, 3, 4]
        console.log(arr2) //  [5, 2, 3, 4]

rest运算符

rest运算符也是三个点 … 表示,不过功能与扩展运算符恰恰相反,把逗号隔开的值序列组合成一个数组

		var bar = function(...args) {
           for(let el of args) {
               console.log(el); // 1，2，3，4
           }
        }

        bar(1, 2, 3, 4);

        bar = function(a, ...args) {
            console.log(a);    // 1
            console.log(args); // 2，3，4
        }

        bar(1, 2, 3, 4);

        // rest运算符配合解构使用

        var [a, ...rest] = [1, 2, 3, 4];

        console.log(a)    //1
        console.log(rest)  //2，3，4

扩展

扩展运算符: 在调用第三方函数的时候,如果该函数接收多个参数,并且你要传入的实参为数组,则使用扩展运算符,可以避免使用下标形式传入参数,也可以避免很多人习惯的使用 apply 方法传入数组.

rest运算符: rest 运算符使用场景应该稍小一些,主要是处理不定数量参数,可以避免 arguments 对象的使用

总结:

对于三个点号,三点放在形参或者等号左边为rest运算符,放在实参或者等号右边为 spread 运算符,或者说,放在被赋值一方为rest运算符,放在赋值一方为扩展运算符