跳到主要内容

JavaScript 数组方法

JavaScript数组是最常用的数据类型之一，它提供了丰富的内置方法来帮助我们操作数据。无论是添加、删除、查找还是转换数组元素，JavaScript都为我们提供了简单高效的解决方案。本文将介绍JavaScript数组的各种方法，帮助初学者全面掌握数组操作技巧。

数组方法概览​

JavaScript数组方法可以大致分为以下几类：

  1. 添加/删除元素的方法
  2. 查找元素的方法
  3. 数组转换的方法
  4. 数组遍历的方法
  5. 数组排序的方法

让我们逐一详细了解这些方法。

添加和删除元素的方法​

push()​

push()方法向数组末尾添加一个或多个元素，并返回新数组的长度。

javascript
const fruits = ['苹果', '香蕉'];
const newLength = fruits.push('橙子', '芒果');

console.log(fruits);    // 输出: ['苹果', '香蕉', '橙子', '芒果']
console.log(newLength); // 输出: 4

pop()​

pop()方法从数组末尾移除最后一个元素，并返回该元素。

javascript
const fruits = ['苹果', '香蕉', '橙子'];
const lastFruit = fruits.pop();

console.log(fruits);     // 输出: ['苹果', '香蕉']
console.log(lastFruit);  // 输出: '橙子'

unshift()​

unshift()方法向数组开头添加一个或多个元素，并返回新数组的长度。

javascript
const fruits = ['香蕉', '橙子'];
const newLength = fruits.unshift('苹果', '芒果');

console.log(fruits);     // 输出: ['苹果', '芒果', '香蕉', '橙子']
console.log(newLength);  // 输出: 4

shift()​

shift()方法从数组开头移除第一个元素，并返回该元素。

javascript
const fruits = ['苹果', '香蕉', '橙子'];
const firstFruit = fruits.shift();

console.log(fruits);      // 输出: ['香蕉', '橙子']
console.log(firstFruit);  // 输出: '苹果'

splice()​

splice()方法通过删除、替换现有元素或添加新元素来修改数组，并返回被删除的元素组成的数组。

javascript
const fruits = ['苹果', '香蕉', '橙子', '芒果'];

// 从索引1开始删除2个元素
const removed = fruits.splice(1, 2);

console.log(fruits);   // 输出: ['苹果', '芒果']
console.log(removed);  // 输出: ['香蕉', '橙子']

// 从索引1开始添加元素
fruits.splice(1, 0, '草莓', '蓝莓');
console.log(fruits);   // 输出: ['苹果', '草莓', '蓝莓', '芒果']

// 从索引0开始替换2个元素
fruits.splice(0, 2, '葡萄');
console.log(fruits);   // 输出: ['葡萄', '蓝莓', '芒果']

查找元素的方法​

indexOf()​

indexOf()方法返回数组中给定元素第一次出现的索引，如果不存在则返回-1。

javascript
const fruits = ['苹果', '香蕉', '橙子', '香蕉'];

console.log(fruits.indexOf('香蕉'));     // 输出: 1
console.log(fruits.indexOf('芒果'));     // 输出: -1
console.log(fruits.indexOf('香蕉', 2));  // 输出: 3 (从索引2开始查找)

lastIndexOf()​

lastIndexOf()方法返回数组中给定元素最后一次出现的索引，如果不存在则返回-1。

javascript
const fruits = ['苹果', '香蕉', '橙子', '香蕉'];

console.log(fruits.lastIndexOf('香蕉'));  // 输出: 3
console.log(fruits.lastIndexOf('芒果'));  // 输出: -1

includes()​

includes()方法检查数组是否包含某个元素，返回布尔值。

javascript
const fruits = ['苹果', '香蕉', '橙子'];

console.log(fruits.includes('香蕉'));  // 输出: true
console.log(fruits.includes('芒果'));  // 输出: false

find()​

find()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined。

javascript
const numbers = [5, 12, 8, 130, 44];

const foundNumber = numbers.find(number => number > 10);
console.log(foundNumber);  // 输出: 12

findIndex()​

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1。

javascript
const numbers = [5, 12, 8, 130, 44];

