JavaScript 数组方法详解：全面指南

EndingCoder

于 2025-05-20 11:18:09 发布

阅读量384

点赞数 15

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zimin1985/article/details/148083413

版权

JavaScript 专栏收录该内容

39 篇文章

订阅专栏

JavaScript 数组是存储和操作数据的核心结构，广泛应用于 Web 开发。数组方法是内置工具，允许开发者高效地添加、删除、转换、迭代和搜索数组元素。本文将详细介绍 JavaScript 数组方法，涵盖其功能、语法和实际应用场景，语言简洁清晰，适合初学者和有经验的开发者。基于 2025 年 5 月的 ECMAScript 2023 标准，我们将包括最新方法如 toSorted 和 toReversed，并提供代码示例和应用案例。

1. 数组简介

JavaScript 数组是一个有序的值列表，使用方括号 [] 定义，元素通过索引（从 0 开始）访问。例如：

let fruits = ['苹果', '香蕉', '橙子'];
console.log(fruits[0]); // 苹果
console.log(fruits.length); // 3

数组方法分为变异方法（修改原数组）和非变异方法（返回新数组）。以下按功能分类，逐一讲解。

2. 添加与删除元素

这些方法用于在数组中添加或删除元素，适用于动态数据管理。

2.1 push()

功能：在数组末尾添加一个或多个元素，返回新长度。
语法：array.push(element1, ..., elementN)
示例：

let fruits = ['苹果', '香蕉'];
let newLength = fruits.push('橙子');
console.log(fruits); // ['苹果', '香蕉', '橙子']
console.log(newLength); // 3

应用：向购物车添加新商品。

2.2 pop()

功能：移除并返回数组最后一个元素，修改原数组。
语法：array.pop()
示例：

let fruits = ['苹果', '香蕉', '橙子'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 橙子
console.log(fruits); // ['苹果', '香蕉']

应用：移除最近添加的任务。

2.3 unshift()

功能：在数组开头添加一个或多个元素，返回新长度。
语法：array.unshift(element1, ..., elementN)
示例：

let tasks = ['买牛奶', '遛狗'];
let newLength = tasks.unshift('付账单');
console.log(tasks); // ['付账单', '买牛奶', '遛狗']
console.log(newLength); // 3

应用：将紧急任务添加到待办列表开头。

2.4 shift()

功能：移除并返回数组第一个元素，修改原数组。
语法：array.shift()
示例：

let tasks = ['付账单', '买牛奶', '遛狗'];
let firstTask = tasks.shift();
console.log(firstTask); // 付账单
console.log(tasks); // ['买牛奶', '遛狗']

应用：处理队列中的第一个任务。

2.5 splice()

功能：在指定位置添加、删除或替换元素，修改原数组，返回被删除的元素。
语法：array.splice(start, deleteCount, item1, ..., itemN)
示例：

let fruits = ['苹果', '芒果', '菠萝', '葡萄'];
let removed = fruits.splice(1, 2, '橙子', '香蕉');
console.log(fruits); // ['苹果', '橙子', '香蕉', '葡萄']
console.log(removed); // ['芒果', '菠萝']

应用：更新播放列表中的歌曲。

3. 转换数组

这些方法用于转换数组内容或结构，常用于数据处理。

3.1 map()

功能：对每个元素应用函数，生成新数组，原数组不变。
语法：array.map(callback(currentValue, index, array))
示例：

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
console.log(roots); // [1, 2, 3]
console.log(numbers); // [1, 4, 9]

应用：格式化用户数据以显示全名：

let users = [
  { firstName: '张', lastName: '伟' },
  { firstName: '李', lastName: '娜' }
];
let fullNames = users.map(user => `${user.firstName}${user.lastName}`);
console.log(fullNames); // ['张伟', '李娜']

3.2 filter()

功能：创建新数组，包含通过测试的元素，原数组不变。
语法：array.filter(callback(element, index, array))
示例：

let numbers = [1, 2, 3, 4, 5, 6];
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6]
console.log(numbers); // [1, 2, 3, 4, 5, 6]

应用：筛选价格低于 600 的商品：

