js数组方法，其实也就这么多东西，一篇全搞懂

干就完了12025-09-08 10:21

本文详细解析JavaScript数组提供的30+内置方法，按照使用场景结合功能，参数，返回值，使用方法，兼容性这几个方面一一刨析，一次搞懂，使用时按场景需求对应查看即可：

一. 查找检索方法（不改变原数组）

1.indexOf()

  • 功能：查询并返回数据的索引
  • 参数 ：indexOf(searchElement[, fromIndex]) 要查找的元素，可选的起始索引
  • 返回值：元素索引或 -1
  • 示例：
js 复制代码 
console.log([1,3,4].indexOf(4)); // 符合条件的第一个索引 2
console.log([1,4,5,3].indexOf(4,1)); // 索引1开始的元素中索引1对应的是4，返回1
console.log([1,4,5,3].indexOf(4,2)); // 索引2开始的元素中没有4，返回-1
  • 兼容性：所有浏览器都支持

2.lastIndexOf()

  • 功能：反向查询并返回数据的索引
  • 参数 ：lastIndexOf(searchElement[, fromIndex])要查找的元素，可选的起始索引（从右向左）
  • 返回值：元素最后出现的索引或 -1
  • 示例：
js 复制代码 
console.log([1,2,2].lastIndexOf(2)); // 符合条件的最后一个索引 返回值2
console.log([1,2,2,2,2].lastIndexOf(2,3)); // 索引0-3中最后一个值为2的元素 返回值3
  • 兼容性：所有浏览器都支持

3.includes()

  • 功能：检查数组是否包含指定的元素
  • 参数 ：includes(searchElement[, fromIndex])要查找的元素，可选的起始索引
  • 返回值：布尔值
  • 示例：
js 复制代码 
console.log([1,3,5,2].includes(3)); // true
console.log([1,3,5,2].includes(3,1)); // true 索引1开始有3
console.log([1,3,5,2].includes(3,2)); // false 索引2开始没有3
  • 兼容性：ES7+，IE不支持

4.find()

  • 功能：返回数组中满足条件的第一个元素
  • 参数 ：find(callback(element[, index[, array]])[, thisArg])回调函数，可选的 this 值
  • 返回值：第一个满足条件的元素或 undefined
  • 示例：
js 复制代码 
var arr = [1, 2, 3, 4, 5];
var result = arr.find(function(item, index, arr) {
    return item > 3;
});
console.log(result); // 4
console.log(arr.find(item=>item==6)) // undefined
  • 兼容性：ES6+，IE不支持

5.findIndex()

  • 功能：返回数组中满足条件的第一个元素的索引
  • 参数 ：findIndex(callback(element[, index[, array]])[, thisArg])回调函数，可选的 this 值
  • 返回值：第一个满足条件的元素索引或 -1
  • 示例：
js 复制代码 
var arr = [1, 2, 3, 4, 5];
var result = arr.findIndex(function(item, index, arr) {
    return item > 3;
});
console.log(result); // 3
console.log(arr.findIndex(item=>item>5)) // -1
  • 兼容性：ES6+，IE不支持

6.at()

  • 功能：通过索引获取数组元素
  • 参数 ：at(index)索引（支持负数）
  • 返回值：指定索引的元素
  • 示例：
js 复制代码 
var arr = [1, 2, 3, 4, 5];
console.log(arr.at(2));//3
console.log(arr.at(-2));//4
  • 兼容性：ES2022新增方法 现代浏览器（Chrome 92+、Firefox 90+、Safari 15.4+）

二. 循环迭代方法（不改变原数组）

7.forEach()

  • 功能：对数组中的每个元素执行给定的函数
  • 参数 ：forEach(callback(element[, index[, array]])[, thisArg])回调函数，可选的 this 值
  • 返回值：无/undefined
  • 示例：
js 复制代码 
var arr = [1, 3, 2];
arr.forEach((item,index)=>{
    console.log(item,index);//1,0 3,1 2,2
});
  • 兼容性：ES5+，IE9+

8.map()

  • 功能：创建一个新数组，数组中的每个元素是原数组元素调用函数处理后的值
  • 参数 ：map(callback(element[, index[, array]])[, thisArg])回调函数，可选的 this 值
  • 返回值：新数组，元素为回调函数返回值
  • 示例：
js 复制代码 
var arr = [1, 3, 2];
var newArr = arr.map((item, index)=> {
    return item * 2;
});
console.log(newArr); // [2, 6, 4]
  • 兼容性：ES5+，IE9+

