轻松搞定JavaScript数组方法，面试被问直接答！

数组是JavaScript中最常用的数据结构之一，掌握数组的各种方法对于前端开发至关重要。本文将全面介绍JavaScript数组的常用方法，并通过易于理解的示例帮助大家掌握这些方法的使用。

一、数组操作方法

数组的基本操作主要包括增加、删除、修改和查找元素，我们需要特别注意哪些方法会改变原数组，哪些不会。

增加元素

以下方法用于向数组中添加新元素：

1. push() - 尾部添加

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

// 购物车添加商品示例
let cart = ['苹果', '香蕉'];
let newLength = cart.push('橙子', '葡萄');
console.log(cart);     // ['苹果', '香蕉', '橙子', '葡萄']
console.log(newLength); // 4

2. unshift() - 头部添加

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

// 待办事项列表添加紧急任务
let todoList = ['写报告', '开会'];
let newLength = todoList.unshift('紧急：处理客户投诉');
console.log(todoList); // ['紧急：处理客户投诉', '写报告', '开会']
console.log(newLength); // 3

3. splice() - 指定位置添加

splice()方法可以在数组的任意位置添加元素。

// 在班级名单中间插入新同学
let classList = ['张三', '李四', '王五', '赵六'];
let removed = classList.splice(2, 0, '新同学：小明');
console.log(classList); // ['张三', '李四', '新同学：小明', '王五', '赵六']
console.log(removed);   // [] (没有删除任何元素)

4. concat() - 合并数组（不改变原数组）

concat()方法合并数组并返回新数组，不改变原数组。

// 合并两个部门的员工名单
let devTeam = ['小王', '小李'];
let designTeam = ['小张', '小刘'];
let allTeam = devTeam.concat(designTeam, '新经理：老陈');
console.log(allTeam);   // ['小王', '小李', '小张', '小刘', '新经理：老陈']
console.log(devTeam);   // ['小王', '小李'] (原数组不变)

删除元素

以下方法用于从数组中删除元素：

1. pop() - 删除最后一个元素

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

// 栈结构：后进先出
let stack = ['任务1', '任务2', '任务3'];
let completedTask = stack.pop();
console.log(completedTask); // '任务3'
console.log(stack);         // ['任务1', '任务2']

2. shift() - 删除第一个元素

shift()方法删除并返回数组的第一个元素。

// 队列结构：先进先出
let queue = ['客户A', '客户B', '客户C'];
let servingClient = queue.shift();
console.log(servingClient); // '客户A'
console.log(queue);         // ['客户B', '客户C']

3. splice() - 删除指定位置元素

splice()方法可以删除指定位置的元素。

// 从成绩列表中删除不合格的成绩
let scores = [85, 42, 90, 55, 95, 38];
let failedScores = scores.splice(1, 2); // 从索引1开始删除2个元素
console.log(scores);      // [85, 55, 95, 38]
console.log(failedScores); // [42, 90]

4. slice() - 截取数组（不改变原数组）

slice()方法截取数组的一部分并返回新数组，不改变原数组。

// 获取排行榜前三名
let ranking = ['小明', '小红', '小刚', '小丽', '小华'];
let topThree = ranking.slice(0, 3);
console.log(topThree); // ['小明', '小红', '小刚']
console.log(ranking);  // ['小明', '小红', '小刚', '小丽', '小华'] (原数组不变)

修改元素

splice() - 替换元素

splice()方法可以替换指定位置的元素。

// 更新商品信息
let products = ['旧款手机', '笔记本电脑', '旧款耳机'];
let updatedProducts = products.splice(0, 1, '新款智能手机');
console.log(products);       // ['新款智能手机', '笔记本电脑', '旧款耳机']
console.log(updatedProducts); // ['旧款手机']

查找元素

以下方法用于在数组中查找元素：

1. indexOf() - 查找元素位置

indexOf()方法返回元素在数组中的索引，如果不存在则返回-1。

// 查找学生在班级中的位置
let students = ['张三', '李四', '王五', '赵六'];
let position = students.indexOf('王五');
console.log(position); // 2

let notFound = students.indexOf('小明');
console.log(notFound); // -1

2. includes() - 检查是否包含元素

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

// 检查购物车是否包含某商品
let cartItems = ['牛奶', '面包', '鸡蛋'];
let hasMilk = cartItems.includes('牛奶');
let hasButter = cartItems.includes('黄油');
console.log(hasMilk);   // true
console.log(hasButter); // false

3. find() - 查找符合条件的元素

find()方法返回第一个满足条件的元素。

