javascrpit可以替代for循環(huán)的幾種方法

everfly 發(fā)布于2019-08-23 14:15 / 1486人閱讀

摘要：使用數(shù)組方法替換循環(huán)的示例以及擴(kuò)展方法。與不同的是，返回的是一個(gè)布爾值，它決定是否將該項(xiàng)保留在返回的新數(shù)組中。它們具有相同的參數(shù)，并且它們的回調(diào)函數(shù)需要返回一個(gè)布爾值來(lái)確定該項(xiàng)是否滿足條件。

使用數(shù)組方法替換 for 循環(huán)的示例（以及擴(kuò)展 forEach() 方法）。

使用 map() 修改數(shù)據(jù)

如果我們想對(duì)數(shù)組中的每一項(xiàng)執(zhí)行操作并生成包含結(jié)果項(xiàng)的新數(shù)組，那么 map()是一個(gè)很好的選擇。map() 方法可用于任何數(shù)組，并具有三個(gè)參數(shù) - 數(shù)組中的當(dāng)前項(xiàng)，索引（可選）和原始數(shù)組（可選）。在回調(diào)函數(shù)中，我們可以返回我們想要組成 map() 函數(shù)返回的新數(shù)組的任何值。

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

讓我們以下面的文章數(shù)組為例，每個(gè)文章都有一個(gè) title 和 rating 屬性：

const articles = [
    { title: "你可能不需要循環(huán)", rating: 4 },
    ...
];

假設(shè)我們想要?jiǎng)?chuàng)建一個(gè)新數(shù)組，每篇文章都被評(píng)為5星。我們可以使用一個(gè)基本for 循環(huán)來(lái)做到這一點(diǎn)，它看起來(lái)像這樣：

const amazingArticles = [];

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

雖然這會(huì)產(chǎn)生我們想要的結(jié)果，但是通過(guò)使用該 .map() 方法可以更好地實(shí)現(xiàn)此邏輯。

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

使用 filter() 過(guò)濾數(shù)據(jù)

有時(shí)，我們想確定數(shù)組中的項(xiàng)目是否滿足特定條件。我們可以用 filter() 方法做到這點(diǎn)。filter() 方法和 map() 類似，共有三個(gè)參數(shù) - 數(shù)組中的當(dāng)前項(xiàng)，索引（可選）和原始數(shù)組（可選）。與map() 不同的是，filter() 返回的是一個(gè)布爾值，它決定是否將該項(xiàng)保留在返回的新數(shù)組中。

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

讓我們以前面的文章數(shù)組為例。如果我們想獲得數(shù)組中評(píng)級(jí)為3及以上的所有文章怎么辦？同樣，我們可以使用 for 循環(huán)來(lái)完成此操作，但 filter() 方法更合適。

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

用 every() 和 some() 進(jìn)行條件測(cè)試

通過(guò) filter() 方法，我們可以確定數(shù)組中的哪些項(xiàng)滿足特定條件。但有時(shí)，我們不需要知道哪些項(xiàng)滿足或不滿足條件，我們可能只需要知道所有或任何項(xiàng)是否滿足條件。這是 every() 和 some() 方法發(fā)揮作用的地方。every() 和 some() 的方法運(yùn)作非常相似 filter() 的方法。它們具有相同的參數(shù)，并且它們的回調(diào)函數(shù)需要返回一個(gè)布爾值來(lái)確定該項(xiàng)是否滿足條件。

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

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

這些方法之間的關(guān)鍵區(qū)別在于 filter() 方法本身返回的內(nèi)容，即在上面的示例中， every 和 some 變量的值是真假值。every() 方法返回 true 的條件是數(shù)組中的每個(gè)項(xiàng) 均滿足所述條件。如果有一個(gè)項(xiàng)目不滿足條件，它將返回 false 。另一方面，some()返回 true 的條件是如果數(shù)組中至少一個(gè) 項(xiàng)滿足條件。

是否使用 for 循環(huán)

正如我前面提到的，循環(huán)是很多情況下都適合的一個(gè)很好的工具，并且這些新方法的存在并不意味著根本不應(yīng)該使用循環(huán)。我認(rèn)為這些方法很棒，當(dāng)我們使用 filter() 方法而不是 for 循環(huán)時(shí)，乍看之下更容易理解邏輯的目的是什么。但是，這些方法具有非常嚴(yán)格的限制，如果不使用它們的全部值，則可能會(huì)過(guò)度使用。這方面的一個(gè)例子是 map() 方法，它在理論上可用于替換幾乎任何循環(huán)。如果在我們的第一個(gè)例子中，我們只想修改原始 articles 數(shù)組而不是創(chuàng)建一個(gè)新的修改過(guò)的 amazingArticles ，使用這種方法就沒(méi)必要了。使用適合自身情況的方法非常重要，以確保我們不會(huì)過(guò)度使用。