javascrpit可以替代for循环的几种方法

everfly 发布于2019-08-23 14:15 / 1469人阅读

摘要：使用数组方法替换循环的示例以及扩展方法。与不同的是，返回的是一个布尔值，它决定是否将该项保留在返回的新数组中。它们具有相同的参数，并且它们的回调函数需要返回一个布尔值来确定该项是否满足条件。

使用数组方法替换 for 循环的示例（以及扩展 forEach() 方法）。

使用 map() 修改数据

如果我们想对数组中的每一项执行操作并生成包含结果项的新数组，那么 map()是一个很好的选择。map() 方法可用于任何数组，并具有三个参数 - 数组中的当前项，索引（可选）和原始数组（可选）。在回调函数中，我们可以返回我们想要组成 map() 函数返回的新数组的任何值。

const newArray = myArray.map((current, index, array) => {
    // return item for newArray
})

让我们以下面的文章数组为例，每个文章都有一个 title 和 rating 属性：

const articles = [
    { title: "你可能不需要循环", rating: 4 },
    ...
];

假设我们想要创建一个新数组，每篇文章都被评为5星。我们可以使用一个基本for 循环来做到这一点，它看起来像这样：

const amazingArticles = [];

for (let i = 0; i < articles.length; i++) {
    const newArticle = Object.assign(articles[i], {rating: 5});
    amazingArticles.push(newArticle);
}

虽然这会产生我们想要的结果，但是通过使用该 .map() 方法可以更好地实现此逻辑。

const amazingArticles = articles.map((article) => {
    return Object.assign(article, {rating: 5});
});

使用 filter() 过滤数据

有时，我们想确定数组中的项目是否满足特定条件。我们可以用 filter() 方法做到这点。filter() 方法和 map() 类似，共有三个参数 - 数组中的当前项，索引（可选）和原始数组（可选）。与map() 不同的是，filter() 返回的是一个布尔值，它决定是否将该项保留在返回的新数组中。

const newArray = myArray.filter((current, index, array) => {
    // return true or false
});

让我们以前面的文章数组为例。如果我们想获得数组中评级为3及以上的所有文章怎么办？同样，我们可以使用 for 循环来完成此操作，但 filter() 方法更合适。

const highlyRatedArticles = articles.filter((article) => {
    return article.rating >= 3;
});

用 every() 和 some() 进行条件测试

通过 filter() 方法，我们可以确定数组中的哪些项满足特定条件。但有时，我们不需要知道哪些项满足或不满足条件，我们可能只需要知道所有或任何项是否满足条件。这是 every() 和 some() 方法发挥作用的地方。every() 和 some() 的方法运作非常相似 filter() 的方法。它们具有相同的参数，并且它们的回调函数需要返回一个布尔值来确定该项是否满足条件。

const every = myArray.every((current, index, array) => {
    // return true or false
});

const some = myArray.some((current, index, array) => {
    // return true or false
});

这些方法之间的关键区别在于 filter() 方法本身返回的内容，即在上面的示例中， every 和 some 变量的值是真假值。every() 方法返回 true 的条件是数组中的每个项均满足所述条件。如果有一个项目不满足条件，它将返回 false 。另一方面，some()返回 true 的条件是如果数组中至少一个项满足条件。

是否使用 for 循环

正如我前面提到的，循环是很多情况下都适合的一个很好的工具，并且这些新方法的存在并不意味着根本不应该使用循环。我认为这些方法很棒，当我们使用 filter() 方法而不是 for 循环时，乍看之下更容易理解逻辑的目的是什么。但是，这些方法具有非常严格的限制，如果不使用它们的全部值，则可能会过度使用。这方面的一个例子是 map() 方法，它在理论上可用于替换几乎任何循环。如果在我们的第一个例子中，我们只想修改原始 articles 数组而不是创建一个新的修改过的 amazingArticles ，使用这种方法就没必要了。使用适合自身情况的方法非常重要，以确保我们不会过度使用。

GPU云服务器云服务器 js缓存的几种方法 js for循环可以最基本的几种 html的几种轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100353.html

循环的几种类型

摘要：返回值方法创建一个新数组其包含通过所提供函数实现的测试的所有元素。如果数组中的每个元素都满足测试函数，则返回，否则返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循环遍历数组的时候，你还在用for语句走天下吗？我曾经就是for走天下，最后发现自己给自己挖了一个巨大的坑，层层嵌套的循环，总要花大量的时间去捋清各种...

yibinnn 2019-08-21 17:21 评论0 收藏0
循环的几种类型

摘要：返回值方法创建一个新数组其包含通过所提供函数实现的测试的所有元素。如果数组中的每个元素都满足测试函数，则返回，否则返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循环遍历数组的时候，你还在用for语句走天下吗？我曾经就是for走天下，最后发现自己给自己挖了一个巨大的坑，层层嵌套的循环，总要花大量的时间去捋清各种...

clasnake 2019-08-01 17:54 评论0 收藏0
循环的几种类型

摘要：返回值方法创建一个新数组其包含通过所提供函数实现的测试的所有元素。如果数组中的每个元素都满足测试函数，则返回，否则返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循环遍历数组的时候，你还在用for语句走天下吗？我曾经就是for走天下，最后发现自己给自己挖了一个巨大的坑，层层嵌套的循环，总要花大量的时间去捋清各种...

HtmlCssJs 2019-08-29 13:43 评论0 收藏0
vue组件通信的几种方式

摘要：虽然和都可以获取组件实例，但是它们无法在跨级或兄弟间通信，这是它们的缺点。也就是在父组件中提供一个值，并且在需要使用的子孙组件中注入改值，即不仅仅是，只要是的子组件，无论隔多少代，都可以通过这个的方式注入。通过混入组件，实现组件间的通信。写在前面 vue 的组件化应该是其最核心的思想了，无论是一个大的页面还是一个小的按钮，都可以被称之为组件。基于 Vue 的开发，就是在写一个个组件，...

vspiders 2019-08-23 16:04 评论0 收藏0