9.filter()

  • 功能：过滤，返回符合条件的新数组
  • 参数 ：filter(callback(element[, index[, array]])[, thisArg])回调函数，可选的 this 值
  • 返回值：新数组，包含满足条件的元素
  • 示例：
js 复制代码 
var arr = [1, 3, 2, 4, 5];
var newArr = arr.filter((item, index) => {
    return item > 2;
});
console.log(newArr);//[3, 4, 5]
  • 兼容性：ES5+，IE9+

10.reduce()

  • 功能：遍历数组中的每一个元素，并通过一个累积器将每次操作的结果累积起来，最终返回一个单一的值
  • 参数 ：reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])回调函数，可选的初始值(从左到右)
  • 返回值：累积结果
  • 示例：
js 复制代码 
var arr = [1, 3, 2, 4, 5];
var sum = arr.reduce((prev, item, index) => {
    return prev + item;
}, 0);
console.log(sum);//15  0+1+3+2+4+5
  • 兼容性：ES5+，IE9+

11.reduceRight()

  • 功能：从右向左累积
  • 参数 ：reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])回调函数，可选的初始值（从右向左）
  • 返回值：累积结果
  • 示例：
js 复制代码 
var arr = [1, 3, 2, 4, 5];
var sum = arr.reduceRight((prev, item, index) => {
    return prev + item;
}, 0);
console.log(sum);//15 0+5+4+2+3+1
  • 兼容性：ES5+，IE9+

12.every()

  • 功能：在数组中所有元素都符合条件，就返回true
  • 参数 ：every(callback(element[, index[, array]])[, thisArg])回调函数，可选的 this 值
  • 返回值：布尔值（所有元素满足条件返回true）查到有一个不符合条件时立即终止返回false
  • 示例：
js 复制代码 
var arr = [1, 3, 2, 4, 5];
var result = arr.every((item, index) => {
    return item > 1;
});
console.log(result); //false
console.log(arr.every(item => item >=1)) //true
  • 兼容性：ES5+，IE9+

13.some()

  • 功能：在数组中只要有一个元素符合条件，就返回true
  • 参数 ：some(callback(element[, index[, array]])[, thisArg])回调函数，可选的 this 值
  • 返回值：布尔值 (任一满足条件时立即终止返回true，全部不满足时返回false)
  • 示例：
js 复制代码 
var arr = [1, 3, 2, 4, 5];
var result = arr.some((item, index) => {
    return item > 4;
});
console.log(result);//true
console.log(arr.some((item,index)=>item>5)) //false
  • 兼容性：ES5+，IE9+

三. 转换方法（不改变原数组）

14.join()

  • 功能：将数组根据分隔符拼接成字符串
  • 参数 ：join([separator])可选分隔符（默认逗号）
  • 返回值：字符串
  • 示例：
js 复制代码 
var arr = [1, 3, 2, 4, 5];
var result = arr.join()
console.log(result);// 1,2,3,4,5
console.log(arr.join('-'));// 1-2-3-4-5
  • 兼容性：所有浏览器都支持

15.toString()

  • 功能：将数组转换成字符串
  • 参数：无参数
  • 返回值：逗号分隔的字符串
  • 示例：
js 复制代码 
var arr = [1, 3, 2, 4, 5];
var result = arr.toString()
console.log(result);// 1,2,3,4,5

兼容性：所有浏览器都支持

16.toLocaleString()

  • 功能：将数组中的所有元素转换为字符串，并根据本地语言环境的规则将这些字符串连接起来形成一个新的字符串。它会根据不同国家和语言的习惯，例如数字格式、货币符号、日期格式等来格式化数组中的每一个元素。这在需要向用户展示符合其本地习惯的数据时非常有用。
  • 参数 ：toLocaleString([locales[, options]]) 可选的区域设置和选项
  • 返回值：本地化字符串
  • 示例：
js 复制代码 
// 典型应用场景
// 1.国际化数字/日期显示
// 2.多语言网站中的列表格式化
// 3.财务报表等需要本地化格式的场景 等等
var prices = [1234.56, 7890.12];
var priStr1= prices.toLocaleString();
var priStr2= prices.toLocaleString('zh-CN');
var priStr3= prices.toLocaleString('zh-CN', {
  style: 'currency',
  currency: 'CNY'
});
console.log(priStr1); // "1,234.56,7,890.12"
console.log(priStr2); // "1,234.56,7,890.12"
console.log(priStr3); // "¥1,234.56,¥7,890.12"

