如何将元素添加到 Javascript 中的对象数组？答案

【问题标题】：How can I add elements to an Array of objects in Javascript?如何将元素添加到 Javascript 中的对象数组？
【发布时间】：2020-12-05 23:07:29
【问题描述】：

我正在编写一个程序来获取城市列表及其 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”类的元素数组 var 城市 = []; 两个声明的结果是一样的。

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

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

提前致谢

【问题讨论】：

标签： javascript arrays object push

【解决方案1】：

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

要克隆一个对象，也就是打破引用，你可以使用如下调用

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

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

【讨论】：

【解决方案2】：

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

您可以做的是创建一个返回新对象的函数：

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);

【讨论】：

【解决方案3】：

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

我使用了一个类和一个构造函数并像这样实例化一个新的“新鲜”对象，它可以工作！！。代码如下：

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 }
]

【讨论】：