扩展运算符和rest运算符

最新推荐文章于 2023-08-31 13:16:54 发布

weixin_30483495

最新推荐文章于 2023-08-31 13:16:54 发布

阅读量147

点赞数

原文链接：http://www.cnblogs.com/jin-zhe/p/10034259.html

版权

扩展运算符

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

一、拆分数组

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

<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>