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