快捷導(dǎo)航

js遍歷詳解(forEach, map, for, for...in, for...of)

更新時間：2019年08月28日 08:21:31 作者：尋易之客

在本篇文章里小編給大家整理的是關(guān)于js中的各種遍歷(forEach, map, for, for...in, for...of)相關(guān)知識點用法總結(jié)，需要的朋友們參考下。

forEach

es5出來的方法，這是我在react中用的最多的遍歷方法之一，用法如下：

models.forEach(model => app.model(model));

dva里面經(jīng)常這么寫。

寫法很簡單，經(jīng)常用于通過這個數(shù)組內(nèi)的數(shù)據(jù)創(chuàng)造新的結(jié)構(gòu)，但是forEach的問題在于它不能跳出循環(huán)。

map

也是用的最多的方法之一，用法如下

{data.map(d => (
     <div className="balance-row">
      <div className="balance-col currency">{d.currency.toUpperCase()}</div>
      <div className="balance-col balance">
       <div>
        <FormattedNumber value={d.balance} />
       </div>
       <div className="light-text lock">
        <i className="icon anticon icon-lock" /><FormattedNumber value={d.locked} />
       </div>
      </div>
     </div>
    ))}

react 里面經(jīng)常這么寫。

const value = [1, 22, 4, 5].map(d => d + 1);
value; // [2, 23, 5, 6]

用于改變一個數(shù)組內(nèi)容，相當于改變了原數(shù)組

for ... in

for (let prop in obj) {
 if (obj.hasOwnProperty(prop)) {
  // 繼續(xù)操作prop和obj
 }
}

for ... in也可以用于遍歷數(shù)組，但是不推薦

for ... of

ES6中加了一個新的遍歷方式，主要是用來彌補forEach 和 for...in的短板，它還可以遍歷字符串、map對象、set對象、generator對象。

注意：它只能遍歷帶有iterable屬性的對象，所以不能遍歷對象，除非刻意給object加上一個iterable屬性。
這個老厲害了！

Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
 
for (let [key, value] of iterable) {
 console.log(value);
}
// 1
// 2
// 3
 
for (let key of iterable) {
 console.log(key);
}
// [a, 1]
// [b, 2]
// [c, 3]

Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);
 
for (let value of iterable) {
 console.log(value);
}
// 1
// 2
// 3

Generator

function * fibonacci() { // a generator function
 let [prev, curr] = [0, 1];
 while (true) {
  [prev, curr] = [curr, prev + curr];
  yield curr;
 }
}
 
for (let n of fibonacci()) {
 console.log(n);
 // truncate the sequence at 1000
 if (n >= 1000) {
  break;
 }
}

以上就是本次介紹的全部知識點內(nèi)容，感謝大家對腳本之家的支持。

您可能感興趣的文章:

js
遍歷

相關(guān)文章

JavaScript在瀏覽器中的執(zhí)行機制
既然說到了JavaScript,那么就會繞不過去執(zhí)行上下文,只有理解了執(zhí)行上下文才能更好的理解JavaScript本身,不過本部分不是專門講解?JavaScript的,主要從JavaScript的執(zhí)行順序開始介紹一下JavaScript是怎樣運行的
2023-09-09
p5.js繪制創(chuàng)意自畫像
這篇文章主要為大家詳細介紹了p5.js繪制創(chuàng)意自畫像，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
JS利用Intl解決前端日期和時間的格式化詳解
Intl?是一個全局對象，它的主要用途就是展示國際化信息，可以將字符串，數(shù)字和日期和時間轉(zhuǎn)換為指定地區(qū)的格式。這篇文章就來和大家聊聊如何利用Intl解決前端日期和時間的格式化吧
2023-03-03
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
這篇文章主要介紹了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}，非常具有實用價值，需要的朋友可以參考下
2018-10-10
javascript常用代碼段搜集
這篇文章主要記錄了本人搜集的幾段javascript常用代碼段，都是平時項目中需要用到的,需要的朋友可以參考下
2014-12-12
bootstrap輪播圖示例代碼分享
這篇文章主要為大家詳細介紹了bootstrap輪播圖示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
基于JavaScript開發(fā)一個有趣的分組抽簽小程序
在團隊合作開發(fā)中，經(jīng)常需要將團隊成員分組，來完成各自的任務(wù)，而抽簽的方式自然是最公平、最簡單的方法之一，所以本文就來開發(fā)一個有趣的分組抽簽小程序吧
2023-05-05
JS實現(xiàn)獲取GIF總幀數(shù)的方法詳解
如何通過js在上傳前就拿到它的總幀數(shù)來判斷呢？本文就跟大家分享一種解決方案，并將其封裝成插件發(fā)布至npm倉庫，快跟隨小編一起學習一下吧
2022-05-05
uniapp微信小程序多環(huán)境配置以及使用教程
前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序多環(huán)境配置以及使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05
Javascript 詳解封裝from表單數(shù)據(jù)為json串進行ajax提交
這篇文章主要介紹了Javascript 詳解封裝from表單數(shù)據(jù)為json串進行ajax提交的相關(guān)資料,需要的朋友可以參考下
2017-03-03