...展开运算符的使用场景及其运用

解构赋值

1.1

数组的解构赋值

const [a1, a2, ...a3] = ['a', 'b', 'c', 'd']
console.log(a1, a2, a3); //a b [ 'c', 'd' ]

数组中按顺序匹配，将’a’赋值给a1，'b’赋值给a2，剩下的元素以数组形式赋值给展开运算符作用的变量

1.2 对象的解构赋值
对象的解构赋值也是比较简单

let obj = {
  a: 111111，

> 这里是引用 

  b: 222222,
  c: 333333,
  d: 444444,
  f: 555555
}
const { a, ...msg } = obj
//名字必须相同 也就是  必须是 a
console.log(a);
console.log(msg);
// 111111   { b: 222222, c: 333333, d: 444444, f: 555555 }

在这里面想到了一个人问题啊！ 这个对象的解构赋值是深拷贝 / 浅拷贝 呢？ （于是我做了如下实验）

let state = {a: {a1: 1, a2: 2}, b: 2}
let state2 = { ...state }
//将 state2拷贝过来的值改成5
state2.a.a1 = 5;
 state.a.a1 === 5 // true

实验结果显示 ： 对于简单数据类型为深拷贝，对于复杂数据类型来说为浅拷贝。

（深拷贝可用递归实现 / JSON.parse(JSON.stringify（目标对象) ）

二. 拼接数组 ，对象

2.1 数组的合并

let arr1 = [1, 2, 3, 4]
let arr2 = [5, 6, 7, 8]
let arr = [...arr1, ...arr2]
console.log(arr);
console.log(...arr);
// [1, 2, 3, 4,5, 6, 7, 8]
// 1 2 3 4 5 6 7 8

写到这里想到了 Array.form() 上代码了解

// 也可以和argument ，一起使用
let a = Array.from('123', (x => {
    return x / 1 + 1
  }))
  console.log(a);
  // [ 2, 3, 4 ]

感觉挺有意思的方法，需要的先伙伴自己了解
Array.from了解链接

2.2 对象解构拼接

思考一个问题，如果名字一样，会怎么办呢？

正常的拼接 ：

let obj1 = {
  id: 1,
  name: '小王',
  phone: 110
}
let obj2 = {
  sex: '男',
  address: '北京市'
}

let obj = {
  ...obj1,
  ...obj2
}
console.log(obj); //{ id: 1, name: '小王', phone: 110, sex: '男', address: '北京市' } 

上面的问题 ： 如果键名重复了，下面的值回覆盖上面的值（就不上图了）

结论 ： 数组中的展开运算符就是将中括号去掉，对象中的展开运算符就是将大括号去掉，最后放在一个数组或对象里面。

三. Vuex 中的辅助性函数的映射

如下的4个辅助性函数 ：

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'app',
  data() {
    return {}
  },
  methods: {
    ...mapMutations(['SETINPUT']),
    //   SETINPUT()
    ...mapActions(['getListAction']),
    getListAction()
  },
  computed: {
    ...mapState(['newInput']),
    //newInput()
    ...mapGetters(['userList'])
    //userList()
  }
}

运用辅助性函数 可以轻而易举的取得 在 Vuex 中 定义好的方法 ， 不过方法是在对象里面的 ， 运用 …展开 运算符 可将 大括号 里面的方法拿出来，就相当于是在methods中放了一个函数，或者是在computed中放了一个计算属性。