问题描述
挑战
我正在尝试从对象A中选择一个项目子集以将其存储在对象B中。这似乎是一个非常简单的任务,但是由于某种原因,结果并不是我所期望的。我从对象A中选择一项,并希望将其存储在对象B的特定索引中:
fselection.categories[cindex].name = categories[cindex].name;
但是,从对象A中选择的项目存储在对象B的每个索引中,而不仅存储在cindex
中。参见下面的MWE。
我试图通过编写一个普通的旧for循环来解决此问题,但这也无法解决。而且,这次,对象A在每个位置都填充有空字符串吗?
for(i=0;i<fselection.categories.length;i++){
console.log(i);
if(i === cindex){
fselection.categories[i].name = categories[i].name;
} else {
fselection.categories[i].name = "";
}
}
很奇怪,不是吗?
预期结果
预期结果是fselection.categories[i].name
中填充了categories
中的1个元素,即fselection.categories[i].name
MWE
怎么回事?
<!doctype html>
<html class="no-js" lang="en">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>...</title>
<Meta name="description" content="">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript">
var i,j,k,l,m,n;
var categories;
var fselection;
function init() {
categories = [{
name: "A"
},{
name: "B"
},{
name: "C"
},{
name: "D",subcategories: [
{
name: "a"
},{
name: "b"
},{
name: "c"
},{
name: "d"
},{
name: "e"
},{
name: "f"
},{
name: "g"
},{
name: "h"
},{
name: "i"
}
]
},{
name: "E",{
name: "f"
}
]
},{
name: "F"
},{
name: "G"
},{
name: "H"
}
]
console.log("Instantiated - Cat:")
console.log(categories);
//instantiate object
fselection = JSON.parse('{ "categories": [] }');
var initcat = JSON.parse('{ "name": "","subcategories": [] }');
for(i=0;i<categories.length;i++){
fselection.categories.push(initcat);
}
console.log("Instantiated - Sel:")
console.log(fselection)
}
function exec() {
cindex = 4; //hardcoded for the example
console.log("Instantiated - Sel:")
console.log(fselection);
console.log(fselection.categories[cindex].name)
console.log(categories[cindex].name)
fselection.categories[cindex].name = categories[cindex].name;
console.log("Populated - Sel:")
console.log(fselection)
}
</script>
</head>
<style>
</style>
<body onload="init()">
<button id="myBtn" onclick="exec()">Click</button>
</body>
</html>
解决方法
在您的代码段中,使用以下代码填充fselection.categories:
var initcat = JSON.parse('{ "name": "","subcategories": [] }');
for(i=0;i<categories.length;i++){
fselection.categories.push(initcat);
}
结果是fselection.categories的每个元素都是对同一对象(initcat)的引用。如果您更改该对象的属性,它将显示为“随处更改”。如果您执行以下操作:
for (i=0;i<categories.length;i++) {
fselection.categories.push(JSON.parse('{ "name": "","subcategories": [] }'));
}
然后每个元素将是一个独立的对象,因此可以独立更改。