for...in、for...of和forEach的区别

for…in遍历键名，for…of遍历键值，forEach遍历键名与值

一、遍历对象

var testArr={
   code:'ac32',
    name:'joe',
    age:12
};
for(let i in testArr){
    console.log(i);    
}

结果：

code
name
age

只有for…in可直接遍历对象，for…of与forEach都不支持，分别会报错Uncaught TypeError: testArr is not iterable 与 Uncaught TypeError: testArr.forEach is not a function

---

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

var testArr={
        code:'ac32',
        name:'joe',
        age:12
    };
    for(let j of Object.keys(testArr)){
        console.log(j);
    }

结果：

code
name
age

二、遍历数组

var testArr=['a','b','c'];
	console.log('for...in');
    for(let i in testArr){
        console.log(i);    
    }
	console.log('for...of');
	 for(let j of testArr){
        console.log(j);    
    }
	console.log('forEach');
	testArr.forEach(function(item,index){
		console.log(item);
		console.log(index);
	});

结果：

for...in
0
1
2
for...of
a
b
c
forEach
a
0
b
1
c
2

注：for…in输出索引，for…of输出值，forEach输出索引与值；

三、遍历的数组或对象包含原型属性或者自定义属性

var testArr=['a','b','c'];
    testArr.code='123abc';
    testArr.length=5;
	Array.prototype.name = function() {};
	console.log('for...in');
    for(let i in testArr){
        console.log(i);    
    }
	console.log('for...in优化');
	//通过 hasOwnProperty进行一些优化，但自定义的属性依旧会输出
	for(let k in testArr){
		if (testArr.hasOwnProperty(k)) {
			console.log(k);
		}
	}
	console.log('for...of');
	 for(let j of testArr){
        console.log(j);    
    }
	console.log('forEach');
	testArr.forEach(function(item,index){
		console.log(item);
		console.log(index);
	});

结果：

for...in
0
1
2
code
name
for...in优化
0
1
2
code
for...of
a
b
c
undefined
undefined
forEach
a
0
b
1
c
2

注：for … in全部输出，但Array的length属性却不包括在内。for…of与forEach没影响。

四、遍历时能否中断循环

var testArr=['a','b','c'];
	console.log('for...in');
    for(let i in testArr){
        console.log(i);    
		if(i===1){
			break;
		}
    }
	console.log('for...of');
	 for(let j of testArr){
        console.log(j); 
		 if(j==='b'){
			break;
		}
    }
	console.log('forEach');
	testArr.forEach(function(item,index){
		console.log(item);
		console.log(index);
		if(item==='b'){
			return false;
		}
	});

结果：

for...in
0
1
2
for...of
a
c
forEach
a
0
b
1
c
2

注：for…of可用break中断，for…in与forEach均不可中断

五、for…of特有

1. 迭代字符串
2. 迭代arguments类数组对象
3. 迭代类DOM集合
   无需[].slice.call()，也不需要Array.from()进行数组转化
4. 迭代类型数组
5. 迭代Map
6. 迭代Set

console.log('迭代字符串');
var testArr='Joe';
 for(let j of testArr){
       console.log(j); 
   }
console.log('迭代类型数组');
let typeArr = new Uint8Array([0x00, 0xff]);
for (let value of typeArr) {
  console.log(value);
}
console.log('迭代Map');
let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of mapData) {
  console.log(value);
}
console.log('迭代Set');
let setData = new Set([1, 1, 2, 2, 3, 3]);
for (let value of setData) {
  console.log(value);
}

结果：

迭代字符串
J
o
e
迭代类型数组
0
255
迭代Map
1
2
3
迭代Set
1
2
3

六、其他遍历方式

对象遍历

1. Obeject.keys(obj)，可以返回一个数组，包括对象自身的所有可枚举属性，不包括继承的属性和Symbol属性
2. Object.getOwnPropertyNames(obj)，返回一个数组,包含对象自身的所有属性，不含Symbol属性,包括不可枚举属性
3. Object.getOwnPropertySymbols(obj)，返回一个数组,包含对象自身的所有Symbol属性
4. Reflect.ownKeys(obj)，返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举

var mySymbol = Symbol();
let myObj = {
    name:'seven',
    age:18,
    [mySymbol]:'Hello!'//Symbol属性
}
Object.prototype.hobby = 'music';
myObj.sex='female'
console.log('Obeject.keys(obj)');
console.log(Object.keys(myObj));
console.log('Object.getOwnPropertyNames(obj)');
console.log(Object.getOwnPropertyNames(myObj));
console.log('Object.getOwnPropertySymbols(myObj)');
console.log(Object.getOwnPropertySymbols(myObj));
console.log('Reflect.ownKeys(myObj)');
console.log(Reflect.ownKeys(myObj));

结果：

Obeject.keys(obj)
 ["name", "age", "sex"]
 Object.getOwnPropertyNames(obj)
 ["name", "age", "sex"]
 Object.getOwnPropertySymbols(myObj)
 [Symbol()]
 Reflect.ownKeys(myObj)
 ["name", "age", "sex", Symbol()]

数组遍历

1. Array.every()：测试数组的所有元素是否都通过了指定函数的测试
2. Array.some()：检测数组中的元素是否满足指定条件（若有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。若没有满足条件的元素，则返回false。）
3. Array.filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
4. Array.map()：返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
5. Array.reduce()：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
   注：都不会改变原始数组