var dates = [new Date(2025, 2, 1), new Date(2025, 6, 31)];
var dateResult = dates.toLocaleString();
console.log(dateResult); 
// "2025/3/1 00:00:00,2025/7/31 00:00:00"，日期也会根据本地设置进行格式化

// 空位（empty slots）会转换为空字符串
console.log([,1].toLocaleString()); // ",1"
  • 兼容性：ES5+，IE9+

17.concat()

  • 功能：连接两个或多个数组
  • 参数 ：concat(value1[, value2[, ...[, valueN]]]) 要连接的值或数组
  • 返回值：新数组
  • 示例：
js 复制代码 
var arr1 = [1, 2];
var arr2 = arr1.concat(3);
var arr3 = arr1.concat([3],4,[5])
console.log(arr2); // [1, 2, 3]
console.log(arr3); // [1, 2, 3, 4, 5]
  • 兼容性：所有浏览器都支持

18.slice()

  • 功能：截取数组的一部分
  • 参数 ：slice([start[, end]]) 可选的起始和结束索引
  • 返回值：新数组（浅拷贝）
  • 示例：
js 复制代码 
var arr = [1, 2, 3, 4, 5, 6, 7];
var slicedArr1 = arr.slice(2);
var slicedArr2 = arr.slice(2, 5);  // 返回数组不包含结束索引的元素
console.log(slicedArr1); // [3, 4, 5, 6, 7]
console.log(slicedArr2); // [3, 4, 5]
  • 兼容性：所有浏览器都支持

19.flat()

  • 功能：选择性展开嵌套数组
  • 参数 ：flat([depth]) 可选的展开深度（默认1）
  • 返回值：新数组（展开嵌套数组）
  • 示例：
js 复制代码 
var arr = [1, [2, [3, [4]]]];
var flatArr1 = arr.flat();
var flatArr2 = arr.flat(2);
var flatArr3 = arr.flat(3);
console.log(flatArr1);// [1, 2, [3, [4]]]
console.log(flatArr2);// [1, 2, 3, [4]]
console.log(flatArr3)// [1, 2, 3, 4]
  • 兼容性：ES8+，IE 不支持

20.flatMap()

  • 功能：使用映射函数遍历并映射数组中的每个元素，然后将结果扁平化为一维数组
  • 参数 ：flatMap(callback(element[, index[, array]])[, thisArg]) 映射函数，可选的 this 值
  • 返回值：新数组（映射后展开一层）
  • 示例：
js 复制代码 
// flatMap() 相当于 map() + flat(1)
var arr = [1, 2, 3];
// map 会保留嵌套结构
var mapArr = arr.map(x => [x, x * 2]);
console.log(mapArr); // [[1, 2], [2, 4], [3, 6]]
// map + flat
var mapAndFlat = arr.map(x => [x, x * 2]).flat();
console.log(mapAndFlat);// [1, 2, 2, 4, 3, 6]
// flatMap 会展开一层
var flatMapArr = arr.flatMap(x => [x, x * 2]);
console.log(flatMapArr); // [1, 2, 2, 4, 3, 6]
var flatMapArr2 = arr.flatMap(x => x * 2); //如果映射函数返回非数组值，该值不会被展开
console.log(flatMapArr2);//[2, 4, 6]
  • 兼容性：ES8+，IE 不支持

四. 添加/删除元素方法（改变原数组）

21.push()

  • 功能：向数组末尾添加一个或多个元素，并返回新数组的长度
  • 参数 ：push(element1[, ...[, elementN]]) 要添加到末尾的元素
  • 返回值：新数组长度
  • 示例：
js 复制代码 
//push(...items)
var arr = [1, 2, 3];
let newArrLength = arr.push(4);
console.log(arr,newArrLength);//[1, 2, 3, 4] 4
arr.push(5,6,7);
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]
  • 兼容性：所有浏览器都支持

22.pop()

  • 功能：删除数组的最后一个元素，并返回被删除的元素
  • 参数：无
  • 返回值：尾部删除的元素或 undefined
  • 示例：
js 复制代码 
var arr = [1,2,3,4,5];
console.log(arr.pop()); // 5
console.log(arr);// [1, 2, 3, 4]
arr=[];
console.log(arr.pop());// undefined
  • 兼容性：所有浏览器都支持

