JavaScript for in循环，for of循环

时间：2021-07-05 17:32:20 收藏：0 阅读：0

一、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

7. for...in 循环会自动跳过那些没被赋值的元素，而 for 循环则不会，它会显示出 undefined。

<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var array = new Array();
    var x;
    var txt=""
    array[0] = 1;
    array[3] = 2;
    array[4] = 3;
    array[10] = 4;
    for( x in array ){
        alert(array[x]);     // 依次显示出 1 2 3 4
    } 
    alert(array.length);    // 结果是11
    for( var i=0 ; i<4 ; i++){
        alert(array[i]);     // 依次显示出 1 undefined undefined 2 
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

本文参考：

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