首页 > 网络编程 > JavaScript > javascript技巧 > JS数组常用方法

JavaScript中数组常用的十种方法总结

2025-09-06 09:08:57 投稿：daisy

JavaScript提供了许多强大的数组方法,让你可以轻松地操作和修改数组,下面这篇文章主要介绍了JavaScript中数组常用的十种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

本文介绍js数组的常用的10中方法，以是否改变原数组，配合代码以及注释，将一些常用的数组方法整理出来。

首先我们会改变原数组的方法有：

push / pop / unshift / shift / splice / sort / reverse

不改变原数组，也就是生成新数组的方法有：

/ concat / slice / map / filter

返回其他值的有：

/ reduce / find / findIndex / every / includes / indexOf/

1.改变原数组

1.1 push()方法

push方法作用在尾部，进行新增值，并且返回值是length长度，不是新数组

const arr = ['a'];
const arr1 = arr.push('ss', 'ee')
console.log(arr1);               //打印出 3，因为 push 方法返回的是数组的长度
console.log(arr);                 //打印出 ['a', 'ss', 'ee']

1.2 pop()方法

pop()方法删除数组的最后一个元素，并返回被删除的那个元素

const last = arr.pop();
console.log(last);                  // 'ee'
console.log(arr);                   // ['a', 'ss']

1.3 unshift() 和 shift() 方法

• unshift：头部插入元素 → 返回新 length
• shift：删除第 1 个元素 → 返回被删元素，数组为空的话返回underfined

arr.unshift('head');   // 返回 3，arr头部添加了一个元素
console.log(arr);                   // ['head', 'a', 'ss']
arr.shift();// 返回 'head'，arr删除第一个元素
console.log(arr);                   // ['a', 'ss']

1.4 splice() 方法

语法：arr.splice(start,deleteCount?,...items?)

方法:三个参数的意思为，从start开始，删除deleteCount个元素，再把items放进去，问号？代表可选，返回由被删除的元素组成的新数组，没有删除的话则是空数组

const nums = [0, 1, 2, 3, 4];
const deleted = nums.splice(2, 2, 'a', 'b'); // 从索引 2 开始，删除 2 个元素，并替换成 'a' 和 'b'
console.log(deleted);                // ['2', '3']
console.log(nums);                  // ['0', '1', 'a', 'b', '4']

1.5 sort() 方法和 reverse() 方法

sort()正向排序。返回的是排序后的原数组的本身

reverse()逆向排序。返回的是反转后的原数组本身。

const nums = [3, 1, 4, 1, 5];
nums.sort((a, b) => a - b); // 升序
console.log(nums);
nums.reverse((a, b) => b - a);             // 反转
console.log(nums);          // [5, 4, 3, 1, 1]

sort里面可写可不写

2.生成新数组

2.1contact()方法

进行数组的合并，并返回新的数组

const a = [1, 2];
const b = a.concat([3, 4], 5); // 支持打散参数
console.log(a); // [1, 2]  原数组不变
console.log(b); // [1, 2, 3, 4, 5]

2.2 slice() 方法

作用：进行切片的拷贝，截取子数组，返回的是切片后的新数组

const arr = [0, 1, 2, 3, 4];
const sub = arr.slice(1, 4); // 左闭右开
console.log(sub); // [1, 2, 3]
const copy = arr.slice();    // 不传参就是全拷贝
console.log(copy); // [0, 1, 2, 3, 4]

2.3 map() 方法

作用：对数组的一一映射，生成对应的新数组 → 返回映射后的新数组

const nums = [1, 2, 3];
const squares = nums.map(n => n * n);
console.log(nums);    // [1, 2, 3]
console.log(squares); // [1, 4, 9]

2.4 filter() 方法

作用：条件过滤 → 返回过滤后的新数组

const users = [
  { id: 1, vip: true },
  { id: 2, vip: false },
];
const vipUsers = users.filter(u => u.vip); // 遍历users数组，过滤条件是筛选出vip属性为true的用户对象
console.log(vipUsers);  // 输出过滤后的vip用户数组，返回[{id: 1, vip: true}]

3.返回其他值的方法

3.1 reduce() 方法

作用：累积聚合 → 返回累积结果（任意类型）

语法为： const sum = nums.reduce((acc, cur) => acc + cur, 0);

使用 reduce 方法计算数组所有元素的总和
acc 是累加器（accumulator），初始值为0
cur 是当前元素（current element）
每次迭代将当前元素加到累加器上

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 遍历nums数组，reduce方法接收一个函数作为参数，该函数接收两个参数，acc是累计值，cur是当前值,0是初始值
const max = nums.reduce((max, cur) => cur > max ? cur : max); // 遍历nums数组，reduce方法接收一个函数作为参数，该函数接收两个参数，max是累计值，cur是当前值,0是初始值

3.2 find() 方法和 findIndex() 方法

find：首个匹配元素 → 返回该元素或 undefined
findIndex：首个匹配索引 → 返回索引或 -1

const users = [{ id: 3 }, { id: 5 }];
const user5 = users.find(u => u.id === 5);      // 返回第一个满足条件的用户对象,
console.log(user5); // { id: 5 }
const idx = users.findIndex(u => u.id === 5);   // 返回第一个满足条件的用户对象的索引
console.log(idx); // 1

3.3 every() 方法和 some() 方法和 includes() 方法

• every：全真为真 → 返回布尔值
• some：一真即真 → 返回布尔值
• includes：是否包含某值 → 返回布尔值

[2, 4, 6].every(n => n % 2 === 0);  // true
[2, 5, 6].some(n => n % 2 !== 0);   // true
[1, 2, NaN].includes(NaN);          // true

4.总结

其中需要遍历的方法有：sort（）,reverse()，map()，filter()，reduce（）、find（）、findIndex（）、every（）、some（），includes()，js中数组的方法有很多，我目前只整理了这几个常用的方法，不断的使用这些方法，能帮助我了解更多js知识点，也能帮助我更好的应用到实战当中。

到此这篇关于JavaScript中数组常用的十种方法的文章就介绍到这了,更多相关JS数组常用方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！