JavaScript for in循环，for of循环

本文主要是介绍JavaScript for in循环，for of循环，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、JavaScript for/in 语句循环遍历对象的属性

var person={fname:"Bill",lname:"Gates",age:56}; 
var txt = "";

// x 为属性名 
for (x in person) {
    txt = txt + person[x];
}
console.log(txt);

结果为：BillGates56

二、for...of 是 ES6 新引入的特性。它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板。

1 . 循环一个数组(Array)

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

2. 我们可以使用const来替代let，这样它就变成了在循环里的不可修改的静态变量。

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

3. 循环一个Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

4. 循环一个 Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

5. 循环一个 DOM collection

循环一个DOM collections，比如NodeList，之前我们讨论过如何循环一个NodeList，现在方便了，可以直接使用for-of循环。

// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

6. 循环一个拥有enumerable属性的对象

var person={fname:"Bill",lname:"Gates",age:56}; 

// for–of循环并不能直接使用在普通的对象上，但如果我们按对象所拥有的属性进行循环，可使用内置的Object.keys()方法：
for (var key of Object.keys(person)) {
  console.log(key + ": " + person[key]);
}

// fname: Bill
// lname: Gates
// age: 56

本文参考：

https://www.runoob.com/js/js-loop-for.html

这篇关于JavaScript for in循环，for of循环的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！