在一行代码中用扩展语法替换数组条目？

Question

我正在使用... spread语法替换react状态数组中的项。这有效：

let newImages = [...this.state.images]
newImages[4] = updatedImage
this.setState({images:newImages})

是否可以在一行代码中执行此操作？像这样的东西？ （这显然不起作用......）

this.setState({images: [...this.state.images, [4]:updatedImage})

Answer 1

使用Array.slice

this.setState({images: [...this.state.images.slice(0, 3), updatedImage, ...this.state.images.slice(4)]})

Answer 2

没有提供的语法，没有。 Object.assign完成这项工作：

this.setState({images: Object.assign([...this.state.images], {4: updatedImage}));

...但涉及一个临时对象（最后一个）。不过，只是一个临时对象......

它起作用，因为normal JS arrays aren't really arrays1，它们是具有一些特殊功能的对象。他们的“索引”实际上是属性名称meeting certain criteria2。所以在那里，我们将this.state.images分散到一个新的数组中，将其传递给Object.assign作为目标，并给Object.assign一个名为"4"的属性对象（是的，它最终成为一个字符串但我们被允许写为一个数字）我们想要更新的值。

实例：

const a = [0, 1, 2, 3, 4, 5, 6, 7];
const b = Object.assign([...a], {4: "four"});
console.log(b);

如果4可以变量，那很好，你可以使用computed property name（ES2015中的新功能）：

let n = 4;
this.setState({images: Object.assign([...this.state.images], {[n]: updatedImage}));

请注意[]周围的n。

---

1披露：这是我贫穷的小博客上的帖子。

2这是项目符号列表后面的第二段：

整数索引是一个字符串值属性键，它是一个规范数字字符串（见7.1.16），其数值为+0或正整数≤253-1。数组索引是整数索引，其数值i在+0≤i<232-1的范围内。

所以Object.assign和你的create-the-array-then-update-index-4做同样的事情。

Answer 3

你可以使用map：

const newImages = this.state.images
  .map((image, index) => index === 4 ? updatedImage : image)

Answer 4

这是我自我解释的非单行

 const wantedIndex = 4;
 const oldArray = state.posts; // example

 const updated = {
     ...oldArray[wantedIndex], 
     read: !oldArray[wantedIndex].read // attributes to change...
 } 

 const before = oldArray.slice(0, wantedIndex); 
 const after = oldArray.slice(wantedIndex + 1);

 const menu = [
     ...before,  
     updated,
     ...after
 ]