JS数组Array遍历的几种方式

JS 数组Array遍历的几种方式

[TOC]

## 1. 数组遍历

### 1.1. forEach 方式

**语法：**Array.forEach(function(item,index){})

+ 参数
 + item 当前元素的值
 + index 当前元素所在数组的索引位置
+ 说明
 + forEach 本身没有返回结果
 + forEach 不会跳过空位置，数组中即使有元素是空，也会被遍历

**示例：**

```JS
var perInfo = ["曹操", "刘备", "","孙权"]
var newPerInfo = perInfo.forEach(function (item, index) {
    console.log(item)     //打印结果依次为 曹操、刘备、 、孙权
    console.log(index)    //打印结果依次为 0、1、2、3
    return index
})
console.log(newPerInfo)   //打印结果为undefined
```

### 1.2. map 方式

**语法：**Array.map(function(item,index,array){},thisValue)

+ 参数
 + item 当前元素的值
 + index 当前元素所在数组的索引位置
 + array 当前遍历的数组
 + thisValue 当前传入遍历函数体的 this 参数，函数体的this就是这时传入的对象，thisValue 是一个对象类型参数，使用thisValue 这个参数时函数体不能使用箭头函数的方式
+ 说明
 + map 返回一个与遍历数组长度一样的新数组，数组成员由函数体的 return 决定，如果没有对应的 return 结果，那么这个数组位置上的值就是 undefined

**示例一：**数组成员，成员索引，和返回结果

```JS
var perInfo = ["曹操", "刘备", "","孙权"]
var newPerInfo = perInfo.map
    ((item, index, array) => {
        console.log("item=>" + item + "-" + index)
        console.log("this=>" + array.toString())
        return index;
    })
console.log(newPerInfo)
```

**示例一结果：**

```JS
item=>曹操-0              // 数组成员的值和成员所在索引
this=>曹操,刘备,,孙权      // 被遍历的数组，每次遍历都不会变
item=>刘备-1
this=>曹操,刘备,,孙权
item=>-2
this=>曹操,刘备,,孙权
item=>孙权-3
this=>曹操,刘备,,孙权
[ 0, 1, 2, 3 ]            // 返回得到的新数组
```

**示例二：**thisValue 参数演示

```JS
var perInfo = ["曹操", "刘备", "","孙权"]
var newPerInfo = perInfo.map
    (function (item, index, array) {
        if (this == item) {  // 这里的this就是thisValue传递值
        // if (this.indexOf(item) > -1)  // 这里 thisValue 传递的值是数组类型
            console.log(typeof (this))  // 打印结果：Object
            console.log(typeof (item))  // 打印结果：string
            // this == item 比较不能使用===，他们的类型不一样，this是对象类型
            console.log("item=>" + item + "-" + index)  // 打印结果：item=>刘备-1
            console.log("array=>" + array.toString())  // 打印结果：array=>曹操,刘备,,孙权
            console.log("this=>" + this)  // 打印结果：this=>刘备
            return index;  // 返回的是新数组的成员。如果没有此次遍历没有return，那么次成员为 undefined
        }
    },
      "刘备"              //这里的‘刘备’就是 thisValue
      //["刘备","曹操"]   //thisValue 是个对象类型，这里也可以是数组或对象
    )
```

### 1.3. for 方式

这种方式也是最常规的方式，基础遍历方式，需要定义自增变量，自增的变量即数组成员所在的索引位置

**语法：**for (var i = 0; i &lt; perInfo.length; i++){}

**示例：**

```JS
var perInfo = ["曹操", "刘备", "","孙权"]
for (var i = 0; i < perInfo.length; i++) {
 console.log(perInfo[i]) //打印结果依次为 曹操、刘备、 、孙权
}
```

### 1.4. for-in 方式

这种方式是 ES6 新增，使用时要确定浏览器是否支持 ES6 语法

**语法：**for (const key in Array){})，这里使用 const 定义 key 是常量，当然也可以根据需求修改为 var 或 let

**示例：**

```JS
var perInfo = ["曹操", "刘备", "","孙权"]
for (const key in perInfo) {
    console.log(key)           //打印结果依次为 0、1、2 、3，这里key即是数组成员所在的索引
    console.log(perInfo[key])  //打印结果依次为 曹操、刘备、 、孙权
}
```

### 1.5. for-of 方式

这种方式是 ES6 新增，使用时要确定浏览器是否支持 ES6 语法

**语法：**for (const key of Array){})

**示例：**
```JS
var perInfo = ["曹操", "刘备", "","孙权"]
for (const key of perInfo) {
    console.log(key)  //打印结果依次为 曹操、刘备、 、孙权，这里key即是数组成员的值
}
```