js中遍歷的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)js中遍歷的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

forEach

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

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

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

寫法很簡(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)常這么寫。

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

關(guān)于“js中遍歷的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。