JS中for in、forEach()、for of循环的用法

JS中for Each， for in , for of循环的用法
一、一般的遍历数组的方法：

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

二、用for in的方法遍历数组

    for(let index in array){
    		console.log(index,array[index]);
    };

三、for Each

array.forEach(v => {
		console.log(v);
});

四、用for in不仅可以对数组，也可以对enumerable对象操作

var A= {a:1,b:2,c:3,d:"hello world"};
for(let k in A){
	console.log(k, A[k]);  //k是下标
	//a 1   b 2   c 3  d hello world
}

五、在ES6中，增加了一个for of循环，遍历值，使用起来很简单

for(let v of array){
		console.log(v); 
};
	let s = "helloabc";
	for(let c of s){
			console.log(c); // h e l l o a b c
	}

总结来说：for in总是得到对象的key或数组，字符串的下标，而for of和forEach一样，是直接得到值、结果，for of不能遍历对象。
对于新出来的Map，Set上面

var set  = new Set();
set.add("a").add("b").add("d").add("c");
var map = new Map();
map.set("a", 1).set("b",2).set(999,3);
for(let v of set){
	console.log(v);  //a b d c
}
console.log("--------------------");
for(let [k, v] of map){
	console.log(k, v); //a 1   b 2   999 3
}

javascript遍历对象详细总结
1、原生javascript遍历
（1）for循环遍历

let array1= ['a', 'b', 'c'];
for(let i  =  0; i < array1.length; i++){
	console.log(array1[i]); //a b c
}

(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);    //underfined  无论怎样，总返回underfined
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(functon(element, index){
	element.classList.add('test')
})


array.prototype.slice.call(divList).forEach(function(element,index){
	element.classList.romove('test')
})

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

(3)for … in … / for… of …
for…in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。每次迭代时，分配的是属性名

补充：因为迭代的顺序是以来与执行环境的，所以数组遍历不一定按访问洗漱访问元素。因此当迭代那些访问次序重要的arrays时用整数索引去进行for循环（或者使用Array.prototype.forEach() 或for…of循环）。

		let array2 = ['a', 'b', 'c']
		let obj1 = {
			name:'lei',
			age:'16'
		}	
		for(variable in array2){   //variable 为 index
			console.log(variable);  // 0 1 2
		}

		for(variable in obj1){
			console.log(variable);  //name age
		}

ES6新增了遍历器（Iterator）机制，为不同数据结构提供统一的访问机制。只要部署了Iterator的数据都可以使用for…of…完成遍历操作（Iterator详解：http://es6.ruanyifeng.com/#docs/iterator ），每次迭代分配的是属性值

原生具备Iterator接口的数据结构如下：

Array Map Set TypedArray函数的arguments对象NodeLIS对象

		let array2 = ['a', 'b', 'c']
		let obj1 = {
			name: 'lei',
			age: '20'
		}

		for(variable of array2){	//<strong>variable  为 value</strong>
			console.log(variable);  //a b c 

		}

		for(variable of obj1){
			console.log(variable);  //不能遍历对象
		}

		let divList = document.querySelectorAll('div');
		for(element of divList){
			//可遍历所有的div 节点
			
		}

如何让普通对象可以用for of进行遍历呢？ http://es6.ruanyifeng.com/#docs/iterator 一书中有详细说明了！
除了迭代时分配的一个是属性名、一个是属性值外，for in和for of还有其他不同
for…in循环会遍历一个object所有的可枚举属性。
for…of会遍历具有Iterator接口的数据结构
for …in遍历（当前对象及其原型上的）每一个属性名称，而for…of遍历（当前对象上的）每一个属性值

		Object.prototype.objCustom = function(){};
		Array.prototype.arrCustom = function(){};

		let iterable = [3, 5, 7];
		iterable.foo = "hello";

		for(let i in iterable){
			console.log(i);  //0 1 2 foo arrCustom objCustom

		}
		for(let i of iterable){
			console.log(i); // 3, 5, 7
		}

总而言之，可以遍历数组的方法有：
1、for 最常用的一种遍历JS数组方式

2、for…in （既可以遍历数组也可以遍历对象）遍历属性 ， 数据量比较大情况下，效率比较低

3、forEach() 通过回调函数返回元素 arr.forEach(myFunction)

4、arr.map(n) 通过索引进行获取对应的值

5、for…of 遍历值