擴展運算符和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