最近做的一个小demo，频繁遇到数组以及对象的遍历操作，总结一下自己在实际项目中使用遍历的方法。
最常用的还是for循环去遍历数组，这个相信是最直接最简单的方法了。
当然还有其他的方法：
-
filter() 数组中每个元素调用函数，条件为true返回到一个新的数组项。
-
map() 数组中每个元素调用函数，返回操作之后的新的数组项，也可以通过回调函数批量对数组中的每一个元素进行操作。
-
for..of ...方法，遍历数组。
- 举个栗子：
现在我有这样的数据结构，我需要遍历去找到数组里面id为1的元素，使用for循环去遍历筛选出来。
var selectedRoom: [ // 模拟的是这段时间内的房间信息
{id: 1, roomType: '豪华大床房', roomNum: 3, roomId: [{id: '8401', reservedState: false}]},
{id: 2, roomType: '豪华单人床', roomNum: 5, roomId: [{id: '7401', reservedState: false}]},
{id: 3, roomType: '奢华总统房', roomNum: 3, roomId: [{id: '6401', reservedState: false}]},
{id: 4, roomType: '单身小床房', roomNum: 3, roomId: [{id: '5401', reservedState: false}]}]
var bookedRoom = []
for (var i=0;i<selectedRoom.length;i++) {
if (selectedRoom[i].id === 1) {
room.push(selectedRoom[i])
}
}
-
filter()：
1 .数组中每个元素调用函数，条件为true返回到一个新的数组项。
2 . 不改变原数组。
上面的for循环方法可以遍历数组，使用filter方法也可以实现数组的遍历筛选，该方法会返回一个新的数组。
使用方法：
Arr.filter(callback([,thisArg])) // 其中callback为回调函数，thisArg是每次遍历的数组中的元素
实现上述的功能，筛选出id为1的元素
var bookedRoom = selectedRoom.filter(room => room.id === 1)
// 或者这样子
var bookedRoom = selectedRoom.filter(function(room) {
return room.id === 1
})
所以只要数组中的元素的id为1 的元素就会被重新赋值返回给bookedRoom，可以在控制台输出。
输出结果图
-
map()方法：
1 数组中的每一个元素都调用函数，并返回一个新数组，新数组中的每一个元素中是回调函数的结果。
2 不改变原数组。 (当然可以在回调函数调用中修改)
var new_array = arr.map(function callback(currentValue, index, array) { // Return element for new_array }[, thisArg])
- currentValue就是当前被遍历的元素
- index 当前遍历的索引值
###实际的应用例子：
有下面这个数据，是每一个房间型号的房间的基本信息，其中tableData中每一个对象元素中的属性selectedNum对应每一个房间型号被选中的数量，现在有一个存放这些房间型号对应的数量的数组selectedNumArr[]。
需要将这个数组中的元素一一赋值给tableData中的每一个对象。
tableData= [{
id: 1,
roomType: '豪华大床房',
roomNum: 3,
standardPrice: 233,
finalPrice: 122,
selectedNum: 0,
priceType: '标准价'
}, {
id: 2,
roomType: '豪华单人床',
roomNum: 3,
standardPrice: 233,
finalPrice: 122,
selectedNum: 0,
priceType: '标准价'
}, {
id: 3,
roomType: '奢华总统房',
roomNum: 3,
standardPrice: 233,
finalPrice: 122,
selectedNum: 0,
priceType: '标准价'
}, {
id: 4,
roomType: '单身小床房',
roomNum: 3,
standardPrice: 233,
finalPrice: 122,
selectedNum: 0,
priceType: '标准价'
}
],
var selectedNumArr = [2,4,5,6]
// 使用map 方法进行操作，可以对原来的数组进行操作，改变其中的值
tableData.map((item,index) => {
item.selectedNum = selectedNumArr[index]
})
console.log(tableData)
测试输出结果
当然，你也可以对每次操作的元素进行操作，返回成一个新的数组。
var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];
var reformattedArray = kvArray.map(function(obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
// 这样打印出来的reformattedArray 就是每次操作得到的对象数组。
结果如下所示：
// kvArray is still:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
for...of 遍历数组。
之前一直都会使用for..in 去遍历对象中的key。但是对于数组的遍历，使用for...of..会更好。
let iterable = [10, 20, 30];
for (let value of iterable) {
value += 1;
console.log(value);
}
//输出： 11，21，31
关于for...of..的遍历，遍历的是数组中的每一个元素，所以可以直接对数组中的每一个元素进行操作。
这与for...in...遍历是不一样的，for...in...在对象遍历中主要是遍历对象的所有key值，但是在数组中的遍历主要是遍历数组中的index值。
简单来说，for-in 设计的目的是用于遍历包含键值对的对象，对数组并不是那么友好。
可以参考这个链接 ： http://bubkoo.com/2015/06/15/es6-in-depth-iterators-and-the-for-of-loop/
当然数组的遍历还有其他方法，像forEach()、every()、some()方法都适合，因为我平时用得比较少，所以就不扩充啦。小伙伴们可以在留言区互相交流哈。
