Array.prototype.concat()学习

Array.prototype.concat() 是 JavaScript 中用于合并数组的常用方法，其核心特性包括创建新数组、浅拷贝元素以及不递归处理嵌套数组。以下是详细解析：

1. 基本用法

功能：将调用数组与一个或多个值/数组浅合并，返回新数组，不修改原数组。
语法：const newArray = array1.concat(array2, value1, ..., arrayN);

2. 关键特性(1) 浅拷贝与原数组独立性

非对象元素：新数组中的原始值（如数字、字符串）与原数组完全独立，修改互不影响。
const arr1 = [1, 2];const arr2 = arr1.concat(3);arr1[0] = 99;console.log(arr2); // [1, 2, 3]（未受影响）
对象/数组元素：仅拷贝引用，新旧数组中的对象/数组指向同一内存地址。
const obj = { a: 1 };const arr1 = [obj];const arr2 = arr1.concat();obj.a = 2;console.log(arr2); // [{ a: 2 }]（引用被共享）

(2) 不递归处理嵌套数组

嵌套数组会被直接展开一层，而非递归合并。const num1 = [[1]];const num2 = [2, [3]];const result = num1.concat(num2);console.log(result); // [[1], 2, [3]]（嵌套数组保持原样）

3. 实际应用示例(1) 合并多个数组const arr1 = [1, 2];const arr2 = [3, 4];const arr3 = [5, 6];const merged = arr1.concat(arr2, arr3);console.log(merged); // [1, 2, 3, 4, 5, 6](2) 添加非数组值const arr = [1, 2];const newArr = arr.concat(3, "hello", true);console.log(newArr); // [1, 2, 3, "hello", true](3) 嵌套数组的引用问题const nested = [[1]];const newArr = nested.concat();nested[0].push(2);console.log(newArr); // [[1, 2]]（共享嵌套数组引用）4. 与扩展运算符的对比

concat()：显式调用方法，兼容性更好。
扩展运算符（...）：语法更简洁，但需注意空位处理差异。const arr1 = [1, 2];const arr2 = [3, 4];const merged = [...arr1, ...arr2]; // 等效于 concat

5. 注意事项

性能：合并大型数组时，concat() 可能产生临时数组，影响性能。
替代方案：对于复杂操作，可考虑 Array.prototype.push.apply() 或扩展运算符。

总结

concat() 适用于浅拷贝合并数组或值，但需注意：

不修改原数组，但共享对象/数组引用。
不递归展开嵌套数组，需手动处理深层结构。
根据场景选择 concat() 或扩展运算符，平衡可读性与性能。

通过理解这些特性，可以更高效地操作数组并避免潜在问题。

您可能感兴趣问答

Collapsible

热门标签

热点问答