拓展运算符的使用

一,函数的rest参数/剩余参数获取

当函数的形参与实参不对等: ES5:arguments

        function fn() {
            console.log(arguments);
        }
        fn(1, 2, 3, 4)

arguments 传进来的参数集合 是个伪数组 有数组长度没有数组方法

 

ES6中解决形参实参不对等的方法

rest参数是一个真数组,可以使用数组方法

重点是...(这三个点才是关键语法),rest只是一个名称而已

         function fn2(...rest) {
          rest.forEach(function(item) {
             console.log(item);
           })
         }
         fn2(1, 2, 3, 4)

 

2.可以获取剩余参数

使用...c出来接收剩余参数(当只需要a与b时就可以使用..c来接收掉多余的参数)

错误示例: function fn3(a, b, ...c,d)不可以这样写

rest参数必须要是最后一个参数,否则会报错

        function fn3(a, b, ...c) {
            console.log(a, b, c);
        }
        fn3(1, 2, 3, 4, 5, 6)

 

制作一个不管传多少个参都可以计算总和的计算器

        function add(...rest) {
            var sum = 0;
            rest.forEach(function(item) {
                sum += item
            })
            return sum
        }
        console.log(add(1, 2, 3, 4, 5, 6));

 

二,拓展运算符的使用

拓展运算符:用于快速展开数组或者对象,将数组或者对象中的值一个一个的拿出来单独使用

注意点:拓展运算符,和rest参数有点像.但是不是一回事

 

1.拓展运算符展开数组 ...arr

        let arr = [10, 20, 30]
        console.log(...arr);

相当于 打印了(arr[0],arr[1],arr[2])

 

数中的每个值都可以作为方法的参数使用

ES5中打印最大值需要再输入值进Math.max

        console.log(Math.max(1, 65, 101, 13, 22, 8));//101

ES6中可以使用...arr直接获取arr这个数组中的值(即可做到上方相同的效果

        var arr = [1, 65, 101, 13, 22, 8]
        console.log(Math.max(...arr));//101

 

数组合并,但不改变原数组

        let arr = [10, 20, 30]
        let arr1 = [40, 50, 60]
        let NewArr = [...arr, ...arr1];
        console.log(NewArr);//10 20 30 40 50 60

两个原来的数组拼接新的成新的数组

并且原来的两个旧数组并不会被改变其中的值

 

就算改变新的数组的值,也不会对原来的旧数组产生变化

          NewArr[0] = 100
          console.log(NewArr);//100 20 30 40 50 60
          console.log(arr);//依旧是 10,20 30

 

2.拓展运算符对象合并

注意点:对象的key值不可以重复出现,后方的对象会覆盖前方对象中同名的值

        let obj1 = {
                name: "张三",
                age: 20},
            obj2 = {
                name: "李四",
                gander: "男",
                email: "zhangsan1998@163.com"}
        let NewArr2 = {
            ...obj1,
            ...obj2,  };
        console.log(NewArr2);
       //"李四" "男" "zhangsan1998@163.com"

 

3.拓展运算符在解构赋值中的使用

拓展运算符的用法

• 可以合并对象 合并数组

• 在解构赋值中使用,拓展运算符可以获取数组或字符串中剩余的值

数组的值

        let [a, b, c, ...d] = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
        console.log(a, b, c, d); //10,20,30 
        //d的参数接收了除abc以外的所有参数

字符串的值

        let str = "张三家住天河区"
        let [a, b, c, ...d] = str
        console.log(a, b, c, d); //张 三 家 ["住" , "天" , "河" , "区"]

 

三,ES6的对象合并方法 ...rest合并

...rest合并方法不会对原元素产生变化

原理就是创造新对象并接收合并的对象的值

        let obj = {
                name: "张三",
                age: 80,
                gender:"男"},
           obj1 = {
                name: "李四",
                age: 25,
                email: "lisi1987@163.com"}
        let NewObj = {...obj,...obj1}
        console.log(NewObj);  //创建了一个新对象  name: "李四",  age: 25, 
                              //gender:"男",  email: "lisi1987@163.com"
        console.log(obj);     //此时的原对象还是 name:张三" ,age:80
        console.log(obj1);    // name:李四" , age:25 , email: "lisi1987@163.com"

 

四,ES6的对象合并方法 object.assign

assign可以做对象合并,将第二个对象的参数融合进第一个参数内部

原理:把从第二个开始的对象的值全部合并进第一个对象中,重复的key值产生替换

注意点:一定会改变第一个对象的参数

        let obj = {
                name: "张三",
                age: 80,
                gender:"男"},
           obj1 = {
                name: "李四",
                age: 25,
                email: "lisi1987@163.com"}
       let NewObj = Object.assign(obj, obj1);
        console.log(NewObj);  //创建了一个新对象  name: "李四",  age: 25, 
                              //gender:"男",  email: "lisi1987@163.com"
        console.log(obj);     //此时的原对象已经被后方对象所合并了
                              //name: "李四", ,age:25, gender:"男",email: "lisi1987@163.com"

 

如何让第一个参数的值不会被变化

在第一个值前方放入一个空字符作为缓存的中介就可以使得obj内的参数不被改变掉了

        let NewObj = Object.assign({}, obj, obj1);