资讯专栏INFORMATION COLUMN

JavaScript数组循环遍历总结

missonce / 3420人阅读

摘要:如果省略,则将用作值返回值如果函数为所有数组元素返回,则为否则为。不为数组中缺少的元素调用该回调函数。数组元素的数字索引。方法会为中的每个元素调用函数,直到返回,或直到到达数组的结尾。

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

1. for

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

var arr = ["Microsoft","Google","Apple","BUPT"];
var x,i;
for (i=0; 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标准;因此它可能不存在在标准的其他实现。比如,FirefoxChromeArray 类型都有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

Arrayreduce()把一个函数作用在这个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方法把数组的每个元素传给指定的函数,如果有调用返回trueevery函数返回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)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79443.html

相关文章

  • Javascript各种数组遍历方法归纳总结和兼容写法

    摘要:主要用于枚举对象数组遍历效率最低的方法。当前数组元素的值。传递给函数的初始值注意对于空数组是不会执行回调函数的。 前言 PS: 2018/04/26 优化一下排版,重新梳理一下方法,补充一些信息,删除JQuery库用法,只讲解Javascript自带的, for in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。主要用于枚举对象, 数组遍历效率最低的方法。 va...

    Sanchi 评论0 收藏0
  • JavaScript循环遍历你会用哪些?

    摘要:总结中的循环遍历定义一个数组和对象经常用来遍历数组元素遍历值为数组元素索引用来遍历数组元素第一个参数为数组元素,第二个参数为数组元素索引,第三个参数为数组本身可选没有返回值用来遍历数组元素第一个参数为数组元素,第二个参数为数组元素索引,第三 总结JavaScript中的循环遍历 定义一个数组和对象 const arr = [a, b, c, d, e, f]; const obj = ...

    CHENGKANG 评论0 收藏0
  • javascript遍历方法总结

    摘要:总之,是用来循环带有字符串的对象的方法。循环里引入了一种新的循环方法,它就是循环,它既比传统的循环简洁,同时弥补了和循环的短板。 forEach 循环 JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) { console.log(myAr...

    BothEyes1993 评论0 收藏0
  • javaScript数组遍历方法总结

    摘要:首次调用回调函数时,和可以是两个值之一。否则返回张三男王小毛男李四男李四返回结果为李四男方法李四对于数组中的每个元素,方法都会调用一次回调函数采用升序索引顺序,直到有元素返回。 数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。 for(var j = 0,j < arr.length;j++) { //执行代码 ...

    shiguibiao 评论0 收藏0
  • JavaScript中 for、for in、for of、forEach等使用总结

    摘要:等内置的方法和属性都是不可枚举的北京北京可以遍历可枚举但对象,包括不是它本身但存在于原型链上的属性。北京循环可迭代对象循环可迭代对象包括,,,,,类数组的对象比如对象对象以及生成器对象等。 在JavaScript中,我们经常需要去循环迭代方法操作数组对象等,常见等循环方法有 for、for in、for of、forEach等。 1.for循环 for循环是最基础常见的一种循环,圆括号...

    hlcc 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<