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

复制数组

 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')`
    })
  }
}