循环

2018-01-09  本文已影响0人  Daniel_Y

for

forEach

$.each

[1, 2 ,3, 4].forEach(alert);
等同于
var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); }

[].forEach(function(value, index, array) {
// ...
});
对照jquery中的.each()
$.each([], function(index, value, array) {
// ...
});

$().each $.each

map

var Squares=data.map(function(val,index,arr){
console.log(arr[index]==val); // ==> true
return val*val
})
console.log(Squares); // ==> [1, 9, 16]

由于forEach、map都是ECMA5新增数组的方法,所以ie9以下的浏览器还不支持(万恶的IE啊),不过呢,可以从Array原型扩展可以实现以上全部功能,例如forEach方法:

if (typeof Array.prototype.forEach != "function") {

Array.prototype.forEach =function() {

/* 实现 */
};
}

for/in

for/of

for/in - 循环遍历对象的属性(ES5)
for/of 语法和for/in很像,但跟丰富(ES6)

1 . 推荐在循环对象属性的时候,使用for...in, 在遍历数组的时候的时候使用for...of。

2 . for...in循环出的是key,for...of循环出的是value

3 . 注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足

4 . for...of不能循环普通的对象,需要通过和Object.keys()搭配使用

假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]

使用for...in循环:

for(let index in aArray){
console.log(${aArray[index]});
}

使用for...of循环:

for(var value of aArray){
console.log(value);
}

咋一看好像好像只是写法不一样而已,那为什么说for...of修复了for...in的缺陷和不足。
假设我们往数组添加一个属性name:
aArray.name = 'demo',再分别查看上面写的两个循环:

for(let index in aArray){
console.log(${aArray[index]}); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
console.log(value);
}

所以说,作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

for...of循环不会循环对象的key,只会循环出数组的value,因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in

如果实在想用for...of来遍历普通对象的属性的话,可以通过和Object.keys()搭配使用,先获取对象的所有key的数组
然后遍历:

var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}

上一篇下一篇

猜你喜欢

热点阅读