JS数组遍历方式总结

Bertha 。 2022-09-13 15:27 262阅读 0赞

# 原始for 循环语句 #

## 原始for 循环语句循环数组 ##

实战：

const a = [1,2,3];
    for(var i=0;i<a.length;i++){
        console.log(a[i]);  // 结果依次输出1,2,3
    }

> 代码优缺点：优点在于大家都比较熟悉，容易理解，劣势是写起来比较繁琐，需要定义额外更多的变量。

针对原始for 循环数组的缺点，提供两种for 循环改良方法

1、写法改良

const a = [1,2,3];
    // for(var i=0;i<a.length;i++){
    //     console.log(a[i]);  // 结果依次输出1,2,3
    // }
    for(var i=a.length;i--;){
        console.log(a[i]);  //结果依次为3，2，1
    }

2、性能改良

## 数组内置方法Array.prototype.forEach之数组遍历 ##

const a = [1,2,3];
    a.forEach(function(item, index, arr){
        console.log(item)    // 结果依次为1，2，3
        console.log(index)      // 结尾依次为0，1，2
        console.log(arr)      // 三次结果都为[1,2,3]，该参数貌似没什么用
    })

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16][]

**核心总结：** \*\*forEach循环\*\*是通过\*\*回调函数\*\*来提供参数的，而回调函数在JS中是\*\*闭包\*\*的一种，闭包的作用是用来生成\*\*私有作用域\*\*的，所以，每一个回调函数都是一个\*\*独立的作用域\*\*，都拥有自己独立的存储空间，互不影响，而且内部变量还不及时释放，这也就是为什么在能不用闭包的情况下就不要用闭包的原因，而在闭包中return的话，也只是在当前回调函数中返回了，可是forEach中的其他的回调函数（闭包）仍然存在，所以，导致return是没办法结束循环的。

### 实战：仿写Array.prototype.forEach 方法 ###

为Array数组对象添加forEachCopy 方法，实现Array.prototype.forEach 方法的功能：**循环输出数组集**。

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

## 数组内置方法Array.prototype.map ##

实战：

const a = [1,2,3];
    var b = a.map(function(value,key,arr){
        console.log(value)    // 结果依次为1，2，3
        console.log(key)      // 结尾依次为0，1，2
        console.log(arr)      // 三次结果都为[1,2,3]
        return value+1;
    })
    console.log(a); // 结果为[ 1, 2, 3 ]
    console.log(b); // 结果为[ 2, 3, 4 ]

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

**数组map 功能用途:**

1.  改变当前循环的值
2.  返回一个新的被改变过值之后的数组

### 实战：仿写Array.prototype.map 方法 ###

为Array数组对象添加mapCopy 方法，实现Array.prototype.map 方法的功能：**修改某一个数组的值并返回新增数组**。

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

## 数组内置方法Array.prototype.filter ##

实战

const a = [1,2,3];
    var b = a.filter(function(value,key,arr){
        console.log(value)    // 结果依次为1，2，3
        console.log(key)      // 结尾依次为0，1，2
        console.log(arr)      // 三次结果都为[1,2,3]
        if(value === 3){
          return false;
        }
        return true;
    })
    console.log(a); // 结果为[ 1, 2, 3 ]
    console.log(b); // 结果为[ 1,2 ]

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

**数组filter 与数组map 功能对比:**

map目的是为了**改变数组元素的值，并返回一个新数组**

filter目的是为了**移除数组内不符合条件的元素，并返回一个数组**

### 实战：仿写Array.prototype.filter 方法 ###

为Array数组对象添加filterCopy 方法，实现Array.prototype.filter 方法的功能：**在循环的时候如果返回的是false那么就表示本次循环的不添加该值，返回true则相反是表示要添加到新建的数组中**。

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

## 数组内置方法Array.prototype.reduce ##

实战：

const a = [1,2,3];
    var b = a.reduce(function (count, value,key,arry) {
      console.log(count);   // 结果依次为0，1，3
      console.log(value);   // 结果依次为1，2，3
      console.log(key);     // 结果依次为0，1，2
      console.log(arry)     // 三次结果都为[1,2,3]
      return count + value;
    },0);
    console.log(a);         // 结果为[ 1, 2, 3 ]
    console.log(b)          // 结果为6

**数组reduce功能用途和注意事项:**

reduce 功能用途：主要用于数组元素累加 。

reduct 注意事项:reduce的第二个参数是初始累加值

### 实战：仿写Array.prototype.reduce 方法 ###

为Array数组对象添加reduceCopy 方法，实现Array.prototype.reduce 方法的功能：**实现数组元素累加功能**。

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

