JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的:
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
一、 forEach
自从JavaScript5起,我们开始可以使用内置的forEach 方法:,forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身。比如如下例子:
var arr = [1,2,3,4];
arr.forEach(function(value,index,array){
array[index] == value; //结果为true
sum+=value;
});
console.log(sum); //结果为 8
myArray.forEach(function (value) {
console.log(value);
});
但是以上,代码在IE中却无法正常工作。因为IE的Array 没有这个方法。
alert(Array.prototype.forEach);
执行以上这句得到的是 “undefined”, 也就是说在IE 中 Array 没有forEach的方法。
如果想要在IE中使用这个方法,就需要给它手动添加这个原型方法。
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(" this is null or not defined");
}
var O = Object(this);
var len = O.length >>> 0; // Hack to convert O.length to a UInt32
if ({}.toString.call(callback) != "[object Function]") {
throw new TypeError(callback + " is not a function");
}
if (thisArg) {
T = thisArg;
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}
相比于传统的写法,forEach写法简单了许多,但也有短处:你不能中断循环(使用语句或使用语句。可以使用如下两种方式:
1. if 语句控制
2. return . (return true, false)
以下例子是取出数组中2的倍数和3的倍数的数:
arryAll.forEach(function(e){
if(e%2==0)
{
arrySpecial.push(e);
return;
}
if(e%3==0)
{
arrySpecial.push(e);
return;
}
})
二、for…in
for-in循环实际是为循环”enumerable“对象而设计的。
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
你也可以用它来循环一个数组:
for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}
不推荐用for-in来循环一个数组,因为,不像对象,数组的 index 跟普通的对象属性不一样,是重要的数值序列指标。同时要注意,for in循环不会按照属性的下标来排列输出。
"first":"first",
"zoo":"zoo",
"2":"2",
"34":"34",
"1":"1",
"second":"second"
};
for (var i in obj) { console.log(i); };
输出:
1
2
34
first
zoo
second
执行时按chrome执行,先把当中的非负整数键提出来,排序好输出,然后将剩下的定义时的顺序输出。由于这个奇葩的设定,让avalon的ms-with对象排序不按预期输出了。只能强制用户不要以纯数字定义键名。
for in 可以遍历到对象的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性
for (var key in myObject) {
if(myObject.hasOwnProperty(key)){
console.log(key);
}
}
for– in 是用来循环带有字符串key的对象的方法。
三、for…of
JavaScript6里引入了一种新的循环方法,它就是for-of循环,它既比传统的for循环简洁,同时弥补了forEach和for-in循环的短板。首先看一下它的for-of的语法:
for (var value of myArray) {
console.log(value);
}
for-of的语法看起来跟for-in很相似,但它的功能却丰富的多,它能循环很多东西。
for-of循环使用例子:
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30
我们可以使用来替代,这样它就变成了在循环里的不可修改的静态变量。
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30
循环一个生成器(generators):
function* fibonacci() { // a generator function
let [prev, curr] = [0, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
四、一个例子展示出for…in 、for…of区别
for in是遍历键名,for of是遍历键值。例如:
let arr = ["a","b"];
for (a in arr) {
console.log(a);//0,1
}
for (a of arr) {
console.log(a);//a,b
}
由于for of的这个特性,他还可以实现对iterator对象的遍历,而for in就是简单的遍历了。