for of 和for in 的区别？
for of 和for in 的区别？
这道题考察的是他们的底层实现上的区别：
for in 实际上依赖是 in操作符。
in操作符 在使用的时候分两种情况，单独使用和for in.
in 操作符 单独使用的情况：
in操作符 会在可以通过对象访问指定属性时返回true，而无论该数组是在实例上还是在原型上。
function Person(){}
Person.prototype.name = "cccc";
Person.prototype.age = 29;
Person.prototype.job = "engineer";
Person.prototype.sayName = function (){
console.log(this.name)
}
let person1 = new Person();
console.log(person1.hasOwnProperty("name"));
console.log("name" in person1)
引申出来的问题：如何判断一个属性是否在原型上？
既然in操作符 可以判断属性是否在实例上还是原型上，而Object.hasOwnProperty可以判断属性是否在对象实例上。我们用他们两个的结合就可以实现 该需求：
function hasPrototypeProperty(object,name){
return !object.hasOwnProperty(name) && (name in object)
}
console.log(hasPrototypeProperty(person1,"name"))
对象描述属性enumerable:false的时候，in操作符还起作用吗？
enumerable:false是否可迭代，它是在for in，Object.keys的时候用到的。in操作符单独使用并不会被其影响。同样可以判断。
Object.defineProperty(person1,"cccc",{
enumerable:false
})
//判断修改对象属性为不可迭代是否影响in 操作符的判断
console.log("cccc" in person1) // true
for in的情况
可以通过对象访问且可以被枚举的属性都会被返回，包括了实例属性和原型属性。
而如果想只想要获取实例上所有可枚举的属性，可以用Object.keys来替代。
这里描述的时候有一个关键就是可以枚举属性，什么是可枚举属性，就是enumerable:true的情况。
如果我们给一个对象的属性设置了enumerable:false，那么就变成了不可枚举属性。
function Person(){
}
Person.prototype.name = "cccc";
Person.prototype.age = 29;
Person.prototype.job = "engineer";
Person.prototype.sayName = function (){
console.log(this.name)
}
Object.defineProperty(Person.prototype,"name",{
enumerable:false
})
let person = new Person();
for (let v in person){
console.log(v)
}
//age
//job
//sayName
可以看到属性name并没有打印出来。
如果只想要实例上的属性：可以用Object.keys来替代。
let person = new Person();
person.names = "job";
console.log(Object.keys(person))
//[ 'names' ]
如果我想要遍历实例的所有属性呢？ 不可枚举和可枚举的都要，包括Symbol,使用Object.getOwnPropertyNames.
console.log(Object.getOwnPropertyNames(Person.prototype))
//[ 'constructor', 'name', 'age', 'job', 'sayName' ]
可以看到它把Person原型对象上的所有属性都遍历出来了，包括我们之前设置的name属性和constructor属性。
如果想要遍历Symbol属性呢？ Object.getOwnPropertySymbols属性。
let k1 = Symbol("k1");
let k2 = Symbol("k2");
person[k1] = k1;
person[k2] = k2;
console.log(Object.getOwnPropertySymbols(person))
//[ Symbol(k1), Symbol(k2) ]
Reflect.ownKeys 想要实例的所有属性，包括可枚举和不可枚举的，包括Symbol
它的效果实际上就相当于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))
var sym = Symbol.for("comet");
var sym2 = Symbol.for("meteor");
var obj = {[sym]: 0, "str": 0, "773": 0, "0": 0,
[sym2]: 0, "-1": 0, "8": 0, "second str": 0};
Reflect.ownKeys(obj);
// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]
总结一下：
| 需求 | 实现 |
|---|---|
| 只要实例的可枚举属性 | Object.keys |
| 要实例的所有属性,包括不可枚举的，不包括Symbols | Object.getOwnPropertyNames |
| 要实例和原型上可枚举的属性 | for in |
| 要实例上的Symbol属性 | Object.getOwnPropertySymbols |
| 要实例的所有属性，包括不可枚举的，包括Symbols | Reflect.ownKeys |
实际上 for in 的遍历是取决于 可枚举属性enumerable 它可以遍历实例和原型上的所有的属性。
for ...of
它底层依赖是迭代器。和可枚举属性enumerable没有关系。而且普通对象上并没有实现迭代器。
如果想要实现自定义迭代器，需要通过一个Symbol.Iterator属性来添加。
所有它实际上考察的是迭代器的知识。
class Person {
constructor(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
}
[Symbol.iterator](){
let self = this;
let index = 0;
let res = Object.keys(self);
let limit = res.length;
return {
next(){
let key = res[index++];
return {
value:{
key,
value:self[key]
},
done:index > limit
}
},
return(){
return {done:true}
}
}
}
}
let person = new Person("张三",23,"程序员");
for(let v of person){
console.log(v)
}
//输出
{ key: 'name', value: '张三' }
{ key: 'age', value: 23 }
{ key: 'job', value: '程序员' }
我们可以自定义迭代器来实现打印对象属性的目的。通过拿到Object.keys拿到现在对象的所有可遍历对象。如果想要拿到所有的属性的话可以通过Object.getOwnPropertyNames。
总结：
for in 的特性
- 无序，它和Object.keys遍历的出来的属性都是无序的
- for in 拿到的数据是 属性名，不包括属性值。
- 底层是根据
enumerable可枚举属性来控制的，如果不想要某个属性被读取，可以通过修改其enumerable:false - 会遍历实例属性和原型的属性
- 可以被打断 break,return
- 适合遍历对象
for of 的特性
底层使用迭代器实现，可以遍历所有提供迭代器协议的结构体。所以它可以遍历数组,字符串,Map，Set,arguments，NodeList等DOM集合类型
- 可以通过
break,return,containue退出循环 - 支持多种结构的遍历