总结:
遍历数组用for of,遍历对象用for in。
for of遍历数组和forEach遍历数组的区别:for of能用break语句,forEach不能用break语句。
for in 遍历数组,会将数组的原型上的方法和属性一起遍历。
for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name。
for of 不能遍历对象,报错 Uncaught TypeError: obj is not iterable。
forEach 不能使用break ,报错 Uncaught SyntaxError: Illegal break statement。
代码演示:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for in for of forEach</title>
</head>
<body>
<p>
总结:
遍历数组用for of,遍历对象用for in。
for of遍历数组和forEach遍历数组的区别:for of能用break语句,forEach不能用break语句。
</p>
<script>
Array.prototype.method=function(){
console.log(this.length);
}
var arr = [0,1,2,3];
arr.five = 4;
arr.name="数组"
console.log("直接打印 arr 开始");
console.log(arr);
console.log("直接打印 arr 结束");
console.log('\n')
var obj={
name:"mumu",
age:"18"
}
console.log("直接打印 obj 开始");
console.log(obj);
console.log("直接打印 obj 结束");
console.log('\n')
console.log("forEach 遍历 arr 开始");
//forEach 不能使用break ,报错 Uncaught SyntaxError: Illegal break statement
arr.forEach(value => {
// if(value > 2) {
// break
// }
console.log(value)
})
console.log("forEach 遍历 arr 结束");
console.log('\n')
console.log("for in 遍历 arr 开始");
//for in 遍历数组,会将数组的原型上的方法和属性一起遍历
for(let i in arr) {
console.log(arr[i])
}
console.log("for in 遍历 arr 结束");
console.log('\n')
console.log("for of 遍历 arr 开始");
//for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name
for(let i of arr) {
console.log(arr[i])
}
console.log("for of 遍历 arr 结束");
console.log('\n')
console.log("for in 遍历 arr 开始,带 break");
for(let i in arr) {
if(i > 2) {
break
}
console.log(arr[i])
}
console.log("for in 遍历 arr 结束,带 break");
console.log('\n')
console.log("for of 遍历 arr 开始,带 break");
for (let i of arr) {
if(i > 2) {
break
}
console.log(arr[i]);
}
console.log("for of 遍历 arr 结束,带 break");
console.log('\n')
console.log("for in 遍历 obj 开始");
for (let i in obj) {
console.log(i);
}
console.log("for in 遍历 obj 结束");
console.log('\n')
console.log("for of 遍历 obj 开始");
//for of 不能遍历对象,报错 Uncaught TypeError: obj is not iterable
for (let i of obj) {
console.log(i);
}
console.log("for of 遍历 obj 结束");
</script>
</body>
</html>