数组方法分类与应用

回答 link

考察点分析 link

此题主要考察：

1. 原生API掌握程度：对JavaScript数组方法体系化认知能力
2. 可变性理解：区分方法是否改变原数组，这对函数式编程和避免副作用至关重要
3. 方法参数辨析：特别是splice与slice的参数模式差异
4. 内存机制认知：返回新数组时是否产生深拷贝

技术评估点：

• 可变方法（Mutator Methods）与不可变方法（Accessor Methods）分类能力
• splice的参数结构及操作模式
• slice的浅拷贝特性
• 方法返回值类型判断
• ES6新增数组方法的归类

技术解析 link

关键知识点 link

可变方法 > 不可变方法 > 浅拷贝机制 > 参数模式差异

原理剖析 link

1. 可变方法直接修改数组内存引用，操作后数组地址不变但内容变化
2. 不可变方法创建新内存空间，通过浅拷贝生成新数组
3. **splice()**通过起始索引、删除数量、插入元素三个维度操作数组
4. **slice()**通过起止索引（左闭右开）截取数组副本

常见误区 link

• 误将sort()/reverse()当作不可变方法
• 混淆slice的第二个参数为长度而非终止索引
• 认为返回新数组的方法都是深拷贝
• splice返回值误认为是修改后的数组

问题解答 link

数组方法分类：

  // 修改原数组（Mutator Methods）
push()/pop()         // 尾部操作
unshift()/shift()    // 头部操作
splice()             // 任意位置增删
sort()/reverse()     // 排序反转
fill()/copyWithin()  // ES6+方法

// 返回新数组（Accessor Methods）
concat()             // 数组合并
slice()              // 截取副本
map()/filter()       // 遍历转换
flat()/flatMap()     // ES6+扁平化
  

splice()与slice()差异：

解决方案 link

编码示例 link

  // splice() 示例：删除并插入
const arr = [1,2,3,4,5];
const removed = arr.splice(1, 2, 'a', 'b');
console.log(arr); // [1, "a", "b", 4, 5]
console.log(removed); // [2, 3]

// slice() 示例：获取子数组
const original = [{x:1}, {x:2}];
const sliced = original.slice(0,1);
sliced[0].x = 9; // 影响原数组元素
console.log(original[0].x); // 9（浅拷贝证明）
  

深度追问 link

1. 如何实现数组的深拷贝？
   提示：JSON序列化、递归克隆、structuredClone API

2. splice的删除数量为0时有什么应用场景？
   提示：实现纯插入操作，如插入中间元素

3. 为什么说filter()可能造成内存浪费？
   提示：全量遍历但可能仅需部分元素，可用惰性迭代器优化