JavaScript数组循环遍历总结

这一部分应该放在《JavaScript处理数组函数总结》里面的，但是。。。。。。没有但是。

1. for

for循环最常用的地方是利用索引来遍历数组：

var arr = ['Microsoft','Google','Apple','BUPT'];
var x,i;
for (i=0; i<arr.length; i++){
    //do something
    console.log(arr[i]);
}

2.for...in

for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：

var arr = [10,20,30];
for (var i in arr){
    console.log(i+' : '+typeof i);//0 : string
    console.log(arr[i]+' : '+typeof arr[i]);//10 : number
}

注意：

• for ... in 是用来遍历对象的属性的，实际上JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。

• 由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for ... in循环可以直接循环出Array的索引，但得到的是String而不是Number

3. forEach()

forEach 从头到尾遍历数组，为每个元素调用制定的函数

function say(element, index, array){
    document.write('['+index+'] is '+element);
}
['one','two','three'].forEach(say);//[0] is one...

补充：

arrayObject.forEach(callback[, thisObject])

callback: 函数测试数组的每个元素
thisObject: 对象作为该执行回调时使用

• 兼容性问题：forEach是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现。比如，Firefox 和Chrome 的Array 类型都有forEach的函数,但是IE中中没有。

• 兼容IE的方法：添加如下脚本

//Array.forEach implementation for IE support..
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
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实现的数组去重函数：

Array.prototype.delrep = function(fun){

    if (this === null){
            throw new TypeError('this is null or not defined');
    }
    if (!fun){
        function fun(d){
            return d ;
        }
    } else {
        if (Object.prototype.toString.call(fun) != '[object Function]'){
            throw new TypeError(fun +'is not a function');
        }
    }
    
    var newArr = [];
    this.sort(function(a,b){
        return fun(a) > fun(b)? -1 : 1;
    });
    newArr.push(this[0]);
    this.forEach(function(d){
        if (fun(d) != fun(newArr[0])){
            newArr.unshift(d);
        }
    });
    return newArr;    
}

//测试实例1
[5,2,6,3,5,3,6,7,4].delrep();//[2,3,4,5,6,7]

data = [
    {
        name : 'hihi',
        value: 123
    },
    {
        name : 'guagua',
        value: 345
    },
    {
        name : 'hihi',
        value: 567
    }
]
data.delrep(function(d){
    return d.name;
}); /* [
    {
        name : 'hihi',
        value: 123
    },
    {
        name : 'guagua',
        value: 345
    },
    {
        name : 'hihi',
        value: 567
    }
] */

4.map

map 把数组的每个元素传给指定的函数，并返回一个数组。

function pow(x){
    return x*x;
}
[1,2,3,4].map(pow);//[1,4,9,16]

5.reduce

Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算,其效果就是：

[x1,x2,x3,x4].reduce(f) = f(x4,f(x3,f(x1,x2)))

var arr = [1,2,3,4,5];
arr.reduce(function(a,b){
    return a*10+b;
});//12345

6.filter

filter 把数组的每个元素传给指定的函数，通过函数返回的布尔值决定是否在返回数组中添加该元素

var arr = [' A','',undefined,null,' ','c'];
var r = arr.filter(function(s){
    return s&&s.trim();// 注意：IE9以下的版本没有trim()方法
});
arr;//['A','',undefined,null,' ','c']
r;//['A','C']

注意：filter会返回一个新数组

7.every

确定数组的所有成员是否满足指定的测试。

arrayObject.every(callback[, thisArg])

callback: 必需。一个接受最多三个参数的函数。 every 方法会为 arrayObject 中的每个元素调用 callback 函数，直到 callback 返回 false，或直到到达数组的结尾。
thisArg: 可选。可在 callback 函数中为其引用 this 关键字的对象。如果省略 thisArg，则 undefined 将用作 this 值

• 返回值： 如果 callback 函数为所有数组元素返回 true，则为 true；否则为 false。如果数组没有元素，则 every 方法将返回 true。

注意：

• every 方法会按升序顺序对每个数组元素调用一次 callback 函数，直到 callback 函数返回 false。如果找到导致 callback 返回 false 的元素，则 every 方法会立即返回 false。否则，every 方法返回 true。

• 不为数组中缺少的元素调用该回调函数。

• 除了数组对象之外，every 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

• 回调函数语法

function callback(value,index,array)
可使用最多三个参数来声明回调函数。

value:数组元素的值。
index:数组元素的数字索引。
array:包含该元素的数组对象。

// Create a function that returns true if the value is
// numeric and within range.
var checkNumericRange = function(value) {
    if (typeof value !== 'number')
        return false;
    else 
        return value >= this.minimum && value <= this.maximum;
}

// Create an array of numbers.
var numbers = [10, 15, 19];

// Check whether the callback function returns true for
// all of the array values.
// The obj argument enables use of the this value
// within the callback function.

var obj = { minimum: 10, maximum: 20 }

if (numbers.every(checkNumericRange, obj))
    document.write ("All are within range.");
else
    document.write ("Some are not within range.");

// Output:
//   All are within range.

8.some

some方法和every方法的语法类似，不过some方法把数组的每个元素传给指定的函数，如果有调用返回true则every函数返回true

arrayObject.some(callback[, thisArg])

callback: 必需。一个接受最多三个参数的函数。 every 方法会为 arrayObject 中的每个元素调用 callback 函数，直到 callback 返回 true，或直到到达数组的结尾。
thisArg: 可选。可在 callback 函数中为其引用 this 关键字的对象。如果省略 thisArg，则 undefined 将用作 this 值

• 返回值： some 方法会按升序索引顺序对每个数组元素调用 callback 函数，直到 callback 函数返回 true。如果找到导致 callback 返回 true 的元素，则 some 方法会立即返回 true。如果回调不对任何元素返回 true，则 some 方法会返回 false

参考

1.循环-廖雪峰官方网站
2.详解JavaScript中的forEach()方法的使用
3.javascript的Foreach语法
4.javascript数组去重函数
5.ECMAScript 5中的数组新方法
6.every 方法 (Array) (JavaScript).aspx)