《JavaScript数组方法速查表：从入门到精通，新手必看！》

用户27522180143
29 阅读9分钟

JavaScript 数组是前端开发中最常用的数据结构之一，无论是处理数据列表、实现动态交互还是进行简单的数据处理，掌握数组方法都是学习 JavaScript 的必经之路。对于初学者来说，面对众多的数组方法可能会感到困惑。本文专门为初学者整理了 JavaScript 中常见且实用的数组方法，分为修改原数组和不修改原数组两大类，每个方法都配有通俗易懂的说明、详细的返回值解释和实用的代码示例。无论你是刚刚接触 JavaScript，还是想要系统复习基础知识，这篇文章都能帮助你快速入门，建立清晰的数组方法知识体系！

方法速查表

方法名是否修改原数组主要用途返回值
添加删除类
push是末尾添加元素新长度
pop是删除末尾元素被删除元素
unshift是开头添加元素新长度
shift是删除开头元素被删除元素
splice是任意位置增删改被删除元素数组
排序反转类
sort是数组排序排序后数组
reverse是反转数组反转后数组
填充复制类
fill是填充元素修改后数组
copyWithin是内部复制修改后数组
查找判断类
find否查找首个匹配元素找到的元素
findIndex否查找首个匹配索引索引或-1
includes否判断是否包含布尔值
some否判断是否有满足布尔值
every否判断是否全部满足布尔值
遍历转换类
map否映射为新数组新数组
filter否过滤元素新数组
reduce否累加计算单个值
连接切片类
concat否合并数组新数组
slice否提取子数组新数组
join否连接为字符串字符串

一、修改原数组

1、push（）

  • **说明：**在数组末尾添加一个或多个元素
  • **返回：**新数组的长度
  • 语法：push(element1, element2, ..., elementN)
const arr = [1, 2, 3];

// 添加一个元素
arr.push(4);                    // arr变为[1, 2, 3, 4]，返回4

// 添加多个元素
arr.push(5, 6);                 // arr变为[1, 2, 3, 4, 5, 6]，返回6

// 获取新长度
const newLength = arr.push(7);  // arr变为[1, 2, 3, 4, 5, 6, 7]，newLength为7

2、pop()

  • **说明：**删除数组的最后一个元素
  • **返回值：**被删除的元素
  • 语法：pop()
const arr = [1, 2, 3];
const removed = arr.pop();  // arr变为[1, 2]，removed为3
// 空数组调用pop
const emptyArr = [];
const result = emptyArr.pop();  // arr仍为[]，result为undefined

3. unshift()

  • 说明：在数组开头添加一个或多个元素
  • 返回值：新数组的长度
  • 语法：unshift(element1, element2, ..., elementN)
const arr = [1, 2, 3];

arr.unshift(0);                // arr变为[0, 1, 2, 3]，返回4
arr.unshift(-2, -1);           // arr变为[-2, -1, 0, 1, 2, 3]，返回6

4. shift()

  • 说明：删除数组的第一个元素
  • 返回值：被删除的元素
  • 语法：shift()
const arr = [1, 2, 3];
const first = arr.shift();     // arr变为[2, 3]，first为1
// 如果数组为空
[].shift();                     // 返回undefined

5. splice()

  • 说明：万能的增删改方法，可删除、替换、插入元素
  • 返回值：包含被删除元素的数组
  • 语法：splice(start, deleteCount, item1, item2, ..., itemN)
    • start：修改的起始索引（可为负数，从数组末尾开始计算，-1表示最后一个元素）
    • deleteCount：要删除的元素个数（为0则不删除元素）
    • item1, item2, ..., itemN：要添加到数组的元素（可选，不指定则只删除）
//1、splice()
    const arr1 = [1, 2, 3, 4, 5];
    const reslut1=arr.splice() //arr1:[],reslut2:[1,2,3,4,5]
    
//2、splice(start)
    const arr2 = [1, 2, 3, 4, 5];
    const reslut=arr2.splice(2)//arr2:[1,2],reslut2:[3,4,5]
    
//3、splice(start, deleteCount)
    const arr3 = [1, 2, 3, 4, 5];
    const deleted = arr3.splice(1, 2);//arr3:[1,4,5],reslut3:[2,3]

