zoukankan      html  css  js  c++  java
  • 扩展运算符和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

  • 相关阅读:
    461. Hamming Distance
    342. Power of Four
    326. Power of Three
    368. Largest Divisible Subset java solutions
    95. Unique Binary Search Trees II java solutions
    303. Range Sum Query
    160. Intersection of Two Linked Lists java solutions
    88. Merge Sorted Array java solutions
    67. Add Binary java solutions
    14. Longest Common Prefix java solutions
  • 原文地址:https://www.cnblogs.com/jin-zhe/p/10034259.html
Copyright © 2011-2022 走看看