告别循环——如何使用 ES6 数组方法遍历数组

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

你还记得类似的事情吗？

var text;

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

对于那些完全不熟悉 JavaScript 的朋友，让我们一起来分析一下这段代码示例吧。

• 这句话的意思就是——“i 初始值为零。只要 i 小于五，就运行代码块内的代码（即更新“text”变量），并将 i 加一（用 ++ 表示）。

这曾经是遍历数组的标准方法。

曾经是。

EmcaScript 2016 (ES6)提供了一组用于遍历数组的实用方法。如果您还不了解，EmcaScript 是一种通用编程语言，由 ECMA International 根据 ECMA-262 文档进行标准化。

我喜欢把 EmcaScript 看作是一种新的、现代的、改进的 JavaScript 编写方式。

注：如果您想深入了解 ES6 语法，我推荐Sleepless Yogi 的《HTML To React》。这本书真的很不错！

这些数组迭代器包括：

• 数组.map()
• 数组.find()
• 数组.filter()
• 数组.forEach()
• 数组.every()
• 数组.some()
• 数组排序()
• Array.reduce()

要正确理解这些方法的工作原理，我们首先必须理解两个概念：

• 数组的大小
• 数组的形状

请看以下代码：

const team = [
{
name: 'jack',
position: 'backend engineer'
},
{
name: 'lara',
position: 'ux designer'
},
{
name: 'kingsley',
position: 'developer'
},
{
name: 'mark',
position: 'manager'
},
{
name: 'chris',
position: 'developer'
}
]

JavaScript

关于这个数组，有两点需要注意：

• 它的大小为五个物品（物体），
• 每个物品都有一个形状：名称和位置。

考虑到这些因素，所有数组迭代器方法都有其自身的行为：

• 地图（）

  • 行为：改变形状，但不改变大小。
  • 例如：获取团队中所有人的姓名。

team.map((member) => {
return member.name; 
})
//Result: ['jack', 'lara', 'kingsley', 'mark', 'chris']

种类（）

• 行为：既不改变大小也不改变形状，但改变顺序。
• 例如：按字母顺序排列团队成员。

team.sort();
//Result: [{name: 'chris', position: 'developer'}, {name: 'jack' ...}]

筛选（）

• 行为：改变大小，但不改变形状。
• 例如：只获取开发人员。

team.filter((member) => {
return member.position = “developer”; 
})

// Result: [{name: 'kingsley', position: 'developer'}, {name: 'chris', position:'developer'}]

寻找（）

• 行为：将大小更改为 1，但形状不变。不返回数组。
• 例如：找经理。

team.find((member) => {
return member.position = manager; 
})

// Result: {name: 'justin', position: 'manager'}

注意：如果有两位经理在场，find() 函数只会返回第一位经理。

forEach()

• 行为：使用形状，但不返回任何内容。
• 例如：给所有成员发放奖金！

Function sendBonus(member) {
    //code for bonus goes here\
}

team.forEach((member) => {
sendBonus(member); 
})

//Result: Jack gets a bonus! Lara get a bonus!… (but no return value).

减少（）

• 功能：可将大小和形状更改为您想要的任何形状。
• 例如：获取独特的团队职位。

const uniquePos = team.reduce((uniquePos, member) => {
 if (uniquePos.includes(member.position)) {
 return uniquePos;
 }
 return [...uniquePos, member.position];
 }, []);
// Result: [‘backend engineer’, ‘ux designer’, ‘developer’, ‘manager’]

有点困惑，我们来分析一下这段代码吧。

• 这一切的本质在于获取每位成员的每个唯一职位。重复的职位（例如开发人员）只会被选中一次。

• `reduce` 方法的第一个参数是上一次迭代的 `collectedValue`。当迭代刚开始时，将使用 `reduce()` 的第二个参数（在本例中为 `[]`）。每次迭代都会将 `collected` 或总值加到当前项上。

• 在我们的例子中，当迭代开始时，初始值 [] 会包裹数组中的当前项。

• 条件判断会检查总值（此时循环中的数组）是否包含当前成员的位置。如果包含，则忽略该位置，并按原样返回 CollectedValue。否则，将当前成员的位置添加到数组中（使用扩展运算符）。

每一个（）

• 行为：既不改变大小也不改变形状。返回布尔值：如果所有项目都满足条件，则返回 true；如果任何项目不满足条件，则返回 false。
• 例如：检查所有项目是否都是对象。

team.every((member) => {
return typeof member = object;
})

// Results: True

一些（）

• 行为：既不改变大小也不改变形状。返回布尔值：如果任何一项满足条件，则返回 true；如果所有项均不满足条件，则返回 false。
• 例如：检查其中是否有数字。

team.some((member) => {
return typeof member = number;
})

// Result: False

就这样。希望你们能从这些兄弟姐妹身上学到一些东西。如果学到了，请考虑给我买我最喜欢的水果：

我将不胜感激。

谢谢，期待下次再见。