登录
JavaScript 数组方法大盘点：从新手到大佬，快速掌握所有必备技能！🎉
2025年1月17日 21:37
前言
大家好！今天我们将继续深入探索 JavaScript 数组的奥秘！你可能以为 push 和 pop 就是数组操作的全部，但其实数组的世界远不止如此。除了这些基础方法，还有许多其他方法能够让你的数组操作如鱼得水，大幅提高开发效率。今天的目标是帮助你从新手晋升为 JavaScript 数组高手，不仅掌握常用方法，还会揭秘一些鲜为人知的“宝藏”方法。让我们继续这段魔法般的数组之旅吧！🚀
相关方法
1. push() 和 pop()
-
push()：将一个或多个元素添加到数组末尾，并返回数组的新长度。 -
pop()：从数组末尾删除一个元素，返回被删除的元素。
const fruits = ['apple', 'banana'];
fruits.push('orange'); // 添加橙子
console.log(fruits); // ['apple', 'banana', 'orange']
const lastFruit = fruits.pop(); // 删除最后一个元素
console.log(lastFruit); // 'orange'
console.log(fruits); // ['apple', 'banana']
2. shift() 和 unshift()
-
shift()：删除数组中的第一个元素，返回被删除的元素。 -
unshift()：将一个或多个元素添加到数组的开头，返回数组的新长度。
const numbers = [1, 2, 3, 4];
numbers.unshift(0); // 在数组开头添加 0
console.log(numbers); // [0, 1, 2, 3, 4]
const firstNumber = numbers.shift(); // 删除第一个元素
console.log(firstNumber); // 0
console.log(numbers); // [1, 2, 3, 4]
3. map()
-
map()：创建一个新数组，数组中的每个元素是原数组元素调用指定函数处理后的结果。
let numbers = [1, 2, 3, 4];
let squared = numbers.map((num) => num ** 2); // 数组中每个数字平方
console.log(squared); // [1, 4, 9, 16]
4. filter()
-
filter()：创建一个新数组，包含所有通过指定条件函数筛选出的元素，原数组不受影响。
let ages = [12, 18, 25, 30, 15];
let adults = ages.filter((age) => age >= 18); // 筛选出年龄大于等于 18 的人
console.log(adults); // [18, 25, 30]
5. reduce()
-
reduce()：对数组中的每个元素执行指定的累加操作，最终返回单一结果（如求和、拼接等）。
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, num) => acc + num, 0); // 数组求和
console.log(sum); // 10
6. forEach()
-
forEach()：对数组的每个元素执行指定的回调函数，不返回结果，常用于遍历。
let colors = ['red', 'green', 'blue'];
colors.forEach(color => console.log(color)); // 打印每个颜色
// 输出：
// red
// green
// blue
7. find() 和 findIndex()
-
find()：返回第一个满足条件的元素，如果没有找到，则返回undefined。 -
findIndex()：返回第一个满足条件的元素的索引，如果没有找到，则返回 -1。
let users = [{ name: 'Tom', age: 20 }, { name: 'Jerry', age: 25 }];
let user = users.find(user => user.name === 'Tom'); // 查找 Tom
console.log(user); // { name: 'Tom', age: 20 }
let index = users.findIndex(user => user.name === 'Jerry'); // 查找 Jerry 的索引
console.log(index); // 1
8. sort()
-
sort()：对数组元素进行排序，默认按字符串字典序排列。如果要按数字大小排序，需要提供比较函数。
let nums = [4, 2, 8, 5];
nums.sort((a, b) => a - b); // 数字升序排序
console.log(nums); // [2, 4, 5, 8]
9. slice() 和 splice()
-
slice()：返回数组的一个新数组，包含指定起始和结束位置之间的元素，不会改变原数组。 -
splice()：可以删除或插入数组中的元素，直接改变原数组。
let animals = ['dog', 'cat', 'rabbit', 'bird'];
let selectedAnimals = animals.slice(1, 3); // 获取从索引 1 到 3 的元素
console.log(selectedAnimals); // ['cat', 'rabbit']
console.log(animals); // ['dog', 'cat', 'rabbit', 'bird']
animals.splice(2, 1, 'fish'); // 删除第 2 个元素，插入 'fish'
console.log(animals); // ['dog', 'cat', 'fish', 'bird']
10. concat()
-
concat()：合并两个或多个数组，返回一个新数组。
let array1 = [1, 2];
let array2 = [3, 4];
let combined = array1.concat(array2); // 合并数组
console.log(combined); // [1, 2, 3, 4]
11. join()
-
join()：将数组中的所有元素连接成一个字符串，元素间可以指定分隔符。
let fruits = ['apple', 'banana', 'cherry'];
let fruitString = fruits.join(' & '); // 用 '&' 连接数组元素
console.log(fruitString); // 'apple & banana & cherry'
12. some() 和 every()
-
some()：只要有至少一个元素符合条件，返回true，否则返回false。 -
every()：只有所有元素都符合条件，返回true，否则返回false。
let numbers = [10, 20, 30, 40];
let hasLargeNumber = numbers.some(num => num > 25); // 判断是否有大于 25 的元素
console.log(hasLargeNumber); // true
let allLargeNumbers = numbers.every(num => num > 5); // 判断所有数字是否都大于 5
console.log(allLargeNumbers); // true
13. from()
-
from()：将类数组对象或可迭代对象转换为数组。
let str = 'hello';
let arr = Array.from(str); // 将字符串转换为数组
console.log(arr); // ['h', 'e', 'l', 'l', 'o']
14. fill()
-
fill()：用指定的值填充数组的指定位置，填充的元素会改变原数组。
let numbers = [1, 2, 3, 4];
numbers.fill(0, 2, 4); // 从索引 2 到 4 填充为 0
console.log(numbers); // [1, 2, 0, 0]
15. includes()
-
includes()：判断数组中是否包含某个特定的元素，返回布尔值。
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('orange')); // false
16. reverse()
-
reverse()：将数组的元素反转，直接修改原数组。
let numbers = [1, 2, 3, 4];
numbers.reverse(); // 反转数组
console.log(numbers); // [4, 3, 2, 1]
17. indexOf() 和 lastIndexOf()
-
indexOf()：返回数组中首次出现指定元素的索引，若没有找到，返回-1 -
lastIndexOf()：返回数组中最后一次出现指定元素的索引，若没有找到，返回-1
let fruits = ['apple', 'banana', 'cherry', 'banana'];
console.log(fruits.indexOf('banana')); // 1（返回第一个 banana 的索引）
console.log(fruits.lastIndexOf('banana')); // 3（返回最后一个 banana 的索引）
console.log(fruits.indexOf('grape')); // -1（未找到 grape）
18. Array.isArray()
-
Array.isArray()：判断传入的值是否是一个数组，返回true或false。
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false
console.log(Array.isArray({ name: 'Tom' })); // false
总结
这些 JavaScript 数组方法就像是数组的超级英雄，掌握它们，你就能让数组操作事半功倍！从基础的增删查改到高级的 map、reduce，以及一些不常用但极具威力的方法如 from、fill 和 includes，都能帮助你在开发中大显身手。希望今天的分享能够让你在
数组的世界里游刃有余！如果你有其他的数组操作技巧，欢迎留言讨论！🔧
