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

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}));

...但涉及一个临时对象(最后一个).不过,只是一个临时对象......

它的工作原理是因为普通的JS数组不是真正的数组¹,它们是具有一些特殊功能的对象.他们的"索引"实际上是符合某些标准的财产名称².所以,我们正在扩展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可以变量,那很好,您可以使用计算属性名称(ES2015中的新增内容):

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

注意[]周围n.

¹披露:这是我贫穷的小博客上的帖子.

²这是项目符号列表后面的第二段:

一个整数指数是一个字符串值属性密钥是一个规范的数字串(见7.1.16),并且其数字值是0或正整数2≤ ⁵³ -1.一个数组索引是一个整数指数,其数值我的范围是从0≤ 我 <2 ³² -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

您可以将数组转换为对象 (the ...array1)，替换项目 (the [1]:"seven")，然后将其转换回数组 ( Object.values) ：

array1 = ["one", "two", "three"];
array2 = Object.values({...array1, [1]:"seven"});
console.log(array1);
console.log(array2);