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

2022-11-15 14:27:40

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详解：http://es6.ruanyifeng.com/#docs/iterator )

( for of 例子：https://www.cnblogs.com/m2maomao/p/7743143.html )

//不打印自定义属性和继承属性

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;

码农公寓