js遍歷詳解(forEach, map, for, for...in, for...of)
forEach
es5出來(lái)的方法，這是我在react中用的最多的遍歷方法之一，用法如下：
models.forEach(model => app.model(model));
dva里面經(jīng)常這么寫(xiě)。
寫(xiě)法很簡(jiǎn)單，經(jīng)常用于通過(guò)這個(gè)數(shù)組內(nèi)的數(shù)據(jù)創(chuàng)造新的結(jié)構(gòu)，但是forEach的問(wèn)題在于它不能跳出循環(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)常這么寫(xiě)。
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è)新的遍歷方式，主要是用來(lái)彌補(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中Map和ForEach的區(qū)別
- JavaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫(xiě)法介紹
- JS forEach和map方法的用法與區(qū)別分析
- 原生JS forEach()和map()遍歷的區(qū)別、兼容寫(xiě)法及jQuery $.each、$.map遍歷操作
- JS中forEach()和map()的區(qū)別講解
- 簡(jiǎn)述JS中forEach()、map()、every()、some()和filter()的用法
- JS數(shù)組遍歷中for,for in,for of,map,forEach各自的使用方法與優(yōu)缺點(diǎn)
- JS中的常見(jiàn)數(shù)組遍歷案例詳解(forEach,?map,?filter,?sort,?reduce,?every)
- JS中forEach、for、map的區(qū)別示例詳解
相關(guān)文章
輕量級(jí)的原生js日歷插件calendar.js使用指南
網(wǎng)頁(yè)上的原生js日歷代碼，鼠標(biāo)點(diǎn)擊文字提示處，會(huì)顯示一個(gè)帶年月日的日歷窗口，可調(diào)整年份、月份、選擇日期等，用在網(wǎng)頁(yè)上方便大家選擇日期，提高用戶體驗(yàn)。各大瀏覽器都能正常運(yùn)行，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要為大家介紹了Javascript事件的捕獲方式和冒泡方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
bootstrap modal+gridview實(shí)現(xiàn)彈出框效果
這篇文章主要介紹了bootstrap modal+gridview實(shí)現(xiàn)彈出框效果，gridview點(diǎn)擊更新彈出填寫(xiě)信息表單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
javascript讀取Xml文件做一個(gè)二級(jí)聯(lián)動(dòng)菜單示例
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個(gè)二級(jí)聯(lián)動(dòng)菜單,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了Bootstrap組件系列之福利篇幾款好用的組件（推薦二）的相關(guān)資料,需要的朋友可以參考下2016-07-07
前端處理ASCII碼轉(zhuǎn)HEX碼及校驗(yàn)具體實(shí)現(xiàn)
這篇文章主要介紹了在JavaScript編程中將ASCII碼轉(zhuǎn)換為十六進(jìn)制（HEX）碼的需求和場(chǎng)景,包括Wi-Fi配置、數(shù)據(jù)加密和網(wǎng)絡(luò)協(xié)議傳輸?shù)?文章詳細(xì)描述了HEX編碼的原理和作用,并提供了具體實(shí)現(xiàn)的示例,需要的朋友可以參考下2025-03-03
任何一對(duì)花括號(hào)中的語(yǔ)句集都屬于一個(gè)塊，在這之中定義的所有變量在代碼塊外都是不可見(jiàn)的，我們稱之為塊級(jí)作用域2014-09-09
JavaScript實(shí)現(xiàn)樹(shù)結(jié)構(gòu)轉(zhuǎn)換的五種方法總結(jié)
在?JavaScript?編程中，將數(shù)組轉(zhuǎn)換為樹(shù)結(jié)構(gòu)是一個(gè)常見(jiàn)的需求。本篇博客將介紹五種常用的方法來(lái)實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹(shù)結(jié)構(gòu)，希望對(duì)大家有所幫助2023-03-03
這篇文章主要介紹了在微信小程序中使用圖表的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家介紹了javascript異步編程，從淺入深的學(xué)習(xí)javascript異步編程，對(duì)javascript異步編程感興趣的小伙伴們可以參考一下2016-01-01