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

来源：https://www.cnblogs.com/harsin/p/11421504.html