//4、splice(start, deleteCount, item1, item2, ..., itemN)
    //删除和添加
    const arr4 = [1, 2, 3, 4, 5];
    const reslut = arr4.splice(1, 2, 'a', 'b');//arr4:[1, 'a', 'b', 4, 5],reslut4:[2, 3]
    //仅添加
    const arr5 = [1, 2, 3, 4, 5];
    const reslut = arr5.splice(2, 0, 'x', 'y');//arr5:[1, 2, 'x', 'y', 3, 4, 5],reslut5:[]

6、sort()

  • 说明：对数组元素进行排序（默认按字符串Unicode码点排序）
  • 返回值：排序后的数组
  • 语法：sort(compareFunction)（compareFunction为比较函数，可选）
const arr = [3, 1, 4, 2];
arr.sort();                     // arr变为[1, 2, 3, 4]

// 自定义比较函数
const nums = [40, 100, 1, 5, 25, 10];
nums.sort((a, b) => a - b);    // 升序：[1, 5, 10, 25, 40, 100]
nums.sort((a, b) => b - a);    // 降序：[100, 40, 25, 10, 5, 1]

// 对象数组排序
const users = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];
users.sort((a, b) => a.age - b.age);  // 按年龄升序

7. reverse()

  • 说明：反转数组中元素的顺序
  • 返回值：反转后的数组
  • 语法：reverse()
const arr = [1, 2, 3, 4];
arr.reverse();                  // arr变为[4, 3, 2, 1]

const strArr = ['a', 'b', 'c'];
strArr.reverse();               // arr变为['c', 'b', 'a']

8. fill()

  • 说明：用固定值填充数组中指定范围的元素
  • 返回值：修改后的数组
  • 语法：fill(value, start, end)
    • value：要填充到数组中的值
    • start：填充的起始索引（包含该索引，默认0）
    • end：填充的结束索引（不包含该索引，默认数组长度）
// fill(value)
const arr1 = [1, 2, 3];
arr1.fill(0); // arr1: [0, 0, 0]

// fill(value, start)
const arr2 = [1, 2, 3];
arr2.fill('a', 1); // arr2: [1, 'a', 'a']

// fill(value, start, end)
const arr3 = [1, 2, 3, 4, 5];
arr3.fill('b', 2, 4); // arr3: [1, 2, 'b', 'b', 5]

// 4. 负数start/end
const arr4 = [1, 2, 3, 4];
arr4.fill(9, -3, -1); // 倒数第3位（索引1）到倒数第1位（索引3，不含） → arr4: [1,9,9,4]

9. copyWithin()

  • 说明：复制数组内部指定位置的元素到其他位置
  • 返回值：修改后的数组
  • 语法：copyWithin(target, start, end)
    • target：粘贴的目标位置（超过数组长度则不复制）
    • start：复制的起始索引（包含，默认0）
    • end：复制的结束索引（不包含，默认数组长度）
// copyWithin(target, start)（end默认数组长度）
const arr1 = [1, 2, 3, 4, 5];
arr1.copyWithin(0, 3); // 复制索引3到末尾的元素（4,5）到索引0开始的位置
console.log(arr1); // [4, 5, 3, 4, 5]

//copyWithin(target, start, end)
const arr2 = [1, 2, 3, 4, 5];
arr2.copyWithin(1, 2, 4); // 复制索引2~4（不含4）的元素（3,4）到索引1开始的位置
console.log(arr2); // [1, 3, 4, 4, 5]

// 3. 负数参数
const arr3 = [10, 20, 30, 40];
arr3.copyWithin(-2, -3, -1); // 倒数第3位（索引1）到倒数第1位（索引3，不含）→ 复制20,30到倒数第2位（索引2）
console.log(arr3); // [10, 20, 20, 30]

##二、不修改原数组

1. concat()

  • 说明：合并两个或多个数组，返回新数组
  • 返回值：合并后的新数组
  • 语法：concat(value1, value2, ..., valueN)（value可以是数组或非数组值）
const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2); // [1, 2, 3, 4]
// 原数组不变：arr1还是[1, 2]，arr2还是[3, 4]

2. slice()

  • 说明：提取数组的指定部分元素，返回新数组
  • 返回值：提取的子数组
  • 语法：slice(start, end)（start包含，end不包含；start默认0，end默认数组长度；可为负数，从末尾计算）
const arr = [1, 2, 3, 4, 5];
const part1 = arr.slice(1, 4);    // [2, 3, 4]（提取索引1到3）
const part2 = arr.slice(2);       // [3, 4, 5]（从索引2到最后）
const copy = arr.slice();         // [1, 2, 3, 4, 5]（复制整个数组）

