for:遍历数组
- for用于遍历Array中的“索引”属性
- 一般情况下效率最好
- 但是对于稀疏数组处理不好,不会事前对Array的空值进行筛选
//对象数组
var arr = [
{Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'}
]
for (var i=0; i<arr.length;i++){ // i是下标(索引)
console.log(i)
console.log(arr[i])
}
//数组
var arr = ["星期一","星期二","星期三"]
for (var j=0; j<arr.length;j++){// j是下标(索引)
console.log(j)
console.log(arr[j])
}
forEach:遍历数组,但不能使用break、continue和return语句
- forEach遍历Array中的“索引”属性,且索引值为数字
- 不响应break、continue
var arr = [
{guangzhou: '广州', shanghai: '上海', beijing: '北京'},
{Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'}
]
arr.forEach(function(value,index){ //第一个参数是值,第二个参数是下标(索引)
console.log(value)
console.log(index)
})
var arr = ["星期一","星期二","星期三"];
arr.forEach(function(value,index){//第一个参数是值,第二个参数是下标(索引)
console.log(value)
console.log(index)
})
for…in:遍历数组索引、对象的属性
使用for…in遍历时,原型链上的所有属性都将被访问
- for-in遍历所有可枚举属性,包括原型链上的属性(例子中的fatherName)
- 效率比for低,但是实现处理Array中的空值,对于稀疏矩阵的较为友好
- 适用于属性不明确或未知的Array
例如:
var arr = ["星期一","星期二","星期三"];
Array.prototype.something = ["放假","休息咯"];
for (var i in arr){ // i是下标(索引)
console.log(arr[i])
}
如果把该例子的数组,写成像上面的对象数组,效果与数组也是一样的,就不再次用对象数组来测试了。
//对象
var obj = {guangzhou: '广州', shanghai: '上海', beijing: '北京'}
Object.prototype.something2={shenzhen:'深圳'}
for (var i in obj){
console.log(obj[i])
}
结果:
解决方法:使用hasOwnProperty()
hasOwnProperty()方法可以检测一个属性是存在于实例中,还是存在于原型中。这个方法只在给定属性存在于对象实例中时,才会返回true。
//数组
var arr = ["星期一","星期二","星期三"];
Array.prototype.something = ["放假","休息咯"];
for (var i in arr){
if(arr.hasOwnProperty(i)){
console.log(arr[i])
}
}
结果:
//对象
var obj = {guangzhou: '广州', shanghai: '上海', beijing: '北京'}
Object.prototype.something2={shenzhen:'深圳'}
for (var i in obj){
if(obj.hasOwnProperty(i)){
console.log(obj[i])
}
}
结果:
for…of:遍历数组的值
- 修正for-in会遍历所有属性的缺陷
- 修正forEach不能相应break、continue的缺陷
//数组
var arr = ["星期一","星期二","星期三"];
for (var i of arr){ //i是值
console.log(i)
}
//对象
var obj = {guangzhou: '广州', shanghai: '上海', beijing: '北京'}
for (var i of obj){ //i是值
console.log(i)
}
//对象会报错:Uncaught TypeError: obj is not iterable
//不能遍历一个普通的对象,可以通过 内建Object.keys() 方法让 for..of 也支持
//我也还没有试过,这里就先不测试了,之后再研究下
结果:
总结:
for(最原始的写法)、
forEach(ES5,但是它不支持使用break、continue和return语句)、
for…of(ES6,循环数组的元素值)这三个是循环数组(对象数组)的,不能遍历对象;
for…in循环数组索引、对象的属性,但使用 for…in 原型链上的所有属性都将被访问,用 hasOwnProperty() 方法解决。
————————————————
版权声明:本文为CSDN博主「demiling」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/demiling/article/details/83146361