23.unshift()

  • 功能：向数组开头添加一个或多个元素，并返回新数组的长度
  • 参数 ：unshift(element1[, ...[, elementN]]) 要添加到开头的元素
  • 返回值：新数组长度
  • 示例：
js 复制代码 
var arr = [5,6];
console.log(arr.unshift(4));//3
console.log(arr);// [4, 5, 6]
arr.unshift(1,2,3)
console.log(arr);// [1, 2, 3, 4, 5, 6]
  • 兼容性：所有浏览器都支持

24.shift()

  • 功能：删除数组的第一个元素，并返回被删除的元素
  • 参数：无
  • 返回值：头部删除的元素或 undefined
  • 示例：
js 复制代码 
var arr = [1,2,3,4,5];
console.log(arr.shift()); // 1
console.log(arr);// [2, 3, 4 , 5]
arr=[];
console.log(arr.shift());// undefined
  • 兼容性：所有浏览器都支持

25.splice()

  • 功能：向数组中添加/删除/替换元素
  • 参数 ：splice(start[, deleteCount[, item1[, item2[, ...]]]]) 起始索引，删除数量，要插入的元素
  • 返回值：被删除的元素组成的数组
  • 示例：
js 复制代码 
var arr = [1,2,3,4,5];
console.log(arr.splice(2,1,6,7));//[3] 索引为2的元素被删除，并插入6，7
console.log(arr);//[1, 2, 6, 7, 4, 5]
console.log(arr.splice(2));// [6, 7, 4, 5] 从索引2开始删除后面所有元素
console.log(arr);//[1, 2]

兼容性：所有浏览器都支持

五. 排序/反转方法（改变原数组）

26.reverse()

  • 功能：反转数组中元素的顺序
  • 参数：无
  • 返回值：反转后的原数组
  • 示例：
js 复制代码 
var arr = [1,2,3,4,5];
console.log(arr.reverse()); //[5, 4, 3, 2, 1]
console.log(arr); //[5, 4, 3, 2, 1]
  • 兼容性：所有浏览器都支持

27.sort()

  • 功能：对数组元素进行排序，默认按字符串Unicode编码排序
  • 参数：可选的比较函数（a, b）=> a - b（升序）或b - a（降序）
  • 返回值：排序后的原数组
  • 示例：
js 复制代码 
var arr = [3,2,5,4,1];
console.log(arr.sort());//[1, 2, 3, 4, 5]
console.log(arr);//[1, 2, 3, 4, 5]

console.log(arr.sort(function(a,b){ return a-b; }));//[1, 2, 3, 4, 5]
console.log(arr);//[1, 2, 3, 4, 5]

console.log(arr.sort(function(a,b){ return b-a; }));//[ 5, 4, 3, 2, 1 ]
console.log(arr);//[ 5, 4, 3, 2, 1 ]
  • 兼容性：所有浏览器都支持，但排序稳定性在不同浏览器中可能有差异

六. 其他方法

28.fill()

  • 功能：指定范围内的所有元素替换为固定值
  • 参数 ：fill(value[, start[, end]]) 填充值，起始索引，结束索引
  • 返回值：修改后的原数组
  • 示例：
js 复制代码 
var arr = [1,2,3,4,5];
arr.fill(0, 2, 4);
console.log(arr);//[1, 2, 0, 0, 5]
arr.fill(6);
console.log(arr);//[6, 6, 6, 6, 6]
arr.fill(7, 3);
console.log(arr);//[6, 6, 6, 7, 7]
  • 兼容性：ES6+，IE不支持

29.copyWithin()

  • 功能：从数组的指定位置拷贝元素到数组的另一个指定位置中
  • 参数 ：copyWithin(target[, start[, end]]) 目标位置，源起始位置，源结束位置
  • 返回值：修改后的原数组
  • 示例：
js 复制代码 
var arr = [1, 2, 3, 4, 5, 6];
// arr.copyWithin(3, 0, 3);// 将数组的前半部分复制到后半部分
// console.log(arr); // [1, 2, 3, 1, 2, 3]
arr.copyWithin(-2); // 从倒数第二个位置开始复制
console.log(arr); // [1, 2, 3, 4, 1, 2]
  • 兼容性：ES6+，IE不支持

29.entries()

  • 功能：获取数组的键值对迭代器，常用于需要同时访问索引和元素的场景（如遍历时需修改原数组）
  • 参数：无
  • 返回值：迭代器对象（键值对）
  • 示例：
js 复制代码 
var arr = ['a', 'b', 'c'];
var iterator = arr.entries();
for (const [index, value] of iterator) {
  console.log(index, value); // 输出：0 'a', 1 'b', 2 'c'
}

