javascript - 如何使用 ES6 ... 表示法？

Question

我对 React 和 es6 语法还很陌生。我正在为我的 React Web 应用程序使用 redux，并且在我的 reducer 中我希望能够将字符串推送到我的 state.likes

这是我的代码:

const i = action.index;
console.log(state);
return [
    ...state.slice(0, i), // before the one we are updating
    {...state[i], likes: state[i].likes+1}, //i want to change this bit so I can push deviceKey
    ...state.slice(i+1), //after one we are updating
  ]

当我 console.log(state) 时，我的数组中有两个对象，如下所示:

[
{
  "code": "AAAAAAA",
  "caption": "blah blah blah",
  "likes": [
    "ABCDEFG",
    "BACDEFG"
  ],
  "id": "1234567890",
  "display_src": "https://pbs.twimg.com/profile_images/1044686525/Get_Some.jpg"
},
{
  "code": "BBBBBBB",
  "caption": "nah fam",
  "likes": [
    "ABCDEFG",
    "BACDEFG",
    "CBADEFG"
  ],
  "id": "0987654321",
  "display_src": 'http://got-crossfit.com/wp-content/uploads/2014/04/get-some-rest.jpg'
}
]

现在，每当这个 reducer 触发时，我如何将 action.deviceKey 推送到 state[i].likes 中？我尝试了 {...state[i], likes: state[i].likes.push(action.deviceKey)}，但没有成功。

有人可以 eli5 ... 符号的作用吗？我还是不太明白这有什么意义。

谢谢!

Answer 1

实际上有三种不同的方式 ...可以使用。从技术上讲，只有其中之一是有效的官方 Javascript，但其他两个非常常见。

所有这些都用于制作对象和数组的“浅拷贝”。浅拷贝是指您创建一个新对象或数组，但其中包含与原始对象或数组完全相同的项目/数据/引用。

首先，...可以用作“数组扩展”运算符，以制作数组的浅拷贝。这是迄今为止唯一属于实际 Javascript 规范一部分的形式。与 Array.slice() 基本相同.

第二，...可以在 JSX 语法中使用(由 React 引入，也被其他类似的 View 库使用)。它制作对象的浅拷贝。

最后，官方建议使用...作为“对象传播”运算符，可以在 Javascript 代码中的任何位置(而不仅仅是在 JSX 中)制作对象的浅拷贝。该提案尚未最终确定，但许多人正在使用它，通过包含 Babel 插件将其编译为等效的 Object.assign()函数调用。

对于您的具体问题，我认为您需要使用Array.concat()函数，它返回包含新项目的新数组引用，而不是 Array.push()函数，它将项目插入到现有数组中。