map和forEach

2019-07-23  本文已影响0人  An的杂货铺

使用map来对复杂数据进行遍历更加高效

var data = [

{'name':"北京",'child':[{'name':'安定门'},{'name':'天安门'}]},

{'name':"天津",'child':[{'name':'静海'},{'name':'津南'}]}

];

var province = data.map(res=>{

        return res.name;

})

console.log(province);//['北京','天津']

//以上相当于

var provinceone = data.map(function(data){

      return data.name

})

console.log(provinceone);//['北京','天津']

var city = data[0].child.map(res=>{

      return res.name

});

console.log(city)//['安定门','天安门']

var cityone = data[1].child.map(res=>{

return res.name

})

console.log(cityone);//['静海','津南']

//使用map对数据进行处理更高效

map与forEach之间的差异

    //map

    var ary = [12,23,24,42,1]; 

    var res = ary.map(function (item,index,input) { 

    return item*10; 

});

console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份,并进行了修改

console.log(ary);//-->[12,23,24,42,1];  原数组并未发生变化

//forEach

var aryone = [12,23,24,42,1]; 

var resone = aryone.forEach(function (item,index,input) { 

      input[index] = item*10; 

}) 

console.log(resone);//--> undefined; 

console.log(aryone);//--> 通过数组索引改变了原数组;[120,230,240,420,10]

// 参数:item数组中的当前项,index当前项的索引,input原始数组;

  //    区别:map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);

//    forEach 数组中有几项,那么传递进去的匿名回调函数就需要执行几次;理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组

var m = new Map();

m.set(1, "black");

m.set(2, "red");

m.set("colors", 2);

console.log(m)

//方法一:

m.forEach(function (item) {

    console.log(item.toString());

});

// 输出:

// black

// red

// 2

//方法二:

m.forEach(function (value, key, map) {

    console.log(value)

})

// 输出:

// black

// red

// 2

//方法三:

for (var [key, value] of m) {

  console.log(key + ' = ' + value);

}

// 输出:

// 1 = black

// 2 = red

// colors  = 2
上一篇 下一篇

猜你喜欢

热点阅读