扩展运算符和rest运算符

扩展运算符

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

 

一、拆分数组

扩展运算符可以直接把数组拆分成用逗号隔开的值

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        val: [1, 2, 3]
      };
    },
    methods: {
      get() {
        // 之前的写法
        this.change(this.val[0], this.val[1], this.val[2]);
        console.log('-----');
        // 扩展运算符写法
        this.change(...this.val);
      },
      change(a, b, c) {
        console.log(a);
        console.log(b);
        console.log(c);
      }
    }
  };
</script>

 

 

二、数组深拷贝

可以使用扩展运算符特性进行数组的深拷贝

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        val: [1, 2, 3]
      };
    },
    methods: {
      get() {
        let arr1 = [1, 2, 3];
        let arr2 = arr1;
        let arr3 = [...arr1];
        console.log(arr1 === arr2);   // true, 说明arr和arr2指向同一个数组
        console.log(arr1 === arr3);   // false, 说明arr3和arr指向不同数组
      }
    }
  };
</script>

 

 

三、数组合并

扩展运算符可以进行数组的合并，把其他的东西合并成一个新的数组

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        val: [1, 2, 3]
      };
    },
    methods: {
      get() {
        let arr1 = [1, 2, 3];
        let arr2 = [...arr1, 4, 5, 6];
        console.log(arr2);
      }
    }
  };
</script>

 

 

四、字符串转数组

扩展运算符可以直接把字符串拆分用逗号分隔开的数组

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        val: [1, 2, 3]
      };
    },
    methods: {
      get() {
        let str = 'love';
        let arr = [...str];
        console.log(arr);
      }
    }
  };
</script>

 

 

rest运算符

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

 

一、直接合并成数组

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      get() {
        this.show(1, 2, 3, 4);
      },
      show(...val) {
        console.log(val);
      }
    }
  };
</script>

 

 

二、部分合并成数组

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      get() {
        this.bar(1, 2, 3, 4);
      },
      bar(a, ...b) {
        console.log(a);
        console.log(b);
      }
    }
  };
</script>

 

三、利用解构来合成数组

<template>
  <section class="p-10">
    <el-button type="danger" @click="get()">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      get() {
        let [a, ...b] = [1, 2, 3, 4];
        console.log(a);
        console.log(b);
      }
    }
  };
</script>

 

 

 

小结：

等号表达式是典型的赋值形式，函数传参和for循环的变量都是特殊形式的赋值。解构的原理是赋值的两边具有相同的结构，就可以正确取出数组或对象里面的元素或属性值，省略了使用下标逐个赋值的麻烦。

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

 

一点经验：

• 在调用第三方函数的时候，如果该函数接受多个参数，并且你要传入的实参为数组，则使用扩展运算符。可以避免使用下标形式传入参数。也可以避免很多人习惯的使用apply方法传入数组。
• rest运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免arguments对象的使用。

 

 

 

嗯，就酱~~

 

参考: http://www.cnblogs.com/chrischjh/p/4848934.html