目录
一、遍历数组的方法
1. for
2. while 和 do while
3. for of
4. for in
5. 达夫设备
6. forEach 和 map
7. filter、some、every、reduce、reduceRight
8. js库 jquery $.each 和 underscore _.each()
二、遍历对象的方法
1. for in
2. Object.keys(obj).forEach(function(key){console.log(key,obj[key]);});
3. Object.getOwnPropertyNames(obj).forEach
8. js库 jquery $.each 和 underscore _.each()
讲解及使用
一、遍历数组的方法
// 定义测试数组
var arr = ['关羽', '张飞', '赵云', '马超', '黄忠'];
// var arr = new Array(1000000);
/*
for 循环
比较常用
大数据速度较高
会循环数组中的空值
*/
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i]);
}
/*
for of 循环
两千以下数据 for of 比 for 稍快点
会循环数组的空值
es6新增 一般可循环所有带有 Iterator 接口的对象
例如：数组、某些类似数组的对象、字符串、Set和Map结构
注意：对象不是可迭代对象，没有内置 Iterator
*/
for (let item of arr) {
// console.log(item);
}
/*
for in 循环数组性能偏差
使用较少
不会循环数组的空值
索引为字符串型数字
可能遍历出数组上的属性和方法
更适合遍历对象，不适合遍历数组
*/
for (let key in arr) {
// console.log(arr[key]);
}
/*
while 和 do while 循环
使用较少
*/
var wi = 0;
while(wi < arr.length) {
// console.log(arr[wi])
wi++;
}
var di = 0;
do {
// console.log(arr[di]);
di++;
}
while(di < arr.length);
/*
达夫设备
大数据下速度极快 数据量越大 优势越明显
上百万数据的不二选择
可读性差 数据少不适合
使用较少
原理：使用了两个while 第一个先循环余数，第二个在进行循环
*/
// console.time('达夫设备');
var i = arr.length % 8;
var dIndex = 0;
while(i) {
// console.log(arr[dIndex]);
dIndex++;
i--;
}
i = Math.floor(arr.length / 8);
while(i) {
// console.log(arr[dIndex]);
dIndex++;
// console.log(arr[dIndex]);
dIndex++;
// console.log(arr[dIndex]);
dIndex++;
// console.log(arr[dIndex]);
dIndex++;
// console.log(arr[dIndex]);
dIndex++;
// console.log(arr[dIndex]);
dIndex++;
// console.log(arr[dIndex]);
dIndex++;
// console.log(arr[dIndex]);
dIndex++;
i--;
}
// console.timeEnd('达夫设备');
/*
forEach
数据量小时较for快 大数据较for慢
写法较for简单
不会循环数组的空值
属于数组的原型链的方法
*/
arr.forEach((e, i)=>{
// console.log(e);
});
/*
map 遍历
和 forEach 的区别是返回一个操作后的数组 可用变量接收
速度不如for和forEach
不会循环数组中的空值
属于数组的原型链的方法
*/
arr.map((e, i)=>{
// console.log(e,i)
});
/*
常用js库方法遍历数组 都需要引入相应的库才可以使用
jquery中$.each
underscore _.each()
*/
// $.each(arr, function(i, e){
// console.log(e);
// });
// _.each(arr, (e, i, arrs)=>{console.log(e)}, 需要绑定的对象可选)
/*
下面这些数组的方法可以遍历数组，但是一般不用来遍历数组，因为他们都有自己的的功能，在需要用到这些功能时才使用它们。
filter 遍历 返回一个符合条件的数组 可用变量接收 主要用于过滤
some():有一个满足条件，返回true，否则返回false；
every():都满足条件，返回true，否则返回false；
reduce() 和 reduceRight()
这两个方法都会实现迭代数组的所有项，返回一个最终值，一个从前到后，一个从后到前
第一个参数是函数
函数中可接收四个参数前一个值、当前值、项的索引和数组对象
第二个参数是初始值 可省略
*/
var filterVal = arr.filter((e, i)=>{
// 一般会返回一个 Boolean 类型 用于判断是否符合条件
// console.log(e,i)
return e === '张飞'
});
// console.log(filterVal); // [ '张飞' ]
var someVal = arr.some((e)=>{
return e === '黄忠'
});
// console.log(someVal); // true
var someVal = arr.every((e)=>{
return e === '黄忠'
});
// console.log(someVal); // false
var someVal = arr.reduce((prov, next)=>{
return prov+next
}, '五虎将就是：');
// console.log(someVal); // 五虎将就是：关羽张飞赵云马超黄忠
var someVal = arr.reduceRight((prov, next, i, arrs)=>{
return prov+next
}, '五虎将就是：');
// console.log(someVal); // 五虎将就是：黄忠马超赵云张飞关羽
二、遍历对象的方法
// 定义个测试对象
var obj = {
name: '苏大强',
age: 55,
sex: '男',
tv: '都挺好',
book: '《作妖记》',
children: ['苏明哲', '苏明成', '苏明玉']
};
/*
for in 便利对象首选方法
*/
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
// console.log(key+':'+obj[key]);
}
}
/*
Object.keys(obj) + 数组循环或者普通循环
*/
Object.keys(obj).forEach((e)=>{
// console.log(e+':'+obj[e]);
});
/*
Object.getOwnPropertyNames(obj) + 数组循环或者普通循环
*/
Object.getOwnPropertyNames(obj).forEach((e)=>{
// console.log(e+':'+obj[e]);
});
/*
js库循环对象 需要引入相应库方可使用
jquery $.each()
underscore _.each()
*/
// $.each(obj, (key, val) => {
// console.log(key+':'+val);
// });
// _.each(obj, (val, key, objs) => {
// console.log(key+':'+val);
// });