JavaScript数组操作方法全解析

golang学习网今天将给大家带来《JavaScript数组常用操作方法详解》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

修改原数组的方法有push()、pop()、shift()、unshift()、splice()、sort()、reverse()；它们直接改变原数组，其中sort()需传比较函数避免字符串排序，splice()按索引/删除数/插入项操作，reverse()和sort()均为就地操作。

修改原数组的方法有哪些，哪些会改变原数组

JavaScript 中有些数组方法直接修改原数组，比如 push()、pop()、shift()、unshift()、splice()、sort()、reverse()。这些方法返回值可能不是新数组（如 push() 返回新长度，splice() 返回被删元素），但原数组已变。

容易踩的坑：

• sort() 默认按字符串排序：[10, 2, 1].sort() 得到 [1, 10, 2]，必须传比较函数：[10, 2, 1].sort((a, b) => a - b)
• splice() 第一个参数是起始索引，第二个是删除个数，第三个起才是插入项；不传第二个参数则删到末尾
• reverse() 和 sort() 都是“就地”操作，别误以为返回了副本

filter/map/reduce 这类高阶方法怎么选

它们都不修改原数组，返回新数组（reduce() 返回任意类型），核心区别在用途：

• filter()：筛选，返回满足条件的元素组成的数组，回调函数需返回布尔值
• map()：转换，返回每个元素经处理后的新数组，长度与原数组一致
• reduce()：聚合，常用于求和、扁平化、分组等，需提供初始值（尤其空数组场景）

示例：

const nums = [1, 2, 3];
nums.filter(n => n > 1); // [2, 3]
nums.map(n => n * 2);    // [2, 4, 6]
nums.reduce((sum, n) => sum + n, 0); // 6

注意：map() 对 undefined 元素仍会调用回调；filter() 会跳过稀疏数组的空位，但不会跳过 undefined 值。

includes() 和 indexOf() 到底该用哪个

两者都判断元素是否存在，但行为不同：

• includes() 返回布尔值，支持 NaN 检测（[NaN].includes(NaN) 是 true）
• indexOf() 返回索引（找不到为 -1），不识别 NaN（[NaN].indexOf(NaN) 是 -1）
• includes() 不能用于对象深比较，只做 SameValueZero 比较

如果只是“有没有”，优先用 includes()；如果需要位置信息或兼容老环境（IE），才用 indexOf()。

flat() 和展开运算符 ... 处理嵌套数组的区别

flat() 默认只扁平化一层，[1, [2, [3]]].flat() → [1, 2, [3]]；要完全展开得传 Infinity：.flat(Infinity)。

展开运算符 ... 只作用于一层，且只能用于可迭代对象上下文（如函数调用、数组字面量）：

const arr = [1, [2, 3]];
[...arr]; // [1, [2, 3]] —— 不会递归展开
[].concat(...arr); // [1, 2, 3] —— 手动一层展开

注意：flat() 会跳过空槽（sparse array 的空位），而 ... 在数组字面量中也会跳过；但若用于函数参数，fn(...arr) 中空槽会被转成 undefined。

深层嵌套时，flat(Infinity) 看似方便，但可能意外拍平本不该动的结构，比如含日期对象或自定义类的数组——这时候手写递归或用 Array.isArray() 判断更稳妥。

今天关于《JavaScript数组操作方法全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！