js数组 push和concat的区别

概述

js数组的push方法和concat方法都可以向数组中添加元素，但是它们的作用不完全相同：

1. push方法可以向数组末尾添加一个或多个新元素。它会修改原始数组，返回修改后数组的新长度。
2. concat方法可以连接两个或多个数组，并创建一个新的数组包含连接的元素。它不会修改原始数组，返回一个新的数组。

区别在于push方法会直接修改原始数组，而concat方法则会创建一个新的数组。因此，如果需要向原始数组中添加元素并且需要保留原始数组的元素，使用push方法是更好的选择；如果需要合并两个或多个数组，并且需要保留原始数组，使用concat方法是更好的选择。

追问1: 可以push不同类型的元素吗?

是的，可以使用push方法向数组中添加不同类型的元素，例如字符串、数字、布尔值、数组、对象等。数组没有类型限制。但需要注意的是，push()方法只能添加一个元素，并且会修改原始数组。若想添加多个元素，须多次调用或使用元素展开符...。

追问2: 可以concat不同类型的数组吗?

是的，可以使用concat()方法将不同类型的数组合并为一个数组。concat()方法也不会改变原始数组，而是返回一个新的数组。因此，需要注意的是，要将其结果保存在新变量中，或者直接使用返回的新数组。

接下来看5个例子加深理解:

例子1

let source = [1, 2, 3];
let copy = source; 
source.push(4); 
console.log('source=', source);
console.log('copy=', copy);

输出结果为 source=[1,2,3,4] copy=[1,2,3,4]，因为数组是引用类型，source 和 copy 引用的是同一个数组对象，所以在 source 中 push 数据，copy 也会受到影响，因而copy 和 source 的值是一样的。

例子2

let source1 = [1, 2, 3];
let source2 = ['a', 'b', 'c'];
let copy = source1; 
copy.push(source2);
console.log(source1);

输出结果为 [1, 2, 3, ['a', 'b', 'c']]，因为 push() 方法会将一个或多个值添加到数组的结尾，并返回新数组的长度。在这里，我们将 source2 数组作为单个元素添加到 source1 数组的末尾。因此，source1 变成了包含 4 个元素的数组。

例子3

let source1 = [1, 2, 3];
let source2 = ['a', 'b', 'c'];
let copy = source1; 
copy.push([...source2]);
console.log(source1);

输出结果为 [1, 2, 3, ['a', 'b', 'c']]，虽然使用 ...source2 将元素展开, 但是又用方括号 [] 包裹, 将其又封装为一个数组, 最终仍是4个元素

例子4

let source1 = [1, 2, 3];
let source2 = ['a', 'b', 'c'];
let copy = source1; 
copy.push(...source2);
console.log(source1);

输出结果为 [1, 2, 3, 'a', 'b', 'c']，因为push的对象是 ...source2 展开的多个元素, 因此最终是6个元素

例子5

let source = "123";
let copy = source; 
copy += ",abc"; 
console.log('source=', source);
console.log('copy=', copy);

输出结果为 source=123, copy=123,abc，虽然变量 source 和 copy 均指向字符串 "123" 的值，但是+=的操作是将当前值设为 原有值 + ",abc"，而不会修改原有的值 "123"。因此，变量 source 持有的仍然是原有的字符串 "123" 。