现在网|现在博客-分享、记录生活的点滴

JavaScript 遍历数组的多种方式

作者: Chuwen
时间: 2019-07-04
分类: JavaScript
评论

# JS遍历数组的多种方式

## 1. 普通 `for循环`
 > 应用最为普遍的循环写法，性能好，可读性好。
 ```
 for  (let i = 0; i < arr.length; i++){
     //code
 }
 ```

## 2. 优化版 `for循环`
 > 优点：性能比普通for循环好，省去了每次对于数组长度的判断。
 > 缺点：对于长度可能会产生变动的数组，这种方法不适用，可能会导致有的值没被遍历到等错误。
 ```
 for( let i = arr.length;i > 0; i--){
     //code
 }
 ```

## 3. for in循环
 > 优点：提供的三个参数可以很大程度上减少代码长度，可读性好。
 > 缺点：无法遍历对象， 在IE9以上才能使用，而且无法使用 break，continue 跳出循环，使用 return 是跳 
 过本次循环。
 ```
 for(let index in arr) {
     //如果arr是数组，index 为索引
     //如果arr是对象，index 为属性
 };
 ```
 > for in循环本来是用来遍历对象的属性的，因为数组是特殊的对象，因此也可以用来遍历，需要注意的是， 
 index在数组和对象中表示的含义是不同的，在对象中，index代表属性，在数组中，index代表索引。
 >
 > 另外在遍历对象时，for in会将原型链上的属性也遍历一遍，如果你不需要原型链上的属性，你可以在循环体执行之前进行一次判断，如下：
 ```
 if(!arr.hasOwnProperty(index)){ 
     continue; 
 } 
 ```

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

## 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语句的

##  6. for of 循环
> 优点：简洁，可以使用break、continue、return等语句，可以遍历数组、对象、DOM节点数组、Set对象等等
> 缺点：属于ES6的语法内容，使用时应注意兼容性。
```
for (var value of arr) {
  //code
}
```

---

> 转载自：https://blog.csdn.net/mwl1711883743/article/details/81805573

续费 nowtime.cc 一年

作者: Chuwen
时间: 2019-07-03
分类: 唠嗑闲聊
评论

[C语言]用递归法求n阶勒让德多项式

作者: Chuwen
时间: 2019-06-02
分类: C/C++
评论

C 语言 | 求 3x3 矩阵对角线之和

作者: Chuwen
时间: 2019-05-16
分类: PHP
评论

C 语言输出杨辉三角

作者: Chuwen
时间: 2019-05-16
分类: C/C++
评论

JavaScript 遍历数组的多种方式

续费 nowtime.cc 一年

[C语言]用递归法求n阶勒让德多项式

C 语言 | 求 3x3 矩阵对角线之和

C 语言输出杨辉三角

最新文章

最近回复

分类

归档

其它

JavaScript 遍历数组的多种方式

续费 nowtime.cc 一年

[C语言]用递归法求n阶勒让德多项式

C 语言 | 求 3x3 矩阵对角线之和

C 语言输出 杨辉三角

最新文章

最近回复

分类

归档

其它

C 语言输出杨辉三角