js关于for of 与for in

for…of

for-of循环用于遍历可迭代对象,如数组、字符串、Map、Set等。它直接访问每个元素的值,而不是键名。

const arr = [3,5,6,7,0]
for(let item of arr){
  console.log(item);
}
// 3
// 5
// 6
// 7
// 0

只有部署了Iterator接口的数据结构才能使用for…of遍历。
原生具备Iterator接口的数据结构有以下几个。

  1. Array
  2. Map
  3. Set
  4. String
  5. 函数的arguments对象。
  6. NodeList对象。

for …in

for-in循环主要用于遍历对象的所有可枚举属性,包括对象自身的属性和继承自原型的属性。它不适用于遍历数组,因为数组的索引会被当作字符串处理,且遍历顺序可能不是按照数组的实际顺序。

var person = { 
  name: 'John', 
  age: 30, 
  gender: 'male' 
};

for (var key in person) {
    console.log(key, person[key]);
}
// 输出:name John, age 30, gender male

for in 遍历数组容易引发的问题:

  • 遍历顺序不确定性,在一些非连续数组。
  • 会遍历非数字索引。
  • 性能问题会比 for of 差,因为 for in 会遍历原型链上有的可枚举属性。

如何让一个对象支持使用for of来迭代循环遍历

const obj = { a: 'xx', b: 'dd', c: 4 };

// 为对象添加 [Symbol.iterator] 属性并指向一个迭代器函数
obj[Symbol.iterator] = function* () {
  for (let key in this) {
    yield this[key];
  }
};

// 使用 for...of 循环遍历对象
for (let value of obj) {
  console.log(value); // 输出属性值:1, 2, 3
}
function Person(name, age) {
    this.name = name;
    this.age = age;
}
// 在原型中添加[Symbol.iterator]属性
Person.prototype[Symbol.iterator] = function () {
    // 设置变量,记录遍历的次数
    let count = 0;
    // 通过Object.keys()函数获取实例自身的所有属性
   let propArr = Object.keys(this);
    return {
        next: function () {
            // 每执行一次遍历,count值加1
            // 当count值小于属性的长度时,表示仍然可以遍历,设置done值为false
            if (count < propArr.length) {
                let index = count++;
                return {
                    value: propArr[index],
                    done: false
                };
            } else {
                // 当count值等于属性的长度时,遍历结束,设置done值为true
                return {
                    value: undefined,
                    done: true
                }
            }
        }
    }
};
const person = new Person('kingx', 12);

for (let key of person) {
    console.log(key, ':', person[key]);
}
### JavaScript 中 `for...in` `for...of` 循环的区别 #### 基本概念 `for...in` 是一种用于遍历对象属性的语句,而 `for...of` 则是用来迭代可迭代对象(如数组、字符串、Map、Set 等)中的值。两者的用途不同,适用场景也有所差异。 #### `for...in` 的特点 `for...in` 遍历的是对象自身的以及继承的可枚举属性名[^2]。它通常被用来访问对象的所有键(即属性名称)。需要注意的是,`for...in` 不仅会返回对象本身的属性,还会返回通过原型链继承来的属性。因此,在处理数组时可能会导致意外的结果,因为数组也是对象的一种形式,并且可能具有额外的方法或属性。 ```javascript const obj = { key1: 'value1', key2: 'value2' }; for (let prop in obj) { console.log(prop); // 输出 "key1", "key2" } ``` #### `for...of` 的特点 相比之下,`for...of` 提供了一种更直观的方式来获取集合类型的值,而不是它们的索引或者键[^4]。它可以作用于任何实现了 Iterable 接口的数据结构之上,比如 Array、String、TypedArray、NodeList 或者 Map/Set 等等。对于这些数据类型来说,每次循环都会提取当前项的实际内容而非其位置信息。 ```javascript const array = ['a', 'b', 'c']; for (let elem of array) { console.log(elem); // 输出 "a", "b", "c" } ``` #### 主要区别总结 | 特性 | for...in | for...of | |---------------------|-----------------------------------|------------------------------| | **主要功能** | 遍历对象的属性 | 获取可迭代对象中的具体值 | | **目标范围** | 所有可枚举属性(包括原型上的方法)| 可迭代对象的内容 | | **性能考虑** | 较慢 | 更高效 | 尽管两者名字相似,但实际应用场景完全不同;如果只是想简单地读取列表里的每一个成员,则应该优先选用效率更高的 `for...of` 而不是容易引起误解甚至错误使用的 `for...in`. ```javascript // 使用for...of来打印数组元素 let letters = ["A", "B", "C"]; for(let letter of letters){ console.log(letter); } // 使用for...in则需注意不要误用到数组上 let numbers = [10, 20 ,30]; for(let index in numbers){ console.log(numbers[index]); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值