## 数组内置方法Array.prototype.some ##

实战：

const a = [1,2,3];
    var b = a.some(function(value,key,arry){
      console.log(value);   // 结果依次为1，2
      console.log(key);     // 结果依次为0，1
      console.log(arry);    // 两次次结果都为[1,2,3]
      return value===2;
    })
    console.log(a);         // 结果为[ 1, 2, 3 ]
    console.log(b);         // 结果为true

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

**数组some功能用途:**

some功能用途：主要用于筛选该数组是否有满足你要的值，而且找到符合条件的值返回了一次true之后就不会再继续执行了 。

### 实战：仿写Array.prototype.some方法 ###

为Array数组对象添加someCopy 方法，实现Array.prototype.som方法的功能：**判断数组是否包含指定元素功能**。

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

## 数组内置方法Array.prototype.every ##

实战：

const a = [1,2,3];
    var b = a.every(function(value,key,arry){
      console.log(value);   // 结果依次为1，2
      console.log(key);     // 结果依次为0，1
      console.log(arry);    // 两次次结果都为[1,2,3]
      return value===2;
    })
    console.log(a);         // 结果为[ 1, 2, 3 ]
    console.log(b);         // 结果为false

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

**数组some和every 之间的区别:**some和every作用是一样的，只不过some当找到之后返回的是true，而every找到之后返回的是false

## 数组内置方法Array.prototype.indexOf ##

实战：

const a = [1,2,3];
    var b = a.indexOf(2);
    console.log(a);         // 结果为[ 1, 2, 3 ]
    console.log(b);         // 结果为1

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

**数组indexOf功能用途:** 查找数组元素与查询值是否匹配，如果能够匹配返回数组下标并终止for循环，否则返回为-1.

### 实战：仿写Array.prototype.indexOf方法 ###

为Array数组对象添加indexOfCopy 方法，实现Array.prototype.indexOf方法的功能：**判断数组是否包含指定元素功能,如果包含返回指定元素的下标地址，否则返回-1**。

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

## 数组内置方法Array.prototype.lastIndexOf ##

实战：

const a = [1,2,3,1];
    var b = a.lastIndexOf(1);
    console.log(a);         // 结果为[ 1, 2, 3, 1 ]
    console.log(b);         // 结果为1

效果截图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

**数组lastIndexOf功能用途:**lastIndexOf方法和indexOf作用一致，但查找方向不同，indexOf是正向查找，lastIndexOf是反向查找，找到之后返回成功的下标。

### 实战：仿写Array.prototype.lastIndexOf方法 ###

为Array数组对象添加lastIndexOfCopy 方法，实现Array.prototype.lastIndexOf方法的功能：**判断数组是否包含指定元素功能,如果包含返回指定元素的下标地址，否则返回-1**。注意查询方向：反向查找

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

ES5 循环语句for... in

console.log("------数组遍历 for in-------")
    var a = [1,2,3];
    for(var key in a){
      console.log(key,'-', a[key]); //结果为依次为0，1，2
    }
    console.log("-----对象遍历for in-------")
    var b = {0:1,1:2,2:3};
    for(var index in b){
      console.log(index, b[index]); //结果为依次为0,1，1,2，2,3
    }

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

**代码功能分析：**

**1、**for...in遍历数组的时候是遍历数组的下标值。

2、for...in遍历对象的时候遍历的是key值。

ES6 循环语句for... of

var a = [4,2,3];
    for(var value of a){
      console.log(value)  // 结果依次为4，2，3
    }

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

**代码功能分析**：for...of语句看着有点像for...in语句，但是和for...in语句不同的是它不可以循环对象，只能循环数组。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/57880eb0c72049b0b2654ec44c834739.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/822641e0af8845fea14524c2d7749f16.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/037a10d5367e41acb90c916163e16388.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/c55cb38a0bb04baa92e9927b6e309304.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/6802764fe3874ca1b09e7698261f7e6f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/6bfdee952a404a2db9f01a801be2d5ff.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/c3fd339232ca4ef1a4868cd8eeaf97f0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/9fdfabe2a42a415b93f646a75c02a827.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/78ef12a8699549a68c8f90d4e7aad3f0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/9bdc4074848e4961b8e6bb9f4ad81c61.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/ccae97b950d14079a19295d98f3ed61d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/628bb2160b6e46799994e0a1b13e0fce.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220828/92cf59f55335485b8542264dffdf4b1d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220828/1fe8f35eb6f4498e99e3e7327479bcb0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220828/f8489dc605c545d8a399a99614bd960f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220828/15ecb0cd9f114e0a83c76e019bf3b6bb.png