[学习交流] 数组遍历方法

最近用到了很多数组操作，今天就抽时间去整理一下最近对数组遍历的方法

[JavaScript] 纯文本查看 复制代码

let arr = [
    {
        id: '1',
        date: '2019-01-02',
        age: 26,
        isDelete: false
    },
    {
        id: '2',
        date: '2019-01-01',
        age: 23,
        isDelete: true
    },
    {
        id: '3',
        date: '2019-01-06',
        age: 25,
        isDelete: true
    },
    {
        id: '4',
        date: '2019-01-03',
        age: 21,
        isDelete: false
    }
]

一、map 语法：arr.map(function (v,i,a) {条件});
作用：遍历数组，根据条件+-x / 等遍历原来的数组得到一个新的数组
参数：item 数组的每一项，index 索引，下标，arr数组自身（基本不用）
返回值：一个新的数组
注意点：原数组不会改变

[AppleScript] 纯文本查看 复制代码

let a1 = arr.map(item => item.age + 1) 
//[27, 24, 26, 22]
// 箭头函数如果参数只有一个，小括号可以省略，如果返回值只有一行{}和return可以省略

二、forEach 语法：arr.forEach();
作用：相当于for循环遍历，将数组中的每个元素一次交给回调函数处理
参数：跟map一致
返回值：没有返回值
注意点：当数组中元素是值类型，forEach绝对不会改变数组；当是引用类型，则可以改变数组arr.forEach(p = p.age = p.age + 1)(不允许改变值，复杂数据类型地址不可改变)

三、some （中文：有些，其实可以看出作用，有些符合条件返回true） 语法：arr.some();
作用：判断条件遍历每一项，数组中有一项符合条件就返回true，否则返回false
参数：跟map一致
返回值：布尔类型

[AppleScript] 纯文本查看 复制代码

let a2 = arr.some(v => v.id === '2') // true
let a3 = arr.some(v => v.id === '6') // fales

四、every (中文：每一项符合就返回true)

语法：arr.every();

作用：遍历数组的每一项，全部都满足条件就返回true，否则返回false

参数：跟map一致

返回值；boolean布尔类型

[AppleScript] 纯文本查看 复制代码

let a4 = arr.every(v => Number.isInteger(v.age) === true) 
// true 判断arr中是否所有的v.age是否为整数
let a5 = arr.every(v => v.id === '1') // false

五、filter

语法：arr.filter();

作用：遍历数组arr，返回满足条件的所有值，放到一个新的数组中

参数：跟map一致

返回值：一个新的数组，尽量拿个变量接收

[AppleScript] 纯文本查看 复制代码

let a6 = arr.filter(v => v.age === 21) 
// [{id: "4", date: "2019-01-03", age: 21, isDelete: false}]

六、find（中文：发现，发现就返回）

语法：arr.find();

作用：遍历数组arr，找到满足条件的值，就停止

参数：跟map一致

返回值：返回满足条件的这一项内容

[AppleScript] 纯文本查看 复制代码

let a7 = arr.find(v => v.age === 21) 
//{id: "4", date: "2019-01-03", age: 21, isDelete: false}

七、findIndex 语法：arr.findIndex();
作用：遍历数组arr，找到满足条件的值，就停止返回数组的那一项数据
参数：跟map一致

返回值：满足条件的那一项的下标

[AppleScript] 纯文本查看 复制代码

let a8 = arr.findIndex(v => v.age === 21) // 3

八、arr.reduce(compareFunction)

[AppleScript] 纯文本查看 复制代码

作用：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
参数：
一、函数：
reducer 函数接收4个参数:
1. Accumulator (acc) (累计器)
2. Current Value (cur) (当前值)
3. Current Index (idx) (当前索引)
4. Source Array (src) (源数组)
5. 数组遍历的时候是三个参数item(current value)，index，arr）这里增加了一个accumulator

二、 initialValue作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。（可选，就是给accumulate附一个初始值，如果不写默认item的第一个值赋给accumulate）

返回值：函数累计处理的结果

```
let arr = [1, 2, 3, 4, 5]

// 数组的reduce这个函数有两种用法
// 1. 传初始化   reduce需要传两个参数，参数1： 函数  参数2：初始值
// 2. 不传初始化， reduce只需要一个参数，，参数：函数
let result = arr.reduce(function(total, item) {
  console.log(item)
  return total + item
}, 0)

console.log(result)
```

说明：相信通过上面的讲解大家都有一定的了解了，上面我用的最多的就是filter其次是forEach、map，刚开始我对forEach和map的区别不太了解，那我就说一下两者的区别，区别：、forEach没有返回值仅仅是遍历数组，map有返回值；相同点：forEach和map当数组里的内容对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，是不能被改变的。但对于复合类型的数据（主要是对象和数组），元素指向的是内存地址，就是是一个指向实际数据的指针，forEach保证这个指针是固定的（即总是指向一个固定的地址），至于它指向的数据结构的内容是否改变，他不管，所以forEach和map里面保存的是简单数据类型，原数组是不可被改变，如果是复合类型，复合类型的指向的地址不可变，但是内容是可变的！
补充：今天看到ES6对数组还有一种遍历方法for……of
for……of可以代替forEach，区别当然有很多，最主要的是forEach无法中途跳出循环，break命令、continue命令或return命令都不能奏效，for……of可以，当然for……of的用法有很多，以后再去讨论。

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 数组遍历方法

0 个回复