Question

关于调用pushValue()函数，每次在分配到getGUID()之后调用objectJson.id生成唯一ID并推送到数组但在console.log()中显示所有具有相同唯一的对象时标识。

<button onclick="pushValue()">
Click
</button>
<p id='displayjson'>
</p>

<script>
var arrayJson = [];
var objectJson =    {
                      name: "New Widget",
                      sizeX: 4,
                      sizeY: 1,
                      lib: 'fsf',
                      id:""
                                    };

  var pushValue = function(){
        objectJson.id = getGUID();     
        arrayJson.push(objectJson);
      document.getElementById("displayjson").innerText = JSON.stringify(arrayJson);     
        console.log(arrayJson);
   }                 

function getGUID() {
    //DOCS : -http://guid.us/GUID/JavaScript
    function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
        var guid = ('svg_id_' + S4() + S4() + "_" + S4() + "_4" + S4().substr(0, 3) + "_" + S4() + "_" +                   S4() + S4() + S4()).toLowerCase();
  return guid;
}
</script>

点击此链接https://jsfiddle.net/Akkikumar77/noLhzbwr/

Answer 1

这是因为您将objectJson 引用推送到数组。因此，如果您更改对象，它会在每次出现时发生变化。为避免这种情况，您需要在使用Object.assign()

推送到数组之前克隆该对象

arrayJson.push(Object.assign({}, objectJson));

以下是更新后的fiddle。

Answer 2

您每次都在更改同一个对象，因此您只推送该对象（引用）而不是新创建的对象。做一个简单的工厂功能，你很高兴。或克隆对象。

var arrayJson = [];
var createObject = function(){
return{
    name: "New Widget",
    sizeX: 4,
    sizeY: 1,
    lib: 'fsf',
    id: getGUID()
 }
}

var pushValue = function(){

    arrayJson.push(createObject());
  document.getElementById("displayjson").innerText = JSON.stringify(arrayJson);     
    console.log(objectJson);

}

Answer 3

这是突变的结果。

每次拨打objectJSON.id = getGUID()时，都会更改原始objectJSON的ID值。

要停止引用原始objectJSON对象，请使用concat方法对其进行深层复制，而不是使用push方法。

喜欢这个

arrayJson.concat([objectJSON]);

而不是

arrayJson.push(objectJson);

Answer 4

您正在更改对象，而不是复制它或创建新对象。这是使用大部分代码执行此操作的一种方法：

Fiddle here

<button onclick="pushValue()">
Click
</button>
<p id='displayjson'>
</p>

<script>
var arrayJson = [];
var objectJson =    {
                      name: "New Widget",
                      sizeX: 4,
                      sizeY: 1,
                      lib: 'fsf',
                      id:"",
                                    };

  function CreateObject(name, id){
    this.name = name;
    this.sizeX = 4;
    this.sizeY = 1;
    this.lib = 'fsf';
        this.id = id;
  }       
  var pushValue = function(){
    var myNewObject = new CreateObject('someName', getGUID());

        arrayJson.push(myNewObject);
      document.getElementById("displayjson").innerText = JSON.stringify(arrayJson);     
        console.log(objectJson);
   }                 

function getGUID() {
    //DOCS : -http://guid.us/GUID/JavaScript
    function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
        var guid = ('svg_id_' + S4() + S4() + "_" + S4() + "_4" + S4().substr(0, 3) + "_" + S4() + "_" +            S4() + S4() + S4()).toLowerCase();
    return guid;
}
</script>

在将具有唯一id的对象推入数组时，数组中的所有对象都使用相同的值进行更新

4 个答案: