for-in/of区别

Posted 2021-09-16 ThinkerWing

for-in/of

let arr = ['a', 'b', 'c']
arr["3"] = 'd'
arr["key"] = 'e'
arr[5] = 'f'

for in(大部分用于对象)：
for … in更适合遍历对象，不建议与数组一起使用，因为遍历顺序有可能不是按照实际数组的索引顺序。
用于循环遍历数组或对象属性，在in的时候，是打印所有的key，但是在of的时候，是打印所有（key为数字的情况）的value

for (let key in arr) {
    console.log(key);
}
//0 1 2 3 5 key

var person = { name: 'think', age: 20, city: 'fuzhou' }
for (let key in person) {
	console.log(person[key])
}
// think 20 fuzhou

for of（不能遍历对象）：
（可遍历map，object,array,set string等）用来遍历数据，比如组中的值
避免了for in的所有缺点，可以使用break,continue和return，不仅支持数组的遍历，还可以遍历类似数组的对象。

for (let value of arr) {
    console.log(value)
}
//a b c d underfined f

并且arr[1] 和arr[‘1’] 一样的，在下标（或者 key） 中，不区分Number和String，数组就是对象

for-in循环：只能获得对象的键名key，不能获得键值，且会遍历对象的整个原型链，主要用于遍历对象，格式：for(keys in zhangsan){}

for-of循环：允许遍历获得键值value，只遍历当前对象不会遍历原型链，作为遍历所有数据结构的统一的方法。
for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments对象等 ）上创建一个迭代循环，并为每个不同属性的值执行语句。

object.keys和for-in区别
两者之间最主要的区别就是Object.keys( )不会走原型链，而for-in 会走原型链
object.keys返回的是数组(key值)

let keys = Object.keys(arr);

console.log(keys);
//[ '0', '1', '2', '3', '5', 'key' ]

使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问：

Object.prototype.bar = 10;// 修改Object.prototype  
var obj={"name":"think","age":20};//定义一个object对象    
var keys=[];//定义一个数组用来接受key    
var values=[];//定义一个数组用来接受value    
  for(var key in obj){    
    keys.push(key);    
    values.push(obj[key]);//取得value      
    }    
console.log("keys is ：["+keys+"] and values is ：["+values + "]");   
// keys is ：[name,age,bar] and values is ：[think,20,10]

推荐总是使用 hasOwnProperty 方法， 这将会避免原型对象扩展带来的干扰:
Object.prototype.hasOwnProperty()
hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

Object.prototype.bar = 10 // 修改Object.prototype
var obj = { name: 'think', age: 20 } //定义一个object对象
function all(obj) {
	var keys = [] //定义一个数组用来接受key
	var values = [] //定义一个数组用来接受value
	for (var key in obj) {
		//只遍历对象自身的属性，而不包含继承于原型链上的属性。
		if (obj.hasOwnProperty(key) === true) {
			keys.push(key)
			values.push(obj[key])
		}
	}
	console.log('keys is ：[' + keys + '] and values is ：[' + values + ']')
}
all(obj)
// keys is ：[name,age] and values is ：[think,20]

let arr = ['a', 'b', 'c']
arr["3"] = 'd'
arr["key"] = 'e'
arr[5] = 'f'

for (let key in arr) {
    console.log(key);
}
//0 1 2 3 5 key
console.log("======");

for (let value of arr) {
    console.log(value)
}
//a b c d underfined f
console.log("======");

let keys = Object.keys(arr);

console.log(keys);
//[ '0', '1', '2', '3', '5', 'key' ]