js遍历详解(forEach, map, for, for...in, for...of)

时间:2021-05-26

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

以上就是本次介绍的全部知识点内容,感谢大家对的支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章