轻松驾驭数组方法，告别繁琐的 for 循环！

前端

2023-11-04 04:31:46

在前端开发的汪洋大海中，数组可谓是必不可少的利器。然而，面对种类繁多的数组方法，不少同学不禁望而生畏，不知从何下手。别担心，今天就让我这位资深技术博主，手把手带你领略数组方法的奥妙，告别繁琐的 for 循环，让你的代码焕发新生！

一、踏入数组方法的殿堂

1. 认识两大类别

数组方法大致可分为两大类别：改变原始数组 和不改变原始数组 。

2. 掌握核心方法

改变原始数组 的方法主要有：

Array.pop()：删除并返回数组最后一个元素。
Array.push()：向数组末尾添加一个或多个元素。
Array.shift()：删除并返回数组第一个元素。
Array.unshift()：向数组开头添加一个或多个元素。

不改变原始数组 的方法主要有：

Array.concat()：连接两个或多个数组。
Array.filter()：根据指定条件过滤数组元素。
Array.map()：对数组每个元素执行指定操作，并返回一个新数组。
Array.reduce()：将数组元素累积成一个值。

二、改变原始数组的妙招

1. 巧用 pop() 和 push()

Array.pop() 和 Array.push() 可以轻松实现数组的元素增删。例如：

const colors = ["red", "green", "blue"];

// 删除最后一个元素
const removedColor = colors.pop(); // "blue"

// 向数组末尾添加元素
colors.push("yellow");

2. 掌握 shift() 和 unshift()

Array.shift() 和 Array.unshift() 主要用于数组头部的操作。例如：

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

// 删除第一个元素
const shiftedNumber = numbers.shift(); // 1

// 向数组开头添加元素
numbers.unshift(0);

三、不改变原始数组的艺术

1. 驾驭 concat()

Array.concat() 可以合并多个数组，生成一个新的数组。例如：

const fruits = ["apple", "banana", "orange"];
const vegetables = ["tomato", "cucumber", "onion"];

// 合并两个数组
const combinedArray = fruits.concat(vegetables);

2. 熟练使用 filter()

Array.filter() 根据指定的条件对数组元素进行筛选。例如：

const ages = [18, 22, 25, 30, 35];

// 过滤出大于 25 岁的年龄
const filteredAges = ages.filter(age => age > 25);

3. 探索 map() 的奥秘

Array.map() 对数组每个元素执行指定的函数操作，并返回一个包含结果的新数组。例如：

const names = ["John", "Mary", "Tom"];

// 将名字转换成大写
const upperCaseNames = names.map(name => name.toUpperCase());

四、让代码飞扬起来

掌握了数组方法的精髓，让我们结合实际案例，体验一下它们的神奇力量：

1. 购物清单管理

const shoppingList = ["apples", "bananas", "oranges"];

// 添加新的水果
shoppingList.push("grapes");

// 移除已购买的水果
shoppingList.shift();

2. 学生成绩分析

const scores = [85, 90, 75, 95, 80];

// 计算平均成绩
const averageScore = scores.reduce((a, b) => a + b) / scores.length;

// 过滤出不及格的分数
const failedScores = scores.filter(score => score < 60);