let products = [
  { name: '笔记本电脑', price: 1000 },
  { name: '手机', price: 500 },
  { name: '平板', price: 300 }
];
let affordable = products.filter(product => product.price < 600);
console.log(affordable); // [{ name: '手机', price: 500 }, { name: '平板', price: 300 }]

3.3 reduce()

功能：将数组归约为单个值，适合求和或合并数据。
语法：array.reduce(callback(accumulator, currentValue, index, array), initialValue)
示例：

let prices = [10, 20, 30];
let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 60

应用：计算购物车总价：

let cart = [
  { item: '书', price: 20 },
  { item: '笔', price: 5 },
  { item: '笔记本', price: 15 }
];
let totalPrice = cart.reduce((sum, item) => sum + item.price, 0);
console.log(totalPrice); // 40

3.4 sort()

功能：对数组元素排序，修改原数组，默认按字符串排序，数字需提供比较函数。
语法：array.sort([compareFunction])
示例：

let scores = [80, 90, 70, 100];
scores.sort((a, b) => a - b);
console.log(scores); // [70, 80, 90, 100]

应用：按年龄排序用户：

let users = [
  { name: '张伟', age: 30 },
  { name: '李娜', age: 25 },
  { name: '王强', age: 35 }
];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: '李娜', age: 25 }, { name: '张伟', age: 30 }, { name: '王强', age: 35 }]

3.5 reverse()

功能：反转数组顺序，修改原数组。
语法：array.reverse()
示例：

let letters = ['a', 'b', 'c'];
letters.reverse();
console.log(letters); // ['c', 'b', 'a']

应用：反转消息列表以显示最新消息。

3.6 toSorted()（ECMAScript 2023）

功能：返回排序后的新数组，原数组不变。
语法：array.toSorted([compareFunction])
示例：

let scores = [80, 90, 70, 100];
let sortedScores = scores.toSorted((a, b) => a - b);
console.log(sortedScores); // [70, 80, 90, 100]
console.log(scores); // [80, 90, 70, 100]

应用：生成排序后的排行榜副本。

3.7 toReversed()（ECMAScript 2023）

功能：返回反转后的新数组，原数组不变。
语法：array.toReversed()
示例：

let letters = ['a', 'b', 'c'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // ['c', 'b', 'a']
console.log(letters); // ['a', 'b', 'c']

应用：显示历史记录的倒序副本。

4. 迭代数组

这些方法用于遍历数组并执行操作。

4.1 forEach()

功能：为每个元素执行函数，无返回值。
语法：array.forEach(callback(currentValue, index, array))
示例：

let colors = ['红色', '绿色', '蓝色'];
colors.forEach(color => console.log(color));
// 输出:
// 红色
// 绿色
// 蓝色

应用：记录用户操作日志。

4.2 every()

功能：检查所有元素是否满足条件，返回布尔值。
语法：array.every(callback(element, index, array))
示例：

let scores = [85, 90, 95];
let allPassed = scores.every(score => score >= 60);
console.log(allPassed); // true

应用：验证表单所有字段是否填写。

4.3 some()

功能：检查是否至少有一个元素满足条件，返回布尔值。
语法：array.some(callback(element, index, array))
示例：

let scores = [50, 70, 90];
let hasHighScore = scores.some(score => score >= 90);
console.log(hasHighScore); // true

应用：检查是否有管理员权限。

5. 搜索与查找

这些方法用于查找元素或其索引。

5.1 find()

功能：返回第一个满足条件的元素，否则返回 undefined。
语法：array.find(callback(element, index, array))
示例：

let users = [
  { id: 1, name: '张伟' },
  { id: 2, name: '李娜' }
];
let user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: '李娜' }

应用：查找特定用户记录。

5.2 findIndex()

功能：返回第一个满足条件的元素索引，否则返回 -1。
语法：array.findIndex(callback(element, index, array))
示例：

let numbers = [5, 12, 8, 130, 44];
let index = numbers.findIndex(num => num > 10);
console.log(index); // 1

应用：定位需要更新的记录。

5.3 indexOf()

功能：返回元素第一次出现的索引，未找到返回 -1。
语法：array.indexOf(searchElement, fromIndex)
示例：

let fruits = ['苹果', '香蕉', '橙子'];
let index = fruits.indexOf('香蕉');
console.log(index); // 1

