javascrpit可以替代for循環的幾種方法

everfly 發布于2019-08-23 14:15 / 1496人閱讀

摘要：使用數組方法替換循環的示例以及擴展方法。與不同的是，返回的是一個布爾值，它決定是否將該項保留在返回的新數組中。它們具有相同的參數，并且它們的回調函數需要返回一個布爾值來確定該項是否滿足條件。

使用數組方法替換 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的幾種輪播

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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