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 () 函数，它将项目插入现有数组。