先看下面这两种写法:
1.

tabList.forEach((tab, i) => {
    if (tab.is_main) {
        this.tabStores.push();
    }else{
        this.tabStores.push();
    }
});

2.

tabList.map((tab, i) => {
    let ViewComponent = null;
    if (tab.is_main) {
         ViewComponent = ( ); 
    }else {
         ViewComponent = ( );
    }
    return (  {ViewComponent} );
})

刚学习的时候一直觉得map和forEach是同样的东西,上面的两种写法可以随便互换,后来有机会仔细查了一下,发现并不是这样。
在ES5种 forEach 和 map 一样都具有遍历数组的功能,但是他们的返回结果并不相同,使用 forEach 遍历数组时,无法使用break中断循环,也无法使用 return false 中断,当然使用 return 也不能返回到外层函数。例如:

var arr = [1, 2, 3];
arr.forEach(function (value) {
  console.log(value);
  if (value == 2) {
    return false;
  }
});
// 结果是:1, 2, 3

for in VS. for of

for...in循环出的是key,for...of循环出的是value
遍历数组:

var arr = [2, 5, 7];
for (let temp in arr){//枚举数组
    console.log(temp);
}
//0 1 2
for (let temp of arr){//迭代数组
    console.log(temp);
}
//2 5 7

使用for...in的时候如果想要获取数组内的value,可以采用索引的方式,例如arr[temp];但是这个做法并不好,因为:1.temp并不是一个数字,而是一个string,会无意间增加字符串计算;2.for in 不仅可以枚举数组自身。数组的原型对象、数组对象本身的属性也都可以枚举出来 (可用hasOwnProperty()方法过滤非自有属性);3.这段代码可能按照随机顺序遍历数组; 4.for... in不适用于数组的遍历,更加适用于对象。

枚举对象:

var obj = {
    a: 1,
    b: [],
    c: fn,
};
for ( let temp in obj){
    console.log(temp);
}
// a b c
for (let temp of obj){
    console.log(temp);
}
// Uncaught TypeError: obj is not iterable

for...of循环不支持普通对象,如果想迭代一个对象的属性,可以使用内建的Object.keys()方法;

for(let key of Object.keys(obj)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key + ':' + obj[key]);
}

不能写bug啊
142 声望11 粉丝

« 上一篇
跨域(入门)