快捷導(dǎo)航

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

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

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

forEach

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

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

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

寫法很簡(jiǎn)單，經(jīng)常用于通過這個(gè)數(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]

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

for ... in

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

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

for ... of

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

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

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;
 }
}

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

您可能感興趣的文章:

js
遍歷

相關(guān)文章

第六篇Bootstrap表格樣式介紹
這篇文章主要介紹了第六篇Bootstrap表格樣式介紹的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
純js實(shí)現(xiàn)仿QQ郵箱彈出確認(rèn)框
仿QQ郵箱的彈出層，彈出確認(rèn)框，主要是用火狐的firebug把html和css扣了下來，沒有做封裝,就定義了一個(gè)拖動(dòng)事件. 大家可以封裝自己的彈出窗，嘿嘿！
2015-04-04
一些技巧性實(shí)用js代碼小結(jié)
實(shí)現(xiàn)頁(yè)面最大化默認(rèn)img圖片屏蔽鼠標(biāo)右鍵取消選取防止復(fù)制等實(shí)現(xiàn)代碼。
2009-10-10
Javascript 遍歷對(duì)象中的子對(duì)象
昨天同事問我一個(gè)問題：“有一個(gè)JSON對(duì)象，其中有若干個(gè)子對(duì)象，如何遍歷這個(gè)對(duì)象中的子對(duì)象？”
2009-07-07
JS從數(shù)組中隨機(jī)取出幾個(gè)數(shù)組元素的方法
JS如何從一個(gè)數(shù)組中隨機(jī)取出一個(gè)元素或者幾個(gè)元素呢？其實(shí)方法很簡(jiǎn)單，下面小編給大家分享了JS隨機(jī)取出幾個(gè)數(shù)組元素的方法，非常不錯(cuò)，需要的朋友參考下
2016-08-08
JS解析url查詢參數(shù)的簡(jiǎn)單代碼
本文通過簡(jiǎn)單代碼給大家介紹了js解析url查詢參數(shù)的方法，然后在文章下面給大家介紹了js獲取url參數(shù)值的兩種方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-08-08
JS原型與繼承操作示例
這篇文章主要介紹了JS原型與繼承操作,涉及javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中原形與繼承的相關(guān)定義、實(shí)例化操作技巧,需要的朋友可以參考下
2019-05-05
事件模型在各瀏覽器中存在差異
根據(jù) W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的節(jié)點(diǎn)（Node）實(shí)現(xiàn)。該接口提供addEventListener 和removeEventListener方法，用來綁定或解綁一個(gè) EventListeners 接口到一個(gè) EventTarget。
2010-10-10
JS實(shí)現(xiàn)滑動(dòng)條案例
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)條案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript制作簡(jiǎn)易計(jì)算器（不用eval）
這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡(jiǎn)易計(jì)算器的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02