亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

everfly / 1555人閱讀

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

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

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

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

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

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

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

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

const amazingArticles = [];

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

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

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

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

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

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

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

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

用 every() 和 some() 進行條件測試

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

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ù)組中的 每個項 均滿足所述條件。如果有一個項目不滿足條件，它將返回 false 。另一方面，some()返回 true 的條件是如果數(shù)組中 至少一個 項滿足條件。

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100353.html

相關(guān)文章

  • 循環(huán)的幾種類型

    摘要：返回值方法創(chuàng)建一個新數(shù)組其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。如果數(shù)組中的每個元素都滿足測試函數(shù)，則返回，否則返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循環(huán)遍歷數(shù)組的時候，你還在用for語句走天下嗎？ 我曾經(jīng)就是for走天下，最后發(fā)現(xiàn)自己給自己挖了一個巨大的坑，層層嵌套的循環(huán)，總要花大量的時間去捋清各種...

    yibinnn 評論0 收藏0

  • 循環(huán)的幾種類型

    摘要：返回值方法創(chuàng)建一個新數(shù)組其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。如果數(shù)組中的每個元素都滿足測試函數(shù)，則返回，否則返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循環(huán)遍歷數(shù)組的時候，你還在用for語句走天下嗎？ 我曾經(jīng)就是for走天下，最后發(fā)現(xiàn)自己給自己挖了一個巨大的坑，層層嵌套的循環(huán)，總要花大量的時間去捋清各種...

    clasnake 評論0 收藏0

  • 循環(huán)的幾種類型

    摘要：返回值方法創(chuàng)建一個新數(shù)組其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。如果數(shù)組中的每個元素都滿足測試函數(shù)，則返回，否則返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循環(huán)遍歷數(shù)組的時候，你還在用for語句走天下嗎？ 我曾經(jīng)就是for走天下，最后發(fā)現(xiàn)自己給自己挖了一個巨大的坑，層層嵌套的循環(huán)，總要花大量的時間去捋清各種...

    HtmlCssJs 評論0 收藏0

  • vue組件通信的幾種方式

    摘要：雖然和都可以獲取組件實例，但是它們無法在跨級或兄弟間通信，這是它們的缺點。也就是在父組件中提供一個值，并且在需要使用的子孫組件中注入改值，即不僅僅是，只要是的子組件，無論隔多少代，都可以通過這個的方式注入。通過混入組件，實現(xiàn)組件間的通信。 寫在前面 vue 的組件化應(yīng)該是其最核心的思想了，無論是一個大的頁面還是一個小的按鈕，都可以被稱之為組件。基于 Vue 的開發(fā)，就是在寫一個個組件，...

    vspiders 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<