js中遍历数组和对象的方法大全整理

2019-4-8 Jon js+jquery+ajax

目录
一、遍历数组的方法
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);
// });

标签: 遍历

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap