当前位置：首页 > news >正文

JS数组方法超全详解｜前端必备增删改查、排序、转换实战教程

news 2026/7/21 5:02:54

数组是 JavaScript 中使用频率最高的数据类型，前端开发中数据渲染、列表操作、数据筛选、排序拼接全都依赖数组方法。
很多新手只会声明数组，不会灵活操作数组，导致写不出列表交互、数据处理逻辑。本文结合全套可运行实战代码，一次性讲透前端最常用的 12大核心数组方法，包含增、删、改、查、截取、拼接、排序、反转、转换字符串等，零基础也能直接看懂套用。

一、前置基础：测试数组
全文所有案例统一使用以下字符串数组测试，所有方法效果直观可见：
// 基础测试数组
let arr = [“zhenwo”, “XUGUANG”, “fanxing”, “joushi”, “luoxuan”, “wuxian”, “chana”, “kongmeng”];

二、数组元素新增方法（头部/尾部/指定位置）

push() 尾部新增元素
作用：在数组末尾添加一个或多个新元素
返回值：新增后的数组总长度
是否修改原数组：是
// 尾部新增元素
let newLength = arr.push(‘xz’);
// 输出新数组 + 数组新长度
document.getElementById(‘chele’).innerHTML = arr + “
数组新长度=” + newLength;
unshift() 头部新增元素
作用：在数组开头添加新元素
返回值：新增后的数组总长度
是否修改原数组：是
arr.unshift(‘新增’);
document.getElementById(‘chele’).innerHTML = arr;
splice() 指定位置新增元素
作用：强大的万能方法，可在指定位置插入元素
参数规则：splice(起始索引, 删除个数, 新增元素)
设置删除个数为 0，即可实现纯新增效果
// 在索引1的位置插入「真我」，不删除任何元素
arr.splice(1, 0, ‘真我’);
document.getElementById(‘chele’).innerHTML = arr;

三、数组元素删除方法（头部/尾部/指定位置）

pop() 删除尾部元素
作用：删除数组最后一个元素
返回值：被删除的那个元素
是否修改原数组：是
let delItem = arr.pop();
document.getElementById(‘chele’).innerHTML = arr;
shift() 删除头部元素
作用：删除数组第一个元素
返回值：被删除的那个元素
是否修改原数组：是
arr.shift();
document.getElementById(‘chele’).innerHTML = arr;
splice() 指定位置删除元素
修改第二个参数删除个数，即可实现批量删除元素，是项目中最常用的删除方式。

四、数组转换字符串方法

toString() 纯逗号分隔转换
将数组整体转为字符串，元素默认用逗号分隔
document.getElementById(‘chele’).innerHTML = arr.toString();
join() 自定义分隔符转换
最常用，可自定义分隔符（空字符、加号、横线、空格等）
// 无分隔符拼接
document.getElementById(‘chele’).innerHTML = arr.join(“”)+“
”;
// 加号分隔拼接
document.getElementById(‘chele’).innerHTML += arr.join(“+”)+“
”;

五、数组拼接与截取方法

concat() 数组合并
作用：合并两个或多个数组
重点：不修改原数组，返回全新数组，无数据污染
let numArr = [1,2,3,4,5,6,7];
// 合并字符串数组与数字数组
let newArr = arr.concat(numArr);
document.getElementById(‘chele’).innerHTML = newArr;
slice() 数组截取
作用：截取数组指定区间元素，生成新数组
参数规则：slice(起始索引, 结束索引)左闭右开（取左不取右）
重点：不修改原数组
// 截取索引1到3的元素（1、2）
let sliceArr = arr.slice(1,4);
document.getElementById(‘chele’).innerHTML = sliceArr;

六、数组查询与填充方法

indexOf() 查询元素索引
作用：查找元素在数组中第一次出现的索引
返回值：找到返回索引，没找到返回 -1
// 查找 “luoxuan” 的索引
document.getElementById(‘chele’).innerHTML = arr.indexOf(“luoxuan”);
fill() 数组批量填充
作用：用统一值替换数组所有元素，快速初始化数组
// 所有元素替换为 luoxuan
document.getElementById(‘chele’).innerHTML = arr.fill(“luoxuan”);

七、数组排序与反转方法

reverse() 数组反转
作用：颠倒数组元素顺序
是否修改原数组：是
document.getElementById(‘chele’).innerHTML = arr.reverse();
sort() 数组排序
默认规则：按字符串编码排序，适合字符串数组
注意：纯数字数组需要传入回调函数才能正确排序
// 字符串数组默认排序
document.getElementById(‘chele’).innerHTML = arr.sort();

八、完整整合实战页面（可直接运行）
将所有方法整合为可交互页面，点击按钮切换对应数组效果：

JS数组方法全集实战执行数组方法

等待执行数组操作...

<script> // 基础测试数组 let arr = ["zhenwo", "XUGUANG", "fanxing", "joushi", "luoxuan", "wuxian", "chana", "kongmeng"]; function capital() { // 可取消对应注释，逐个测试所有方法 // 数组转字符串 // document.getElementById('chele').innerHTML = arr.toString(); // join 自定义拼接 // document.getElementById('chele').innerHTML=arr.join("")+"<br>"; // document.getElementById('chele').innerHTML+=arr.join("+")+"<br>"; // push 尾部新增 // let srr =arr.push('真我') // document.getElementById('chele').innerHTML=arr+"<br>新增数组长度="+srr // unshift 头部新增 // arr.unshift('开头新增'); // document.getElementById('chele').innerHTML=arr // pop 删除尾部 // arr.pop() // document.getElementById('chele').innerHTML=arr // shift 删除头部 // arr.shift() // document.getElementById('chele').innerHTML = arr // splice 指定位置新增 // arr.splice(1, 0, '插入元素') // document.getElementById('chele').innerHTML = arr // concat 数组合并 // let srr = [1,2,3,4,5,6,7]; // let xrr = arr.concat(srr) // document.getElementById('chele').innerHTML=xrr // slice 数组截取 // let srr = arr.slice(1,4); // document.getElementById('chele').innerHTML=srr // indexOf 查找索引 // document.getElementById('chele').innerHTML = arr.indexOf("luoxuan") // fill 批量填充 // document.getElementById('chele').innerHTML = arr.fill("luoxuan") // reverse 数组反转 // document.getElementById('chele').innerHTML = arr.reverse() // sort 数组排序 document.getElementById('chele').innerHTML = arr.sort() } </script>

九、数组方法核心分类总结（必记）