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

for...of

• ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并返回各项的值
• for...of遍历获取的是对象的键值
• for...of只遍历当前对象，不会遍历原型链
• 对于数组，for...of只返回数组的下标对应的属性值

let myArray = [1, 2, 4, 5, 6, 7];
myArray.name = "数组";
myArray.getName = function () { return this.name; }
for (let value of myArray) {
    console.log(value);
    console.log(typeof value)
}

• JavaScript中可迭代的对象
  • Set
  • Map
  • String
  • Array
  • Arguments
  • NodeList
• 如何判断是否具有迭代能力
  • 检测对象是否有Symbol.iterator属性
  • Array.prototype.hasOwnProperty(Symbol.iterator)

for...in

• ES3新增的遍历方式
• for...in获取的是对象的键名
• 会遍历对象的整个原型链，性能较差
• 对于数组，会返回数组中所有可枚举的属性（包括原型链上可枚举的属性）
  • 遍历的索引为字符串类型
  • 遍历顺序可能不是按照数组顺序（随机顺序）
  • 使用for in会遍历数组所有的可枚举属性，包括原型

Array.prototype.method=function(){
　　console.log(this.length);
}
let arr = [1, 2, 4, 5, 7];
for (let index in arr) {
    console.log(arr[index]);
    console.log(typeof index);
}

Object.prototype.method = function () {
    console.log(this);
}
let obj = {
    name: "张三",
    age: 22
}
for (let key in obj) {
    console.log(key);
    console.log(obj[key]);
}

-------------------------------------------------------------------------------2024.5.9 每日一题