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

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

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

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

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

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

四、数组转换字符串方法

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

五、数组拼接与截取方法

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

六、数组查询与填充方法

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

七、数组排序与反转方法

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

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

<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>

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

1. 修改原数组的方法（谨慎使用）
   push、unshift、pop、shift、splice、reverse、sort、fill
2. 不修改原数组的方法（推荐，无副作用）
   toString、join、concat、slice、indexOf
3. 功能快速归类

• 新增：push(尾)、unshift(头)、splice(任意位置)
• 删除：pop(尾)、shift(头)、splice(任意位置)
• 转换：toString、join
• 拼接截取：concat、slice
• 查询填充：indexOf、fill
• 排序反转：sort、reverse

写在最后
数组方法是 JavaScript 的核心基本功，无论是原生JS开发、AJAX数据渲染，还是Vue/React列表开发，都离不开这些基础方法。
新手学习建议：不要死记硬背，结合本文案例，逐个取消注释运行，观察数组变化，很快就能熟练掌握，后续处理列表数据会得心应手。