如何向 Javascript 中的对象数组添加元素？

Question

我正在编写一个程序来获取城市列表及其 GPS 坐标并将其存储在名为“城市”的数组中，以便以后使用。 这是代码片段：

var city = {name:String,lat:Number,lon:Number};
var cities = Array.of(city);

city.name="London";
city.lat=51.50;
city.lon=-0,11;

cities.push(city);

city.name="Barcelona";
city.lat=41.38;
city.lon=2,15;

cities.push(city);

console.log("Number of cities "+cities.length);
console.log(cities);

执行此代码时的结果如下：

Number of cities 3
[
  { name: 'Barcelona', lat: 41.38, lon: 2 },
  { name: 'Barcelona', lat: 41.38, lon: 2 },
  { name: 'Barcelona', lat: 41.38, lon: 2 }
]

也就是说，“push”方法似乎覆盖了所有数组记录，并且还添加了一条额外的记录。 我还声明了数组城市，如下所示： var city = [city]; // class "city" 的元素数组 var cities = []; 两种声明的结果是相同的。

这很奇怪，看起来很明显，但我不知道发生了什么..

¿ 我在上面显示的代码中做错了什么？

提前致谢

Answer 1

您观察到的行为与push() function 或数组无关。 相反，它是 JavaScript 处理所有对象的方式：通过引用。

要克隆 object，换句话说，打破引用，您可以使用如下调用

• city = {...city}; // spread
• city = Object.assign({}, city);
• city = jQuery.extend({}, city);

您遇到的问题是，在更改 object city内的属性时，您同时修改了数组中已有的引用。

Answer 2

那是因为你所在的city object 是通过引用传递的。 数组中的 object 将指向同一个实例，因此修改它将修改数组中该 object 的所有实例：无论插入多少次。

您可以做的是创建一个 function，它返回一个新的 object：

 function getCity(name, lat, long) { return { name, lat, long }; } const cities = []; cities.push(getCity('London', 51.50, 0.11)); cities.push(getCity('Barcelona', 41.38, 2.15)); console.log("Number of cities " + cities.length); console.log(cities);

或者，只需在适当位置创建对象：

 function getCity(name, lat, long) { return { name, lat, long }; } const cities = []; cities.push({ name: 'London', lat: 51.50, long: -0.11 }); cities.push({ name: 'Barbelona', lat: 41.38, long: 2.15 }); console.log("Number of cities " + cities.length); console.log(cities);

Answer 3

非常感谢！！ 这是初学者的错误.... javascript 管理对象的方式，与 push() 方法无关。

我使用了一个 class 和一个构造函数，并像这样实例化一个新的“新鲜” object 并且它可以工作.:. 这是代码：

class City {
    constructor(name, lat,lon) {
        this.name = name;
        this.lat = lat;
        this.lon = lon;
    }
    };

var cities = [];

var newcity = new City("London",51.50,-0.11);

cities.push(newcity);

var newcity = new City("Barcelona",41.38,2.15);

cities.push(newcity);

var newcity = new City("Rome",41.90,12.49);

cities.push(newcity);

console.log("Number of cities "+cities.length);
console.log(cities);

结果正确：

Number of cities 3
[
  City { name: 'London', lat: 51.5, lon: -0.11 },
  City { name: 'Barcelona', lat: 41.38, lon: 2.15 },
  City { name: 'Rome', lat: 41.9, lon: 12.49 }
]