数组常用API

JS 数组常用API分类讲解

分为四大类：遍历、查找、转换、增删改、ES6新增API，附带返回值、是否改变原数组、示例、面试重点。

重点标记：原地修改数组（改变原数组） / 返回新数组（不修改原数组）

一、遍历相关

1. forEach

arr.forEach((item, index, arr)=>{})
  • 作用：单纯遍历每个元素
  • 返回值：undefined
  • ❌不能break、continue终止循环；想中断请用for循环
  • 不改变原数组
[1,2,3].forEach(item=>console.log(item))

2. map

const newArr = arr.map((item,index)=>{ return 处理后的值 })
  • 作用：一一映射，每个元素执行回调，生成等长度新数组
  • 返回：新数组
  • 不改变原数组
const res = [1,2,3].map(x=>x*2) // [2,4,6]

3. reduce / reduceRight

刚刚讲过！

  • reduce：从左向右聚合
  • reduceRight：从右向左聚合
  • 返回：聚合结果（数字、对象、数组都行）

二、筛选、查找（高频）

1. filter 过滤

const newArr = arr.filter(item=>条件)
  • 返回：满足条件元素组成的新数组
  • 不改变原数组
const arr = [10,20,30];
const res = arr.filter(x=>x>15) // [20,30]

2. find

const result = arr.find(item=>条件)
  • 返回：第一个匹配的元素；找不到返回undefined
[1,2,3].find(x=>x>1) // 2

3. findIndex

const index = arr.findIndex(item=>条件)
  • 返回：第一个匹配元素下标；找不到返回 -1

4. some

const bool = arr.some(item=>条件)
  • 只要至少一个满足条件 → true，找到立刻终止遍历
[1,2,3].some(x=>x>2) // true

5. every

const bool = arr.every(item=>条件)
  • 所有元素都满足条件才返回true；任意一个不满足直接false
[2,4,6].every(x=>x%2===0) // true

三、ES6新增（你清单里包含）

1. includes

arr.includes(目标, [起始下标])
  • 判断数组是否包含某个元素，返回布尔值
  • ✅可以识别NaN（indexOf做不到）
[1,NaN].includes(NaN) // true
[1,NaN].indexOf(NaN)  // -1

2. at

arr.at(下标)

支持负数索引，负数代表倒数取值

const arr = [10,20,30]
arr.at(-1) //30 最后一项
arr.at(0)  //10

四、会改变原数组的API（重点！面试高频坑）

使用这些方法，原始数组直接被修改！

  1. push：尾部添加元素，返回新长度
  2. pop：删除最后一个元素，返回被删除元素
  3. unshift：头部添加元素，返回新长度
  4. shift：删除第一个元素，返回被删除元素
  5. splice：删除/插入/替换元素，功能最强
arr.splice(start, 删除数量, 新增元素)
  1. sort：数组排序（默认按字符串排序！数字排序要传回调）
[10,2].sort((a,b)=>a-b) //升序
[10,2].sort((a,b)=>b-a) //降序
  1. reverse：数组反转

五、不改变原数组，返回新数组

  1. slice 截取片段
arr.slice(start, end) // [start, end)，end取不到
arr.slice() //快速浅拷贝数组

区分：splice改原数组；slice不修改！极易混淆

  1. concat 数组拼接
[1,2].concat([3,4]) // [1,2,3,4]

六、数组与字符串互相转换

  1. join：数组 → 字符串
[1,2,3].join('-') // "1-2-3"
  1. split：字符串 → 数组（字符串方法）
"1,2,3".split(',') // ["1","2","3"]

一张核心区分表（必背）

API 返回值 是否修改原数组
forEach undefined ❌
map 新数组 ❌
filter 新数组 ❌
find 元素/undefined ❌
some/every boolean ❌
reduce 聚合结果 ❌
push/pop/shift/unshift 长度/删除元素 ✅
splice 被删除元素组成的数组 ✅
slice 新数组 ❌
includes boolean ❌
at 元素 ❌

经典面试坑汇总

  1. sort() 默认按字符排序，数字排序必须传入回调函数
  2. splice改原数组，slice不修改
  3. indexOf无法判断NaN，优先用includes
  4. forEach不能break终止循环，需要中断请使用for / for...of

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组API</title>
</head>
<body>
    
    <script>
        const arr = [1,2,3,4];

        //1.foreach undefined 不修改原数组
        arr.forEach(element => {
            console.log(element);
        });

        //2.map 新数组 不修改原数组
        const arr1=arr.map(x=>x*2);
        console.log(arr1);
        //3.filter	新数组	❌
        const arr2=arr1.filter(x=>x>=4);
        console.log(arr2);
        //4.find	元素 /undefined	❌
        let v=arr2.find(x=>{
            return Math.cbrt(x)===2?x:undefined;
        });
        console.log(v);
        //5.some/every	boolean	❌
        console.log(arr2.some(x=>x%2==0));
        console.log(arr2.every(x=>(x&x-1)===0));
        //6.reduce	聚合结果	❌
        let sum = arr2.reduce((a,b)=>{
            a=a+b*b;
            return a;
        },0);
        console.log(sum);//16+36+64=116 
        // \sumi^2=n*(n+1)*(2n+1)/6
        // \sum (2i)^2=4 \sum i^2=2*n*(n+1)*(2n+1)/3
        function getPreSquare(n=0){
            return 2*n*(n+1)*(2*n+1)/3;
        }
        console.log(getPreSquare(4)-getPreSquare(1));//116，结果是一样的


        //7.push/pop/shift/unshift	长度 / 删除元素	✅
        //这个会修改原数组，push是从数组尾部添加一个元素
        arr2.push(10);
        console.log(arr2);

        arr2.pop();
        console.log(arr2);

        //unshift比较特别是从前面添加元素
        arr2.unshift(2);
        console.log(arr2);

        arr2.shift();
        console.log(arr2);

        //8.splice	被删除元素组成的数组	✅
        //返回值是被删除元素组成的数组，格式为splice(起始下标，删除数量，删除位置替换的元素)
        arr2.splice(0,1,10);
        console.log(arr2);
        arr2.shift();
        arr2.unshift(4);
        
        //9.slice	新数组	❌
        const arr3 = arr2.slice(0,1);
        console.log(arr3);
        //10.includes	boolean	❌
        console.log(arr3.includes(8));
        //11.at
        console.log(arr2.at(-1));
        //12.sort
        //降序
        arr2.sort((a,b)=>b-a);
        console.log(arr2);
        //升序
        arr2.sort((a,b)=>a-b);
        console.log(arr2);

        //13.reverse
        arr2.reverse(0,arr2.length);
        console.log(arr2);

        //14.join，数组到字符串
        let str = arr2.join('-');
        console.log(str);

        //15.split，字符串到数组，可以传入正则表达式用于切割
        let reg=/-/;
        const arr4=str.split(reg).map(a=>Number.parseInt(a));
        console.log(arr4);
    </script>
</body>
</html>
posted @ 2026-08-03 22:45  alij  阅读(4)  评论(0)    收藏  举报