JavaScript数组concat()与push()方法的区别及适用场景

在处理数组添加元素时，push()和concat()虽然都能实现元素添加，但核心差异主要体现在以下几个方面：

1. 原数组是否被修改 #

• push() 原地修改原数组：调用push()时，会直接在当前数组的末尾添加元素，原数组的内容会被直接改变。就像你示例1里的代码，执行people.push(newPerson)后，原来的people数组已经包含了新对象，不需要额外赋值操作。
• concat() 不修改原数组：concat()会创建一个全新的数组，包含原数组的所有元素以及要添加的新元素，原数组的内容保持不变。所以示例2里必须通过people = people.concat(newPerson)，让people变量指向这个新生成的数组。

2. 返回值不同 #

• push()的返回值是添加元素后数组的新长度。比如你的示例1中，people.push(newPerson)会返回6（原数组有5个元素，添加1个后总长度为6）。
• concat()的返回值是拼接完成的新数组。示例2中people.concat(newPerson)直接生成包含6个对象的新数组，需要赋值给变量才能使用这个新结果。

3. 参数处理逻辑不同 #

• push()支持传入任意数量的参数，每个参数都会被当作单个元素添加到数组末尾：

  // 一次性添加多个对象
  const person1 = {name: "Grace"};
  const person2 = {name: "Henry"};
  people.push(person1, person2);
  

• concat()的灵活性更强：
  • 传入单个元素时，和push()的最终元素效果一致（但不修改原数组）；
  • 传入数组时，会将该数组的所有元素逐个展开添加到新数组中，不会产生嵌套数组：

    const morePeople = [{name: "Grace"}, {name: "Henry"}];
    const updatedPeople = people.concat(morePeople);
    // updatedPeople包含原5个对象 + morePeople的2个对象，共7个元素
    

  如果用push()传入数组，会把整个数组当作一个元素添加，导致数组嵌套：

  people.push(morePeople);
  // people最后一个元素是morePeople数组，形成嵌套结构
  

你的示例本质差异 #

虽然两个示例最终打印的数组内容看起来一样，但背后逻辑不同：

• 示例1的people是原数组被直接修改，后续对people的任何操作都会基于这个已经改变的数组；
• 示例2的people是重新赋值为新数组，初始的5个对象的原数组如果没有其他引用，会被JS引擎回收，后续操作的是全新的数组。

内容的提问来源于stack exchange，提问作者Haris awais828