3. map()

  • 说明：对数组每个元素执行函数，返回新数组
  • 返回值：由函数返回值组成的新数组
  • 语法：map(callbackFn, thisArg)（thisArg为执行回调时的this值，可选）
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
const strings = numbers.map(num => `数字${num}`); // ["数字1", "数字2", "数字3"]

4. filter()

  • 说明：筛选出满足条件的元素，组成新数组
  • 返回值：符合条件的元素组成的新数组
  • 语法：filter(callbackFn, thisArg)（thisArg为执行回调时的this值，可选）
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
const greaterThan3 = numbers.filter(num => num > 3); // [4, 5]

5. find()

  • 说明：查找并返回第一个满足条件的元素
  • 返回值：找到的元素，未找到则返回undefined
  • 语法：find(callbackFn, thisArg)（thisArg为执行回调时的this值，可选）
const users = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Charlie'}
];
const user = users.find(user => user.id === 2); // {id: 2, name: 'Bob'}
const found = users.find(user => user.name.includes('B')); // {id: 2, name: 'Bob'}

6. findIndex()

  • 说明：查找并返回第一个满足条件的元素的索引
  • 返回值：找到的元素索引，未找到则返回-1
  • 语法：findIndex(callbackFn, thisArg)（thisArg为执行回调时的this值，可选）
const numbers = [5, 12, 8, 130, 44];
const index1 = numbers.findIndex(num => num > 10); // 1（第一个大于10的是12）
const index2 = numbers.findIndex(num => num > 200); // -1（没找到）

7. includes()

  • 说明：检查数组是否包含指定元素
  • 返回值：包含则返回true，否则返回false
  • 语法：includes(searchElement, fromIndex)（fromIndex为起始查找位置，默认0；可为负数，从末尾计算）
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape'));  // false
console.log(fruits.includes('apple', 1)); // false（从索引1开始找）

8. join()

  • 说明：将数组元素连接为字符串
  • 返回值：连接后的字符串
  • 语法：join(separator)（separator为分隔符，默认逗号）
const arr = ['Hello', 'World'];
console.log(arr.join());      // "Hello,World"（默认逗号）
console.log(arr.join(' '));   // "Hello World"
console.log(arr.join('-'));   // "Hello-World"

9. reduce()

  • 说明：对数组元素执行累加操作，返回单个结果
  • 返回值：最终的累加结果
  • 语法：reduce(callbackFn, initialValue)
    • callbackFn：回调函数（必需），具体为callbackFn(accumulator, currentValue, currentIndex, array)
      1. accumulator:累计值
      2. currentValue：当前值
      3. currentIndex：当前索引
      4. array：原数组
    • initialValue：累加的初始值（可选），若无，会用数组的第一个元素作为初始值，跳过第一个元素开始迭代
// 求和
const sum = [1, 2, 3, 4].reduce((acc, num) => acc + num, 0); // 10

// 求乘积
const product = [1, 2, 3, 4].reduce((acc, num) => acc * num, 1); // 24

// 求最大值（没有初始值时）
const max = [5, 2, 8, 3].reduce((acc, num) => Math.max(acc, num)); // 8

10. some()

  • 说明：检查数组是否至少有一个元素满足条件
  • 返回值：至少有一个满足则返回true，否则返回false
  • 语法：some(callbackFn, thisArg)（thisArg为执行回调时的this值，可选）
const numbers = [1, 2, 3, 4];
const hasEven = numbers.some(num => num % 2 === 0); // true
const hasNegative = numbers.some(num => num < 0);   // false

11. every()

  • 说明：检查数组所有元素是否都满足条件
  • 返回值：所有元素满足则返回true，否则返回false
  • 语法：every(callbackFn, thisArg)（thisArg为执行回调时的this值，可选）
const numbers = [1, 2, 3, 4];
const allPositive = numbers.every(num => num > 0);  // true
const allEven = numbers.every(num => num % 2 === 0); // false

总结

掌握这些数组方法，能让你的 JavaScript 开发更加得心应手。建议在实际开发中多加练习，理解每个方法的适用场景和特性。记住哪些方法会修改原数组，哪些不会，这是避免意外副作用的关键。

如果你觉得这篇文章有帮助，欢迎点赞、收藏或分享！如果有任何疑问或补充，也欢迎在评论区留言交流!

avatar
文章
阅读
粉丝