向数组中添加一个新对象[重复]答案

【问题标题】：Adding a new object to the array [duplicate]向数组中添加一个新对象[重复]
【发布时间】：2019-04-15 21:22:49
【问题描述】：

这个函数通过向它添加一个新对象来更改我的数组（在第二个参数中传递一个新对象）。我可以用什么方法返回一个新数组，而不改变旧数组？

const arr = [
   {  
     "name":"BMW",
     "price":"55 000",
     "country":"Germany",
     "certificate":"yes"
  },
  {  
    "name":"Mitsubishi",
    "price":"93 000", 
    "constructor":"Bar John",
    "door":"3",
    "country":"Japan",
  },
  {  
    "name":"TOYOTA", 
    "price":"48 000", 
    "max_people":"7",
    "country":"Japan",
    "certificate":"yes"
  },
  {  
    "name":"Volkswagen",
    "price":"36 000", 
    "constructor":"Pier Sun",
    "country":"Germany",
    "certificate":"no"
  },
 ];
function pushArr (arr, item){
    arr.push(item); 
}

let Cars = pushArr(arr,{  
  "name":"Audi",
  "price":"89 000", 
  "constructor":"Hubert Trumpius",
  "country":"Germany",
  "certificate":"yes"
});

console.log(arr);

【问题讨论】：

使用Array.map()。
SO 严格来说是非政治性的，所以你能不能把“Adolf Trump”改成不那么政治性的东西（除非有一个德国建筑商真的有这个名字，如果是这样，我很抱歉为他）

标签： javascript arrays methods

【解决方案1】：

您可以使用Array.concat() 或spread syntax：

function pushArr(arr, item) {
  return arr.concat(item); // or return [...arr, item]
}

const arr = [{"name":"BMW","price":"55 000","country":"Germany","certificate":"yes"},{"name":"Mitsubishi","price":"93 000","constructor":"Bar John","door":"3","country":"Japan"},{"name":"TOYOTA","price":"48 000","max_people":"7","country":"Japan","certificate":"yes"},{"name":"Volkswagen","price":"36 000","constructor":"Pier Sun","country":"Germany","certificate":"no"}];

let Cars = pushArr(arr, {
  "name": "Audi",
  "price": "89 000",
  "constructor": "Adolf Trump",
  "country": "Germany",
  "certificate": "yes"
});

console.log(arr === Cars);
console.log(Cars);

【讨论】：

【解决方案2】：

这是因为 JavaScript 对象（包括数组）是按引用传递的，而标量值是按值传递的。

因此，当您将对象传递给函数并直接对其进行变异时，您实际上是在引用内存中的同一个对象。

为避免意外改变对象，您必须在对其执行操作之前创建对象的新实例。有多种方法可以做到这一点：

Destructuring/spreading你参数function({...f}, t)
使用Object.assign()
将函数中的f 分配给destructured f (f = {...f};)

const arr = [{
    "name": "BMW",
    "price": "55 000",
    "country": "Germany",
    "certificate": "yes"
  },
  {
    "name": "Mitsubishi",
    "price": "93 000",
    "constructor": "Bar John",
    "door": "3",
    "country": "Japan",
  },
  {
    "name": "TOYOTA",
    "price": "48 000",
    "max_people": "7",
    "country": "Japan",
    "certificate": "yes"
  },
  {
    "name": "Volkswagen",
    "price": "36 000",
    "constructor": "Pier Sun",
    "country": "Germany",
    "certificate": "no"
  },
];

//destructure your argument here 
function pushArr([...arr], item) {
  return [arr, item];
}

let Cars = pushArr(arr, {
  "name": "Audi",
  "price": "89 000",
  "constructor": "Adolf Trump",
  "country": "Germany",
  "certificate": "yes"
});

console.log(arr);
console.log(Cars);

值得注意的是，重新分配对象不会更新值。请查看Call by sharing。

【讨论】：

【解决方案3】：

您可以使用函数slice 来创建副本。

function pushArr(arr, item) {
    let copy = arr.slice();
    copy.push(item);
    return copy;
}

【讨论】：