JavaScript数组常用API详解：增删改查与遍历操作
本文系统总结了JavaScript中22种常用数组API，涵盖增删改查、遍历映射、排序转换等核心操作。详细解析push、pop、shift、unshift等基础方法，以及slice、splice、concat等截取合并技巧。深入讲解forEach、map、filter、reduce等高阶函数用法，并介绍includes、findIndex、sort、reverse等查找与排序工具，帮助开发者提升前端数据处理效率。
一、引言
在前端开发领域，数组是最基础且应用广泛的数据结构之一。为了高效处理数据，JavaScript提供了丰富的内置方法。本文将梳理前端开发中高频使用的数组API，内容覆盖元素的增删、截取、合并及类型转换等关键操作。
二、push() 方法和 pop() 方法
push() 函数允许在数组尾部追加一个或多个新元素，执行后返回更新后的数组长度。
const fruits = ['苹果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits); //[ '苹果', '香蕉', '橘子', '西瓜' ]
console.log(res); //4pop() 函数负责移除并返回数组的最后一个元素，从而缩短数组长度。
const fruits = ['苹果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits); // ['苹果', '香蕉']
console.log(lastFruit); //橘子三、shift() 方法和 unshift() 方法
shift() 函数用于移除并返回数组的第一个元素，使后续元素索引前移。
const fruits = ['苹果', '香蕉', '橘子'];
const firstFruit = fruits.shift();
console.log(fruits); //[ '香蕉', '橘子' ]
console.log(firstFruit); //苹果unshift() 函数允许在数组头部插入一个或多个元素，并返回修改后的数组新长度。
const fruits = ['苹果', '香蕉'];
const newLength = fruits.unshift('橘子', '西瓜');
console.log(fruits); //[ '橘子', '西瓜', '苹果', '香蕉' ]
console.log(newLength); //4四、slice() 方法
slice() 函数用于从数组中提取指定范围的元素，并返回一个包含这些元素的新数组，原数组保持不变。
其语法格式为：array.slice(start, end)。其中 start 和 end 均为可选参数，分别指定提取的起始索引和结束索引（不包含 end）。若省略参数，则默认提取整个数组。该方法始终返回一个新数组，包含从 start 索引到 end 索引之前的所有元素。
const names = ['张三', '李四', '王五', '赵六'];
const slicedNames = names.slice(1, 3);
const slicedNames1 = names.slice();
const slicedNames2 = names.slice(0);
const slicedNames3 = names.slice(2);
const slicedNames4 = names.slice(3);
const slicedNames5 = names.slice(4);
//slice不改变原数组
console.log(names); //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames); //[ '李四', '王五' ]
console.log(slicedNames1); //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames2); //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames3); //[ '王五', '赵六' ]
console.log(slicedNames4); //[ '赵六' ]
console.log(slicedNames5); //[] 参数大于等于4时就输出空数组五、splice() 方法
splice() 函数用于对数组进行删除、替换或添加元素的操作，并返回被删除元素组成的数组。该操作会直接修改原数组。
语法格式为：array.splice(start, deleteCount, item1, item2, ...)。
参数 start 指定修改的起始位置，deleteCount 指定要删除的元素数量，item1、item2 等表示要插入的新元素。若 deleteCount 设为 0，则表示仅执行添加操作而不删除任何元素。
//实现删除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2)); //[ 1, 2 ] 返回被删除的元素
console.log(arr); //[ 3, 4, 5 ] 该方法会改变原数组
//实现添加
let arr2 = [1,2,3,4,5]
console.log(arr2.splice(1,0,666,777)); //[] 返回空数组，没有删除元素
console.log(arr2); //[ 1, 666, 777, 2, 3, 4, 5 ] 原数组改变了
// 实现替换
let arr3 = [1,2,3,4,5]
console.log(arr3.splice(2,1,"aaa","bbb")); //[ 3 ] 返回被删除的一个元素
console.log(arr3); //[ 1, 2, 'aaa', 'bbb', 4, 5 ] 可以添加字符串
let arr4 = [1,2,3,4,5]
console.log(arr4.splice(1,4,666)); //[ 2, 3, 4, 5 ] 返回被删除的四个元素
console.log(arr4); //[ 1, 666 ]六、join() 方法
join() 函数用于将数组中的所有元素使用指定的分隔符连接成一个字符串。
const fruits = ['苹果', '香蕉', '橘子'];
const joinedString = fruits.join(',');
console.log(fruits); //[ '苹果', '香蕉', '橘子' ]
console.log(joinedString); //苹果,香蕉,橘子七、concat() 方法
concat() 函数用于合并两个或多个数组，并返回一个包含所有合并元素的新数组，原数组不受影响。
const fruits1 = ['苹果', '橘子'];
const fruits2 = ['西瓜', '蓝莓'];
const combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); //[ '苹果', '橘子', '西瓜', '蓝莓' ]八、forEach() 方法
forEach() 函数用于遍历数组，对每个元素执行指定的回调函数，通常用于执行副作用操作。
const fruits = ['火龙果', '蓝莓', '西瓜', '葡萄'];
fruits.forEach(fruit => {
console.log(fruit); //火龙果 蓝莓 西瓜 葡萄
});九、map() 方法
map() 函数用于遍历数组，对每个元素执行回调函数，并返回一个由回调函数返回值组成的新数组。
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[ 1, 4, 9, 16, 25 ]十、filter() 方法
filter() 函数用于筛选数组中满足特定条件的元素，并返回包含所有符合条件元素的新数组。
//筛选出偶数
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); //[ 2, 4 ]十一、reduce() 方法
reduce() 是数组对象的一个高阶方法，用于将数组元素按照指定的累加规则进行归并计算，最终返回一个单一的值。
语法格式为：array.reduce(callback, initialValue)。
该方法接收两个参数：第一个是回调函数，第二个是可选的初始值。回调函数内部可接收四个参数，分别是：
- accumulator：累加器，用于存储上一次回调执行的返回值或初始值。
- currentValue：当前正在处理的数组元素值。
- currentIndex：当前元素的索引值。
- array：调用 reduce 方法的数组对象本身。
initialValue 为可选参数，用于指定累加器的初始值。
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, num) => {
return acc + num
}, 10);
console.log(sum); //25
//如果初始值是设为0，则输出15十二、fill() 方法
JavaScript 中的 fill 方法用于填充数组中的所有或部分元素，该操作会直接修改原数组。
语法格式为：array.fill(value, start, end)。
参数 value 表示要填充的值，start 和 end 分别指定填充的起始和结束位置（不包含 end）。若省略 start 和 end，则默认填充整个数组。该方法返回被修改后的原数组引用。
let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]
//将数组中从位置2到位置4(不包括位置4)的元素都填充为6
arr.fill(6, 2, 4);
console.log(arr); //[ 0, 0, 6, 6, 0 ]十三、数组查找API
1.includes()方法
includes 方法用于检测数组中是否包含指定元素，若存在则返回 true，否则返回 false。
与 indexOf() 不同，includes() 不支持指定起始搜索位置，它始终从数组开头开始遍历查找。
const fruits = ['苹果', '香蕉', '橘子', '西瓜', 1, 2, 3];
console.log(fruits.includes('橘子')); //true
console.log(fruits.includes('葡萄')); //false
console.log(fruits.includes(3)); //true
console.log(fruits.includes(4)); //false2.indexOf()方法
需注意，indexOf 方法仅返回第一个匹配元素的索引。若数组中存在多个相同元素，该方法只返回首个元素的位置。
此外，indexOf 方法接受一个可选的第二个参数，用于指定开始查找的起始索引位置。
const fruits = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
console.log(fruits.indexOf('橘子', 1)); //2 返回元素下标
console.log(fruits.indexOf('橘子', 3)); //-1 没有该元素
const arr = [1,2,3,4,5,6,7,6,6,5];
// 从下标6开始查找元素5
console.log(arr.indexOf(5,6)); //93.lastIndexOf()()方法
lastIndexOf() 方法用于查找元素在数组中最后一次出现的索引位置，若找到则返回该索引，否则返回 -1。
const fruits = ['火龙果', '橘子', '蓝莓', '西瓜', '葡萄', '橘子'];
console.log(fruits.lastIndexOf('橘子')); //5
console.log(fruits.lastIndexOf('柚子')); //-14.findIndex()方法
findIndex() 方法用于查找满足特定条件的第一个元素的索引，若找到则返回该索引值，否则返回 -1。
const arr = [1, 2, 3, 4, 5, 6];
const index = arr.findIndex(num => num > 3);
console.log(index); //3 返回第一个符合条件的元素的下标
const index2 = arr.findIndex(num => num > 10);
console.log(index2); //-1 不存在符合条件的元素十四、sort() 方法
sort() 方法用于对数组进行原地排序，直接修改原始数组而不创建新数组。默认情况下，它将元素转换为字符串并按 Unicode 码点顺序排序。通过传入自定义比较函数，可以实现基于数值或其他规则的排序。
比较函数接收两个参数，通常命名为 a 和 b，代表参与比较的两个元素。该函数应返回负数、零或正数，以指示 a 应排在 b 之前、相同位置或之后。返回值规则如下：
- 若返回值小于 0，则 a 排在 b 前面。
- 若返回值等于 0，则 a 和 b 的相对顺序保持不变。
- 若返回值大于 0，则 a 排在 b 后面。
const arr = [3, 1, 5, 2, 4];
arr.sort();
console.log(arr); //[1, 2, 3, 4, 5]
//默认排序（按照 Unicode 码点排序）
const arr = ['f', 'k', 'c', 'a', 'b'];
arr.sort();
console.log(arr); //[ 'a', 'b', 'c', 'f', 'k' ]
//使用比较函数进行自定义排序
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => a - b);
console.log(arr); //[ 1, 2, 10, 13, 26, 66 ]
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => b - a);
console.log(arr); //[ 66, 26, 13, 10, 2, 1 ]十五、reverse() 方法
reverse() 方法用于反转数组中元素的顺序，即将数组元素逆序排列，该操作会直接修改原数组。
const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); //[ 5, 4, 3, 2, 1 ]十六、toString()和toLocaleString()方法
toString 方法将数组转换为字符串，元素之间以逗号分隔。
const arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); //1,2,3,4,5
const arr2 = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
const arr3 = ['a', 'null', 'b', 'c', 'undefined', 'd', 'e']
console.log(arr2.toString()); //苹果,蓝莓,橘子,西瓜,葡萄
console.log(arr3.toString()); //a,null,b,c,undefined,d,etoLocaleString 方法同样将数组转换为逗号分隔的字符串，但会根据当前运行环境的语言和地区设置来格式化元素（如日期、货币等）。
//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
//我补充写作的时间
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19
const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000十七、Array.from() 方法
Array.from() 是 JavaScript 提供的静态方法，用于从类数组对象或可迭代对象创建一个新的数组实例。它接收一个可迭代源，并返回对应的新数组。
语法格式为：Array.from(iterable, mapFn, thisArg)。
- iterable：必需参数，表示用于创建新数组的可迭代对象或类数组对象。
- mapFn (可选)：一个映射函数，用于对每个元素进行处理，其返回值将构成新数组的元素。
- thisArg (可选)：执行 mapFn 函数时绑定的 this 值。
//使用字符串创建数组
const str = "Hello";
const arr = Array.from(str);
console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]//使用类似数组的对象创建数组
const obj = {
0: "榴莲",
1: "牛油果",
2: "蓝莓",
length: 3
};
const arr = Array.from(obj);
console.log(arr); //[ '榴莲', '牛油果', '蓝莓' ]//使用映射函数处理数组元素
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = Array.from(numbers, num => num * 2);
console.log(doubledNumbers); //[ 2, 4, 6, 8, 10 ]十八、最后的话
本文全面介绍了前端开发中常用的数组 API，涵盖了元素的增删、截取、合并、转换、遍历及排序等核心操作。熟练掌握这些方法能显著提升开发效率。在实际项目中，请根据具体业务需求选择最合适的数组操作方法。
以上就是22种JavaScript中数组常用API总结的详细内容，更多关于JavaScript数组的资料请关注本站其它相关文章！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38