我最喜欢的用于处理 API 数据的 JavaScript 数组方法。
使用 JavaScript 数组方法处理 API 数据
在本文中，我想和大家分享我是如何使用一些 JavaScript 数组方法来处理 API 数据的。这些方法还有很多其他用途，但这里只是我自身使用案例中的一些例子。MDN 文档中还有更多数组方法供您探索。
Array.prototype.filter()
Filter方法使我们能够根据如下所示的特定条件，轻松地从响应数据中查找 API 条目。
// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
const trekkies = [
{ id: 0, name: "Piccard", planet: "Earth" },
{ id: 1, name: "Spock", planet: "Vulcan" },
{ id: 2, name: "Kirk", planet: "Earth" },
{ id: 3, name: "Worf", planet: "Gault" }
];
const findTrekkiesByPlanet = planet => {
return trekkies.filter(trekkie => trekkie.planet === planet);
};
console.log(findTrekkiesByPlanet("Earth"));
// [0: Object {id: 0 name: "Piccard" planet: "Earth"}
// 1: Object {id: 2 name: "Kirk" planet: "Earth"}]
在这个例子中，我们有一个包含《星际迷航》角色的基本 API 响应数组。为了查找特定星球上的所有角色，我们创建了一个名为 ` findTrekkiesByPlanet`的新函数，该函数接受一个参数，即我们要查找角色所属星球的名称。
在`findTrekkiesByPlanet`函数中，我们调用`trekkies`数组的`filter`方法，并传入一个回调函数，该回调函数接受一个`trekkie`作为参数。如果该`trekkie`符合我们的条件，则回调函数必须返回 ` true` ，否则返回`false`。因此，我们需要检查当前`trekkie` 的 ` planet` 值是否等于传递给`findTrekkiesByPlanet`函数的 `planet` 值。
如示例所示，如果我们传递“地球”作为行星，我们将得到一个只包含皮卡德和柯克的新数组。
Array.prototype.find()
find array方法可以根据特定条件在 API 响应中查找单个条目。
// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/find
const friends = [
{ id: 0, name: "joey", quote: "How you doin?" },
{ id: 1, name: "ross", quote: "We were on a break" },
{ id: 2, name: "phoebe", quote: "She’s your lobster" }
];
const findFriendById = id => {
return friends.find(friend => friend.id === id);
};
console.log(findFriendById(0)); // Object {id: 0, name: "joey", quote: "How you doin?"}
在这个例子中，我们有一个伪造的 API 响应数组，其中包含我最喜欢的情景喜剧《老友记》中的角色。为了通过 ID 查找单个角色，我们创建了一个名为 ` findFriendById`的新函数，该函数接受一个整数类型的参数，即我们要查找的角色的ID 。
在这个新函数中，我们调用好友数组的find方法，并再次传入一个回调函数，该回调函数每次接收一个好友对象。当找到我们要查找的好友时，这个回调函数必须返回true。因此，我们只需将当前好友的 ID与传递给findFriendById函数的ID进行比较即可。
在这个例子中，我们调用findFriendById，并将id设置为 0，从而得到 Joey 的对象。
Array.from()
`from array` 方法的作用是根据任意数据创建一个新数组。这里我们将使用它来转换 API 响应数据，使其符合 React 组件的调用要求。
// MDN Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
const apiCategories = [
{ id: 0, title: "javascript", description: "...", other: "..." },
{ id: 1, title: "React", description: "...", other: "..." }
];
const transformApiCategories = () => {
return Array.from(apiCategories, category => {
return {label: category.title, value: category.id};
});
};
console.log(transformApiCategories());
// [0: Object {label: "javascript" value: 0}
// 1: Object {label: "React" value: 1}]
// Example use in a react select component.
return (<SelectControl options={ transformApiCategories() }/>)
在最后一个例子中，我们有一些随机的 API 数据，其中包含编程语言及其相关信息。我们希望在下拉选择组件中使用这些数据，该组件需要一个包含标签和值的对象数组。以下是Gutenberg 项目中此类组件的示例。
为此，我们创建了一个名为transformApiCategories 的函数。在这个新函数内部，我们使用 Array.find，并将我们的apiCategories数组和一个回调函数传递给它，该回调函数在每次迭代中接收一个类别。
我们的回调函数会从每个类别返回一个新对象，其中只包含我们需要的正确格式的数据，使得from方法返回一个对象数组，我们可以安全地将其传递给 select 组件。
结论
如您所见，这些数组方法非常强大，我建议您查阅它们的文档。每个示例中都有一条注释，其中包含指向该方法文档页面的链接。您也可以在MDN 文档中查看所有数组方法。
跟随？
让我们在推特上联系我@Vanaf1979或在 Dev.to 上联系我@Vanaf1979，这样我就可以通知你有关新文章和其他 WordPress 开发相关资源的信息。
感谢阅读，祝您平安。
文章来源：https://dev.to/vanaf1979/my-favourite-javascript-array-methods-for-dealing-with-api-data-4i5i