const foundIndex = numbers.findIndex(number => number > 10);
console.log(foundIndex);  // 输出: 1

数组转换的方法​

map()​

map()方法创建一个新数组，其中每个元素都是回调函数的返回值。

javascript
const numbers = [1, 4, 9, 16];

// 计算每个数的平方根
const squareRoots = numbers.map(Math.sqrt);
console.log(squareRoots);  // 输出: [1, 2, 3, 4]

// 将每个数乘以2
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // 输出: [2, 8, 18, 32]

filter()​

filter()方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 筛选偶数
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // 输出: [2, 4, 6, 8, 10]

reduce()​

reduce()方法对数组中的每个元素执行一个由您提供的函数，将其结果汇总为单个返回值。

javascript
const numbers = [1, 2, 3, 4];

// 计算数组元素的总和
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 输出: 10

// 另一个例子：将数组扁平化
const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattened = nestedArray.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattened);  // 输出: [1, 2, 3, 4, 5, 6]

flat()​

flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

javascript
const nestedArray = [1, 2, [3, 4, [5, 6]]];

// 默认只展平一层
console.log(nestedArray.flat());  // 输出: [1, 2, 3, 4, [5, 6]]

// 展平两层
console.log(nestedArray.flat(2));  // 输出: [1, 2, 3, 4, 5, 6]

join()​

join()方法将数组的所有元素连接成一个字符串。

javascript
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());      // 输出: "Fire,Air,Water"
console.log(elements.join(''));    // 输出: "FireAirWater"
console.log(elements.join('-'));   // 输出: "Fire-Air-Water"

数组遍历的方法​

forEach()​

forEach()方法对数组的每个元素执行一次给定的函数。

javascript
const fruits = ['苹果', '香蕉', '橙子'];

fruits.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});
// 输出:
// 0: 苹果
// 1: 香蕉
// 2: 橙子
提示

forEach() 没有返回值，它只是对数组中的每个元素执行操作。如果你需要根据原数组创建一个新数组，请使用 map() 方法。

some()​

some()方法测试数组中是否至少有一个元素通过指定函数的测试，返回布尔值。

javascript
const numbers = [1, 2, 3, 4, 5];

const hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log(hasEvenNumber);  // 输出: true

const hasNegativeNumber = numbers.some(num => num < 0);
console.log(hasNegativeNumber);  // 输出: false

every()​

every()方法测试数组中的所有元素是否都通过指定函数的测试，返回布尔值。

javascript
const numbers = [1, 2, 3, 4, 5];

const allPositive = numbers.every(num => num > 0);
console.log(allPositive);  // 输出: true

const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven);  // 输出: false

数组排序方法​

sort()​

sort()方法对数组元素进行排序，并返回排序后的数组。

javascript
const fruits = ['橙子', '苹果', '香蕉'];

// 按字母顺序排序
fruits.sort();
console.log(fruits);  // 输出: ['橙子', '苹果', '香蕉'] (根据中文Unicode排序)

// 数字排序(默认按照字符串比较)
const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort();
console.log(numbers);  // 输出: [1, 10, 100, 25, 40, 5] (不正确)

// 正确的数字排序
numbers.sort((a, b) => a - b);
console.log(numbers);  // 输出: [1, 5, 10, 25, 40, 100]
警告

sort() 方法默认将元素转换为字符串然后比较它们的 UTF-16 代码单元值序列。对于数字排序，需要提供比较函数。

reverse()​

reverse()方法将数组中元素的位置颠倒，并返回该数组的引用。

javascript
const fruits = ['苹果', '香蕉', '橙子'];

fruits.reverse();
console.log(fruits);  // 输出: ['橙子', '香蕉', '苹果']

实际应用案例​

购物车功能实现​

以下是一个简单的购物车功能，展示了多个数组方法的组合使用：

javascript
// 购物车商品数组
let cart = [
  { id: 1, name: '手机', price: 999, quantity: 1 },
  { id: 2, name: '笔记本电脑', price: 1999, quantity: 1 },
  { id: 3, name: '耳机', price: 99, quantity: 2 }
];

