从一个对象数组中选择一个或多个项目，然后将它们存储在另一个对象中

如何解决从一个对象数组中选择一个或多个项目，然后将它们存储在另一个对象中

挑战

我正在尝试从对象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": [] }'));
}

然后每个元素将是一个独立的对象，因此可以独立更改。