首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript深度复制(值)在数组中不起作用

Javascript深度复制(值)在数组中不起作用
EN

Stack Overflow用户
提问于 2018-06-29 03:58:05
回答 2查看 65关注 0票数 1

嗨,我正在为一个即将到来的项目使用node.js和Javascript。我有一个名为templateValues.的模板对象数组

现在我想把这两个id改变的对象复制到一个新的数组myArray中。

代码语言:javascript
复制
let templateValues = [{'id':1 , 'type': 'a'},{'id':2 , 'type': 'b'}];
let myArray = [];

for (let index = 0; index < 10; index++) {
 myArray =  myArray.concat(templateValues.map(e => {
   e.id = Math.random(); // suppose this gives a unique id
   return e;
  }).slice(0));	
}
console.log(myArray);

输出

代码语言:javascript
复制
{id: 0.13413583461207668, type: "a"}
{id: 0.7426427992455211, type: "b"}
{id: 0.13413583461207668, type: "a"}
{id: 0.7426427992455211, type: "b"}
{id: 0.13413583461207668, type: "a"}
{id: 0.7426427992455211, type: "b"}
{id: 0.13413583461207668, type: "a"}
{id: 0.7426427992455211, type: "b"}
...

为什么即使我对修改后的templateValues-进行切片(0)来获取“-”,数据id数组仍然是一样的?!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-29 04:02:59

调用slice时,修改的是数组对象,而不是数组本身的内容。在您的示例中没有克隆底层对象的代码行,因此,当您设置e.id = Math.random()时,您是在一遍又一遍地编辑同一对象。

这里的修复方法是在修改e之前克隆它。在编辑之前尝试Object.assign({}, e),以便为每个项目创建一个浅层副本。

请参考下面的示例:

代码语言:javascript
复制
let templateValues = [{'id':1 , 'type': 'a'},{'id':2 , 'type': 'b'}];
let myArray = [];

for (let index = 0; index < 10; index++) {
    myArray =  myArray.concat(templateValues.map(e => {
       const eCopy = Object.assign({}, e, {id: Math.random()})
       return eCopy;
  }).slice(0)); 
}
console.log(myArray);

您也可以使用ES2018 object spread syntax来实现相同的结果。只需用{...e, id: Math.random()}替换Object.assign

票数 4
EN

Stack Overflow用户

发布于 2018-06-29 04:05:16

另一个答案和注释已经解释了这个问题,所以我将提供一个解决方案-您可以使用下面的方法来获取您需要的内容,新数组的长度可以设置为您想要的任何长度,类型将以与原始数组相同的顺序重复

代码语言:javascript
复制
let templateValues = [{'id':1 , 'type': 'a'},{'id':2 , 'type': 'b'}];
const newArr = Array.from ({length: 10}, (_, i) => ({
    id: Math.random(),
    type: templateValues[i % templateValues.length].type
}));
console.log(newArr);

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51090422

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档