javascript - 请问下面代码中的...是扩展运算符还是操作运算符？这样写是什么意思？

问题描述

vuex中的代码

computed:{ ...mapState(['count']), count(){return this.$store.getters.count; }},

请问mapState前面的...是什么意思？加这个和不加这个有什么区别？已经看过扩展运算符和操作运算符的相关文档，不过还是不太明白，求详细点的解释。。

问题解答

自己写几个例子不就知道了…………比如：

const state = { a: 1, b: 2, c: 3};const now = { ...state, d: 4, e: 5};console.log(now);

这个语法大部分浏览器还不支持，所以你可以先去babel转一下，把转码后的代码直接放到控制台运行，看看出来的是啥。这个运算符其实挺简单的……

... 把对象在此地展开为键值对。如果直接写，有语法错误或者逻辑错误。

借用 @xiaoboost 的例子：

有 ... 运算符，点击查看

const state = { a: 1, b: 2, c: 3};const now = { ...state, d: 4, e: 5};console.log(now);

结果是

Object { 'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5}

没有 ... 运算符，点击查看

结果是：

Object { 'd': 4, 'e': 5, 'state': Object { 'a': 1, 'b': 2, 'c': 3 }}回答3：

...mapState(['count'])加...是为了将mapState对象分割，返回分离的各项，就可与局部计算属性(computed)混合使用了不加... mapState可是一个对象 computed也是一个对象 那就得一个一个的属性赋值吧或者你computed对象里不打算有其他属性，你直接computed:mapState(['count'])应该也可以