欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS中遍历数组、对象的方式

程序员文章站 2022-06-03 08:18:40
for in;for of;forEach;map; $.each ......
1.标准的for循环遍历数组
//不打印自定义属性和继承属性
var array = [1,2,3];  
for (var i = 0; i < array.length; i++) {  
    console.log(array[i]);  
}  
2.for in 遍历对象

不要用for in遍历数组,因为还会打印自定义属性和继承属性

一般常用来遍历非数组的对象并且使用hasownproperty()方法去过滤掉原型链上的属性

数组的key是string类型,因为js中一切皆为对象。

var array = [1,2,3];  
//自定义属性
array.desc ='four';
//继承属性 扩展了js原生的array 
array.prototype.test=function(){}

array.hasownproperty('desc') //true
array.hasownproperty('test') //false

for(var key in array){
    console.log(array[key])
}
3.for of遍历数组

es6里引入了一种遍历器(iterator)机制,为不同的数据结构提供统一的访问机制。只要部署了iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作

它既比传统的for循环简洁,同时弥补了foreach和for-in循环的短板。

循环遍历键值对的value,与for in遍历key相反

如果实在想用for…of来遍历普通对象的属性,可以先获取对象的所有key的数组object.keys(),然后遍历

( iterator详解 : )

( for of 例子: )

//不打印自定义属性和继承属性
for(var value of array){
  console.log(value)
}
4.foreach遍历数组 vs map vs $.each

foreach遍历数组,而且在遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来

//不打印自定义属性和继承属性
array.foreach((value,index,arr)=>{
  console.log(value);
});

//注意其与jquery的$.each类似,只不过第1个和第2个参数正好是相反的
//thisarg为执行回调时的this值 
[].foreach(function(value, index, array) { /*...*/ } ,thisarg) //返回值:undefined
[].map(function(value,index,array){ return value*2 }, thisarg) //返回值:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
$.each([], function(index, value) { /*...*/ }); //$.each遍历数组或者类数组
5.$.each
$.each([], function(index, value) { /*...*/ }); //$.each遍历数组或者类数组
$.each({}, function(key, value) { /*...*/ });   //$.each遍历object
$().each(function(index, value) { /*...*/ });   //遍历dom元素

跳出 jquery each循环,要实现break和continue的功能

  • return false; ——跳出所有循环;相当于for中break 效果。
  • return true; ——跳出当前循环,进入下一个循环;相当于for中continue 效果
对于类似数组的结构,可转换为数组
//divlist不是数组,而是nodelist
var divlist = document.queryselectorall('div');   
 
[].slice.call(divlist)
 
array.prototype.slice.call(divlist)
 
[...divlist]  //es6写法
总结:
  • foreach 遍历数组,而且在遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来
  • for in 以任意顺序遍历对象的可枚举属性,(最好不要用来遍历数组) 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 array.prototype.foreach() 或 for...of 循环) 。
  • (es6)for...of 允许你遍历 arrays(数组), strings(字符串), maps(映射), sets(集合)等可迭代的数据结构等。不能遍历普通对象
  • for...in 遍历(当前对象及其原型上的)每一个key,而 for...of遍历(当前对象上的)每一个value;