JS遍历数组的多种方式

JS遍历数组的多种方式

1. 普通for循环

for  (let i = 0; i < arr.length; i++){
        //code}

应用最为普遍的循环写法,性能好,可读性好。

2. 优化版for循环

for( let i = arr.length;i > 0; i--){
           //code}

优点:性能比普通for循环好,省去了每次对于数组长度的判断。
缺点:对于长度可能会产生变动的数组,这种方法不适用,可能会导致有的值没被遍历到等错误。

3. for in循环

for(let index in arr) {
    //如果arr是数组,index为索引
    //如果arr是对象,index为属性
};

for in循环本来是用来遍历对象的属性的,因为数组是特殊的对象,因此也可以用来遍历,需要注意的是,index在数组和对象中表示的含义是不同的,在对象中,index代表属性,在数组中,index代表索引。
另外在遍历对象时,for in会将原型链上的属性也遍历一遍,如果你不需要原型链上的属性,你可以在循环体执行之前进行一次判断,如下

if(!arr.hasOwnProperty(index)){ 
continue; 
} 

4. forEach循环

arr.forEach(function(value,index,arr){
   value;//当前值
   index;//当前索引
   arr;//原数组
});

优点:提供的三个参数可以很大程度上减少代码长度,可读性好。
缺点:无法遍历对象, 在IE9以上才能使用,而且无法使用 break,continue 跳出循环,使用 return 是跳过本次循环。
5. map方法

arr.map(function (item,index,arr) {
       return item*10//可以使用return语句来改变相应位置的元素
})

使用方法和forEach十分相似,优缺点也是相似的,IE9+才能使用,如果想在低版本IE运行,可以在原型里添加方法,如下

/**
 1. map遍历数组
 2. @param callback [function] 回调函数;
 3. @param context [object] 上下文;
*/
Array.prototype.myMap = function myMap(callback,context){
    context = context || window;
    if('map' in Array.prototye) {
        return this.map(callback,context);
    }
    //IE6-8下自己编写回调函数执行的逻辑
    var newAry = [];
    for(var i = 0,len = this.length; i < len;i++) {
        if(typeof  callback === 'function') {
            var val = callback.call(context,this[i],i,this);
            newAry[newAry.length] = val;
        }
    }
    return newAry;
}

需要注意的是map方法返回的是一个新的数组,不会改变之前的数组
而且break,continue等语句失效,无法提前跳出循环
而且map方法是可以使用return语句的
5. for of循环

for (var value of arr) {
  //code
}

优点:简洁,可以使用break、continue、return等语句,可以遍历数组、对象、DOM节点数组、Set对象等等
缺点:属于ES6的语法内容,使用时应注意兼容性。

番外

6. JQuery中的each方法

$.each(arr,function(index,value){
     //code
});

优点:既可以遍历数组,也可以遍历对象,jQuery对于方法进行了改进,一些语句可以跳出循环:
return false:将停止循环 (就像在普通的循环中使用 ‘break’)。
return true:跳至下一个循环(就像在普通的循环中使用’continue’)。
7. JQuery中的map方法

var example=$.map(function(index, item){
    // 函数内部的this === item
    return this.value;//可以使用return语句  )};

优点:可以遍历数组和对象,返回值是一个新的jQuery对象,使用get()方法可以获得原生数组
只需使用example.get()即可。
在内部的回调函数function中的返回值作为新数组的每一项成员,如果返回值为null或者undefined则保留原数组的原始值不变。
本文提供了JS遍历数组7种方式,5种原生方法,应该足够在绝大多数场合满足各种需求了,各位读者可以按照需求和偏好自行选择,感谢您的阅读!(完)

展开阅读全文

没有更多推荐了,返回首页