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

标签：通过   方法   blog   var   问题   sarg   统一   desc   select   

1.标准的for循环遍历数组

   var array = [1,2,3,4,5,6,7];  
    for (var i = 0; i < array.length; i) {  
        console.log(i,array[i]);  
    }  

2.for in 遍历对象

for in 以任意顺序遍历一个对象的可枚举属性。 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) 。
一般常用来遍历非数组的对象并且使用hasOwnProperty()方法去过滤掉原型链上的属性

for(var key in array){
    console.log(array[key])
}

数组的key是string类型,因为js中一切皆为对象。
还会打印自定义属性
//扩展了js原生的Array
Array.prototype.test=function(){}
此时for in循环对我刚才写的test方法打印出来了。这就是for与for in遍历数组的最大区别，如果我们在项目采用的是用for in遍历数组，假设有一天谁不小心自己为了扩展js原生的Array类，或者引入一个外部的js框架也扩展了原生Array。那问题就来了。再此建议两点

不要用for in遍历数组，全部统一采用标准的for循环变量数组(我们无法保证我们引入的js是否会采用prototype扩展原生的Array)
如果要对js的原生类扩展的时候，不要采用prototype了

3.for of遍历数组

　　for...in循环会遍历一个object所有的可枚举属性。

　　　 for...of会遍历具有iterator接口的数据结构

　　　 for...in 遍历（当前对象及其原型上的）每一个属性名称,而 for...of遍历（当前对象上的）每一个属性值

es6里引入了一种新的循环方法， 遍历器(Iterator)机制，为不同的数据结构提供统一的访问机制。只要部署了Iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作 ( Iterator详解 ： http://es6.ruanyifeng.com/#docs/iterator )，
它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板。
循环遍历对象的值，是遍历键值对后面的那一个value哦 ，与for in遍历key相反

var myArry =[1,2,3,4];
for(var value of myArry){
  console.log(value)
}

如果实在想用for…of来遍历普通对象的属性的话，可以通过和Object.keys()搭配使用，先获取对象的所有key的数组
然后遍历：

var student={
name:‘wujunchuan‘,
age:22,
locate:{
country:‘china‘,
city:‘xiamen‘,
school:‘XMUT‘
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}
4.forEach遍历数组

[].forEach(function(value, index, array) { // ... });

var myArry =[1,2,3,4];
myArry.desc =‘four‘;
myArry.forEach((value,index,arr)=>{
console.log(value);

});

forEach遍历数组，而不是遍历对象哦，而且在遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来
注意其与jQuery的$.each类似，只不过参数正好是相反的

$.each([], function(index, value, array) { // ... });
$.each遍历数组或者类数组
第1个和第2个参数正好是相反的，这里要注意了，不要记错了。

JavaScript 提供了 foreach() map() 两个可遍历 Array对象 的方　　　　

forEach和map用法类似，都可以遍历到数组的每个元素，而且参数一致； 

Array.forEach(function(value , index , array){ //value为遍历的当前元素，index为当前索引，array为正在操作的数组
//do something
},thisArg) //thisArg为执行回调时的this值
不同点：

forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined；

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组；
例子如下：

复制代码
var array1 = [1,2,3,4,5];

var x = array1.forEach(function(value,index){

console.log(value);   //可遍历到所有数组元素

return value + 10

});
console.log(x); //undefined 无论怎样，总返回undefined

var y = array1.map(function(value,index){

console.log(value);   //可遍历到所有数组元素

return value + 10

});
console.log(y); //[11, 12, 13, 14, 15] 返回一个新的数组
复制代码
对于类似数组的结构，可先转换为数组，再进行遍历

复制代码
let divList = document.querySelectorAll(‘div‘); //divList不是数组，而是nodeList

//进行转换后再遍历
[].slice.call(divList).forEach(function(element,index){
element.classList.add(‘test‘)
})

Array.prototype.slice.call(divList).forEach(function(element,index){
element.classList.remove(‘test‘)
})

[...divList].forEach(function(element,index){ //ES6写法
//do something
})

each
https://www.cnblogs.com/zzcit/p/5695172.html

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

标签：通过   方法   blog   var   问题   sarg   统一   desc   select   

原文地址：https://www.cnblogs.com/Joyce-marmot/p/9912279.html