// 添加商品到购物车
function addToCart(product) {
  // 检查商品是否已存在于购物车中
  const existingProductIndex = cart.findIndex(item => item.id === product.id);
  
  if (existingProductIndex !== -1) {
    // 如果商品已存在，增加数量
    cart[existingProductIndex].quantity += product.quantity;
  } else {
    // 如果商品不存在，添加到购物车
    cart.push(product);
  }
}

// 从购物车移除商品
function removeFromCart(productId) {
  cart = cart.filter(item => item.id !== productId);
}

// 计算购物车总价
function calculateTotal() {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
}

// 示例使用
console.log('当前购物车:', cart);
console.log('购物车总价:', calculateTotal());  // 输出: 3196

// 添加新商品
addToCart({ id: 4, name: '平板电脑', price: 499, quantity: 1 });
console.log('添加商品后的购物车:', cart);
console.log('更新后的总价:', calculateTotal());  // 输出: 3695

// 添加已有商品
addToCart({ id: 3, name: '耳机', price: 99, quantity: 1 });
console.log('更新数量后的购物车:', cart);
console.log('更新后的总价:', calculateTotal());  // 输出: 3794

// 删除商品
removeFromCart(2);
console.log('删除商品后的购物车:', cart);
console.log('更新后的总价:', calculateTotal());  // 输出: 1795

数据处理与分析​

下面是一个简单的数据分析示例，展示了如何使用数组方法处理数据：

javascript
// 学生考试成绩数据
const studentScores = [
  { name: '张三', score: 85, subject: '数学' },
  { name: '李四', score: 92, subject: '语文' },
  { name: '王五', score: 78, subject: '英语' },
  { name: '赵六', score: 95, subject: '数学' },
  { name: '钱七', score: 88, subject: '语文' },
  { name: '孙八', score: 76, subject: '数学' },
  { name: '周九', score: 82, subject: '英语' }
];

// 1. 找出所有数学科目的成绩
const mathScores = studentScores
  .filter(student => student.subject === '数学')
  .map(student => student.score);
console.log('数学成绩:', mathScores);  // 输出: [85, 95, 76]

// 2. 计算数学的平均分
const mathAverage = mathScores.reduce((sum, score) => sum + score, 0) / mathScores.length;
console.log('数学平均分:', mathAverage.toFixed(2));  // 输出: 85.33

// 3. 找出总体最高分
const highestScore = Math.max(...studentScores.map(student => student.score));
const topStudent = studentScores.find(student => student.score === highestScore);
console.log(`最高分: ${topStudent.name}, ${topStudent.score}分, 科目: ${topStudent.subject}`);
// 输出: 最高分: 赵六, 95分, 科目: 数学

// 4. 按成绩从高到低排序
const sortedByScore = [...studentScores].sort((a, b) => b.score - a.score);
console.log('按成绩排序:');
sortedByScore.forEach(student => {
  console.log(`${student.name}: ${student.score}分 (${student.subject})`);
});

总结​

JavaScript数组方法是处理数据集合的强大工具。通过本文介绍的方法，你可以对数组进行各种操作：

  1. 使用 push(), pop(), unshift(), shift(), splice() 添加和删除元素
  2. 使用 indexOf(), lastIndexOf(), includes(), find(), findIndex() 查找元素
  3. 使用 map(), filter(), reduce(), flat(), join() 转换数组
  4. 使用 forEach(), some(), every() 遍历数组
  5. 使用 sort(), reverse() 排序数组

掌握这些方法可以帮助你更高效地处理各种编程问题，特别是在数据处理和前端开发中。

练习题​

为了巩固所学知识，建议尝试以下练习：

  1. 创建一个函数，从数组中移除所有重复的元素
  2. 实现一个简单的待办事项列表，包括添加、删除和标记完成的功能
  3. 给定一个数字数组，找出最大值和最小值的差
  4. 实现一个函数，将二维数组转换为一维数组
  5. 创建一个函数，对数组进行自定义排序（比如按字符串长度排序）

额外资源​

想了解更多关于JavaScript数组方法的信息，可以参考以下资源：