应用：检查元素是否存在。

5.4 lastIndexOf()

功能：返回元素最后一次出现的索引，未找到返回 -1。
语法：array.lastIndexOf(searchElement, fromIndex)
示例：

let numbers = [2, 5, 9, 2];
let index = numbers.lastIndexOf(2);
console.log(index); // 3

应用：查找重复元素的最后位置。

5.5 includes()

功能：检查数组是否包含某元素，返回布尔值。
语法：array.includes(searchElement, fromIndex)
示例：

let pets = ['猫', '狗', '鸟'];
console.log(pets.includes('狗')); // true
console.log(pets.includes('鱼')); // false

应用：验证权限是否存在。

6. 其他实用方法

这些方法提供额外功能，增强数组操作的灵活性。

6.1 concat()

功能：合并多个数组，返回新数组，原数组不变。
语法：array.concat(array1, ..., arrayN)
示例：

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]
console.log(arr1); // [1, 2]

应用：合并多个数据源。

6.2 join()

功能：将数组元素连接为字符串，可指定分隔符。
语法：array.join(separator)
示例：

let words = ['你好', '世界'];
let sentence = words.join(' ');
console.log(sentence); // 你好 世界

应用：生成 CSV 文件内容。

6.3 slice()

功能：返回数组的一部分，生成新数组，原数组不变。
语法：array.slice(start, end)
示例：

let numbers = [0, 1, 2, 3, 4];
let sliced = numbers.slice(1, 3);
console.log(sliced); // [1, 2]
console.log(numbers); // [0, 1, 2, 3, 4]

应用：实现分页显示。

6.4 fill()

功能：用固定值填充数组的一部分或全部，修改原数组。
语法：array.fill(value, start, end)
示例：

let arr = [1, 2, 3, 4];
arr.fill(0, 1, 3);
console.log(arr); // [1, 0, 0, 4]

应用：初始化数组为默认值。

6.5 copyWithin()

功能：在数组内部复制元素到指定位置，修改原数组。
语法：array.copyWithin(target, start, end)
示例：

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);
console.log(arr); // [4, 5, 3, 4, 5]

应用：调整数组内部顺序。

6.6 Array.isArray()

功能：检查值是否为数组，返回布尔值。
语法：Array.isArray(value)
示例：

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false

应用：验证输入数据类型。

7. 实际应用场景

以下是数组方法在实际项目中的应用：

7.1 动态渲染列表

使用 map() 将数据渲染为 HTML 列表，例如展示商品：

let products = [
  { name: '笔记本电脑', price: 1000 },
  { name: '手机', price: 500 },
  { name: '平板', price: 300 }
];
let html = products.map(item => `<li>${item.name}: $${item.price}</li>`).join('');
console.log(html); // <li>笔记本电脑: $1000</li><li>手机: $500</li><li>平板: $300</li>

7.2 筛选用户输入

使用 filter() 筛选符合条件的项目，例如搜索功能：

let items = ['苹果', '香蕉', '橙子', '芒果'];
let search = '果';
let results = items.filter(item => item.includes(search));
console.log(results); // ['苹果', '橙子', '芒果']

7.3 计算购物车总价

使用 reduce() 计算总价：

let cart = [
  { item: '书', price: 20 },
  { item: '笔', price: 5 },
  { item: '笔记本', price: 15 }
];
let total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(total); // 40

7.4 表单验证

使用 every() 检查所有输入是否有效：

let inputs = ['user@example.com', 'password123', '张伟'];
let allValid = inputs.every(input => input.length > 0);
console.log(allValid); // true

7.5 排行榜排序

使用 sort() 按分数排序：

let scores = [80, 95, 70, 85];
scores.sort((a, b) => b - a);
console.log(scores); // [95, 85, 80, 70]

8. 变异与非变异方法

了解方法是否修改原数组对正确使用至关重要。以下是分类：

方法	是否变异原数组	描述
push	是	添加到末尾
pop	是	移除末尾元素
shift	是	移除开头元素
unshift	是	添加到开头
splice	是	添加/删除/替换元素
sort	是	排序数组
reverse	是	反转数组
fill	是	填充数组
copyWithin	是