扩展运算符的基本使用结合vuex使用扩展运算符

最新推荐文章于 2025-07-02 15:48:49 发布

原创最新推荐文章于 2025-07-02 15:48:49 发布 · 446 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

初级vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

JS 基础知识

2 篇文章

订阅专栏

本文介绍了JavaScript中扩展运算符的用法，如复制数组、对象，合并数组和对象，以及在函数调用中的应用。同时，讲解了Vuex中如何结合扩展运算符使用mapState、mapActions等，实现状态管理和组件间的通信。

复制数组

 const arr = new Array(1,2,3,4,5,6,7,8,9)
 const arr2 = [...arr]

 console.log(arr2);//[1,2,3,4,5,6,7,8,9]

复制对象

const object = new Object({name:"古月",age:18,sex:"男"})
const object2 = {...object}

console.log(object2);//{ name: '古月', age: 18, sex: '男' }

合并数组

合并数组需要注意的点是这个只是把多个数组进行拼接不会对数组进行任何操作
需要进行去重的话可以使用Set数据结构

const arr = [1,2,3,4,5,6]
const arr2 = [3,4,5,6,7,9]

const arr3 = [...arr,...arr2]
console.log(arr3);//[1, 2, 3, 4, 5,6, 3, 4, 5, 6,7, 9]

合并对象

合并对象需要注意的相同的key第一个的值会被第二个覆盖

const object = new Object({name:"古",age:18,sex:"男"})
const object2 = new Object({name:"月",age:17,sex:"女",class:"高二三班"})
const object3 = {...object,...object2}
console.log(object3);//{ name: '月', age: 17, sex: '女', class: '高二三班' }

可以给函数赋值

function add (x,y){
    return x+y
}
const arr = [1,2]
console.log(add(...arr));//3

当扩展运算符的个数大于需要传入的个数的时候后面的值会失效

const arr2 = [1,2,3,4,5]
console.log(add(...arr2));//3

可以将字符转成数组

const message = "abcdefghujk"
const arr = [...message]
console.log(arr);//['a', 'b', 'c', 'd','e', 'f', 'g', 'h','u', 'j', 'k']

最后的重点：vuex导入结合扩展运算符的使用 …mapState,…mapActions,…mapMutations ,…mapGetters这些功能都是一样的

import { mapState,mapActions,mapGetters,mapMutations} from "vuex";
export default {
  // ...
  methods: {
       //下述中的 ... 是拓展运算符
       // 使用 [] 是解构赋值
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
 
      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}