30.keys()

  • 功能：获取数组索引的迭代器，适用于仅需遍历索引的场景（如生成序列号）
  • 参数：无
  • 返回值：迭代器对象（键）
  • 示例：
js 复制代码 
var arr = ['x', 'y', 'z'];
var iterator = arr.keys();
for (const key of iterator) {
  console.log(key); // 输出：0, 1, 2
}

31.values()

  • 功能：获取数组元素的迭代器，适用于仅需遍历值的场景（如单纯处理元素）
  • 参数：无
  • 返回值：迭代器对象（值）
  • 示例：
js 复制代码 
var arr = [1, 2, 3, 4, 5];
var iterator = arr.values();
for (const value of iterator) {
  console.log(value); // 输出：1, 2, 3, 4, 5
}

七. 静态方法

32.Array.from()

  • 功能 ：将类数组对象（如arguments、NodeList）或可迭代对象（如Set、Map）转换为真正的数组。
  • 参数 ：Array.from(arrayLike[, mapFn[, thisArg]]) 类数组对象，可选的映射函数，可选的 this 值
  • 返回值：新数组
  • 示例：
js 复制代码 
// 转换字符串为字符数组
console.log(Array.from('qian')); // ['q', 'i', 'a', 'n']

// 转换Set为数组
var set = new Set([1, 2, 3]);
console.log(Array.from(set)); // [1, 2, 3]

// 生成数字序列（配合map函数）
console.log(Array.from({ length: 5 }, (_, i) => i * 2)); // [0, 2, 4, 6, 8]
  • 兼容性：ES5+，IE9+

33.Array.of()

  • 功能 ：创建一个包含任意数量参数的新数组，解决new Array()构造函数因参数个数不同产生的歧义
  • 参数 ：Array.of(element0[, element1[, ...[, elementN]]]) 元素列表
  • 返回值：新数组
  • 示例：
js 复制代码 
// 创建包含单个数字的数组
console.log(Array.of(2));// [2]（而 new Array(2) 会创建长度为2的空数组）

// 创建多元素数组
console.log(Array.of(1, 'a', true));// [1, 'a', true]
  • 兼容性‌：ES6+，IE不支持

34.Array.isArray()

  • 功能 ：检测一个值是否为数组，优于instanceof（尤其在多窗口环境下）
  • 参数 ：Array.isArray(value) 要检查的值
  • 返回值：布尔值
  • 示例：
js 复制代码 
var arr = [1, 2];
console.log(Array.isArray(arr)); // true
console.log(Array.isArray({})); // false

// 封装公用方法时，数组参数检测
function sum(values) {
  if (!Array.isArray(values)) throw '参数必须为数组';
  return values.reduce((a, b) => a + b, 0);
}
  • 兼容性：ES5+，IE9+

这些方法涵盖了 JavaScript 数组的大部分操作场景，每种方法都有其特定的用途和特点，本文案例可能不够充足，使用时务必校验可行性。

相关推荐
PineappleCoder40 分钟前
搞定用户登录体验：双 Token 认证（Vue+Koa2）从 0 到 1 实现无感刷新
前端·vue.js·koa
Min;1 小时前
cesium-kit：让 Cesium 开发像写 UI 组件一样简单
javascript·vscode·计算机视觉·3d·几何学·贴图
EveryPossible1 小时前
展示内容框
前端·javascript·css
伊织code2 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰2 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js
拉不动的猪2 小时前
回顾关于筛选时的隐式返回和显示返回
前端·javascript·面试
yinuo2 小时前
不写一行JS！纯CSS如何读取HTML属性实现Tooltip
前端
gnip2 小时前
脚本加载失败重试机制
前端·javascript
遗憾随她而去.2 小时前
Uni-App 页面跳转监控实战：快速定位路由问题
前端·网络·uni-app
码农学院3 小时前
MSSQL字段去掉excel复制过来的换行符
前端·数据库·sqlserver
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03UV安装并设置国内源04阿里最新开源Wan2.2-Animate-14B 本地部署教程：统一双模态框架，MoE架构赋能电影级角色动画与替换05Spec-Kit 使用指南06KGG转MP3工具|非KGM文件|解密音频0746个Nano-banana 精选提示词，持续更新中08Multisim使用教程详尽版--(2025最新版)09Linux下V2Ray安装配置指南10Burp与其他安全工具联动及代理设置教程