// 查找第一个成绩优秀的学生
let studentScores = [
  { name: '小明', score: 75 },
  { name: '小红', score: 92 },
  { name: '小刚', score: 88 }
];
let excellentStudent = studentScores.find(student => student.score >= 90);
console.log(excellentStudent); // { name: '小红', score: 92 }

二、排序方法

1. reverse() - 反转数组

reverse()方法将数组元素顺序反转。

// 倒序播放列表
let playList = ['歌曲1', '歌曲2', '歌曲3', '歌曲4'];
playList.reverse();
console.log(playList); // ['歌曲4', '歌曲3', '歌曲2', '歌曲1']

2. sort() - 数组排序

sort()方法对数组元素进行排序。

// 按价格排序商品
let products = [
  { name: '手机', price: 2999 },
  { name: '笔记本', price: 5999 },
  { name: '耳机', price: 399 }
];

// 按价格升序排序
products.sort((a, b) => a.price - b.price);
console.log(products);
// 输出: [
//   { name: '耳机', price: 399 },
//   { name: '手机', price: 2999 },
//   { name: '笔记本', price: 5999 }
// ]

// 按价格降序排序
products.sort((a, b) => b.price - a.price);
console.log(products);
// 输出: [
//   { name: '笔记本', price: 5999 },
//   { name: '手机', price: 2999 },
//   { name: '耳机', price: 399 }
// ]

三、转换方法

join() - 数组转字符串

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

// 将标签数组转换为HTML class字符串
let cssClasses = ['btn', 'btn-primary', 'active'];
let classString = cssClasses.join(' ');
console.log(classString); // 'btn btn-primary active'

// 将路径部分组合成完整路径
let pathParts = ['usr', 'local', 'bin'];
let fullPath = pathParts.join('/');
console.log(fullPath); // 'usr/local/bin'

四、迭代方法

以下方法用于遍历数组，都不会改变原数组：

1. some() - 检查是否有元素满足条件

some()方法检查数组中是否至少有一个元素满足条件。

// 检查是否有未完成的任务
let tasks = [
  { title: '写报告', completed: true },
  { title: '开会', completed: false },
  { title: '回复邮件', completed: true }
];
let hasIncomplete = tasks.some(task => !task.completed);
console.log(hasIncomplete); // true

2. every() - 检查所有元素是否满足条件

every()方法检查数组中的所有元素是否都满足条件。

// 检查所有产品是否都有库存
let products = [
  { name: '手机', inStock: true },
  { name: '耳机', inStock: true },
  { name: '充电器', inStock: false }
];
let allInStock = products.every(product => product.inStock);
console.log(allInStock); // false

3. forEach() - 遍历数组

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

// 发送邮件给所有用户
let users = ['user1@example.com', 'user2@example.com', 'user3@example.com'];
users.forEach((email, index) => {
  console.log(`发送邮件给第${index + 1}个用户: ${email}`);
});
// 输出:
// 发送邮件给第1个用户: user1@example.com
// 发送邮件给第2个用户: user2@example.com
// 发送邮件给第3个用户: user3@example.com

4. filter() - 过滤数组

filter()方法创建一个新数组，包含所有通过测试的元素。

// 筛选出及格的学生
let students = [
  { name: '小明', score: 85 },
  { name: '小红', score: 42 },
  { name: '小刚', score: 90 },
  { name: '小丽', score: 55 }
];
let passedStudents = students.filter(student => student.score >= 60);
console.log(passedStudents);
// 输出: [
//   { name: '小明', score: 85 },
//   { name: '小刚', score: 90 }
// ]

5. map() - 映射数组

map()方法创建一个新数组，其结果是该数组中的每个元素调用一次提供的函数后的返回值。

// 将价格数组转换为带货币符号的字符串
let prices = [29.99, 15.50, 9.99, 45.00];
let formattedPrices = prices.map(price => `¥${price.toFixed(2)}`);
console.log(formattedPrices); // ['¥29.99', '¥15.50', '¥9.99', '¥45.00']

// 提取用户姓名列表
let users = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
  { id: 3, name: '王五', age: 28 }
];
let userNames = users.map(user => user.name);
console.log(userNames); // ['张三', '李四', '王五']

总结

JavaScript数组提供了丰富的方法来操作数据，我们可以根据需求选择合适的方法：

• 会改变原数组的方法 ：push()、pop()、shift()、unshift()、splice()、reverse()、sort()
• 不会改变原数组的方法 ：concat()、slice()、indexOf()、includes()、find()、some()、every()、forEach()、filter()、map()、join()

掌握这些数组方法能够让我们更加高效地处理数据，写出更简洁、可读性更强的代码。建议在实际开发中多加练习，熟能生巧！