JS数组操作怎么进行？JS数组常用操作方法与实例详解

在JavaScript开发中，数组是最常用的数据结构之一。无论是接口返回的数据列表，还是页面中需要循环渲染的内容，几乎都离不开数组的操作。理解并熟练运用JS数组的常用方法，可以让我们在处理数据时更加高效，也能减少不必要的循环嵌套。

一、数组的创建与基础增删

最基础的数组操作包括向数组中添加或移除元素。以下方法会直接修改原数组，使用时要留意对原始数据的影响。

1. push 与 pop

push 在数组末尾添加元素，pop 移除并返回数组最后一个元素。

// 创建数组
let list = ['苹果', '香蕉'];
// 末尾添加
list.push('橘子');
console.log(list); // ['苹果', '香蕉', '橘子']
// 末尾移除
let last = list.pop();
console.log(last); // 橘子
console.log(list); // ['苹果', '香蕉']

2. shift 与 unshift

shift 移除数组第一项，unshift 在数组头部添加元素。

let nums = [2, 3, 4];
nums.unshift(1);
console.log(nums); // [1, 2, 3, 4]
let first = nums.shift();
console.log(first); // 1
console.log(nums); // [2, 3, 4]

二、数组的截取与修改

1. slice 方法

slice 返回选定范围内的新数组，不会修改原数组。第一个参数为起始索引，第二个为结束索引（不包含）。

let arr = [10, 20, 30, 40, 50];
let part = arr.slice(1, 3);
console.log(part); // [20, 30]
console.log(arr);  // [10, 20, 30, 40, 50]

2. splice 方法

splice 可以删除、插入或替换元素，会直接修改原数组。

let colors = ['红', '绿', '蓝'];
// 从索引1删除1项，并插入黄、紫
colors.splice(1, 1, '黄', '紫');
console.log(colors); // ['红', '黄', '紫', '蓝']

三、数组的遍历与处理

1. map 与 filter

map 对每项做转换生成新数组，filter 按条件筛选元素。

let scores = [58, 75, 90, 44];
// 所有分数加5
let newScores = scores.map(function (item) {
  return item + 5;
});
// 筛选及格分数
let pass = scores.filter(function (item) {
  return item >= 60;
});
console.log(newScores); // [63, 80, 95, 49]
console.log(pass);      // [75, 90]

2. reduce 方法

reduce 常用于求和、统计或拼装数据。

let priceList = [12, 8, 20];
let total = priceList.reduce(function (sum, cur) {
  return sum + cur;
}, 0);
console.log(total); // 40

四、其他实用操作

除了上面提到的方法，indexOf 可查找元素位置，includes 判断是否存在，join 将数组转成字符串。

let fruits = ['苹果', '梨', '桃'];
console.log(fruits.indexOf('梨'));   // 1
console.log(fruits.includes('桃'));  // true
console.log(fruits.join('-'));       // 苹果-梨-桃

小结

JS数组操作并不复杂，关键是弄清楚哪些方法会改变原数组，哪些只是返回新数组。把 push、pop、slice、splice、map、filter、reduce 这些方法用熟，日常的大部分数据处理需求都能轻松应对。

JavaScript数组方法数组操作修改时间：2026-07-30 17:36:21