js中的各种遍历(forEach, map, for, for...in, for...of)

Posted harsin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的各种遍历(forEach, map, for, for...in, for...of)相关的知识,希望对你有一定的参考价值。

forEach

es5出来的方法,这是我在react中用的最多的遍历方法之一,用法如下:

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

dva里面经常这么写。

写法很简单,经常用于通过这个数组内的数据创造新的结构,但是forEach的问题在于它不能跳出循环。

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 里面经常这么写。

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

用于改变一个数组内容,相当于改变了原数组

for ... in

for (let prop in obj) 
  if (obj.hasOwnProperty(prop)) 
    // 继续操作prop和obj
  

for ... in也可以用于遍历数组,但是不推荐

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;
  

以上是关于js中的各种遍历(forEach, map, for, for...in, for...of)的主要内容,如果未能解决你的问题,请参考以下文章

原生JS forEach()和map()遍历,jQuery$.each()和$.map()遍历

原生JS forEach()和map()遍历的区别以及兼容写法

js数组的五种迭代遍历方式 every filter forEach map some

JS中map()与forEach()的用法

数组方法map和forEach的使用方法有哪些?

温习js中的for,forEach,map, some, every用法总结,跳出循环方法