数组遍历总结整理

_苏大怡Sue
85 阅读9分钟

image.png

一、map循环

1.1 用法：

array.map(function(currentValue, index, arr),thisValue)
// currentValue => 当前元素的值
// index => 当前元素的索引值
// arr当前元素属于的数组对象
// thisValue this指向，默认全局对象，可忽略

1.2 例子：

1.2.1 代码
// 更新数据
// 定义array数组
const array = ['小明','小弘','小生']

// map遍历数组
let newArray = array.map((item,index,arr)=>{
                console.log('我现在是谁',item)
                console.log('我现在排第几位',index)
                console.log('我是在操纵哪个数组',arr)
                console.log('===========================================')
                return item+index
              })

// 对比新旧数组
console.log('我是老数组：',array)
console.log('我是新数组',newArray)
1.2.2 打印结果
 我现在是谁 小明
 我现在排第几位 0
 我是在操纵哪个数组 (3) ["小明", "小弘", "小生"]
 ===========================================
 我现在是谁 小弘
 我现在排第几位 1
 我是在操纵哪个数组 (3) ["小明", "小弘", "小生"]
 ===========================================
 我现在是谁 小生
 我现在排第几位 2
 我是在操纵哪个数组 (3) ["小明", "小弘", "小生"]
 ===========================================
 我是老数组： (3) ["小明", "小弘", "小生"]
 我是新数组 (3) ["小明0", "小弘1", "小生2"]

1.3 特点：

  • (1)循环遍历数组中得每一项
  • (2)支持三个参数，分别为item（当前每一项），index（索引值），arr（原数组）
  • (3)返回一个新的数组
  • (4)map()不会对空数组进行检测
  • (5)map()无法停止当前的遍历

二、find循环

2.1 用法：

array.find(function(currentValue, index, arr),thisValue)
// currentValue => 当前元素的值
// index => 当前元素的索引值
// arr当前元素属于的数组对象
// thisValue this指向，默认全局对象，可忽略

2.2 例子：

2.2.1 代码
// 查找第一个符合要求的数组元素
// 定义array数组
const array = ['1','5','3','6','9','7']

// find遍历数组
let newArray = array.find((item,index,arr)=>{
                console.log('我现在是谁',item)
                console.log('我现在排第几位',index)
                console.log('我是在操纵哪个数组',arr)
                console.log('===========================================')
                return item > 5
              })

// 对比新旧数组
console.log('我是老数组：',array)
console.log('我是新数组',newArray)
2.2.2 打印结果
 我现在是谁 1
 我现在排第几位 0
 我是在操纵哪个数组 (6) ["1", "5", "3", "6", "9", "7"]
 ===========================================
 我现在是谁 5
 我现在排第几位 1
 我是在操纵哪个数组 (6) ["1", "5", "3", "6", "9", "7"]
 ===========================================
 我现在是谁 3
 我现在排第几位 2
 我是在操纵哪个数组 (6) ["1", "5", "3", "6", "9", "7"]
 ===========================================
 我现在是谁 6
 我现在排第几位 3
 我是在操纵哪个数组 (6) ["1", "5", "3", "6", "9", "7"]
 ===========================================
 我是老数组： (6) ["1", "5", "3", "6", "9", "7"]
 我是新数组 6

2.3 特点：

  • (1)支持三个参数，分别为item（当前每一项），index（索引值），arr（原数组）
  • (2)返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined
  • (3) find() 不会对空数组进行检测
  • (4) find() 找到第一个符合条件的元素才停止循环

三、filter循环

3.1 用法：

array.filter(function(currentValue,index,arr), thisValue)
// currentValue => 当前元素的值
// index => 当前元素的索引值
// arr当前元素属于的数组对象
// thisValue this指向，默认全局对象，可忽略

3.2 例子：

3.2.1 代码
// 利用filter去重
// 定义array数组
const array = ['小明','小弘','小生','小明','小生','小美']

// map遍历数组
let newArray = array.filter((item,index,arr)=>{
                console.log('我现在是谁',item)
                console.log('我现在排第几位',index)
                console.log('我是在操纵哪个数组',arr)
                console.log('===========================================')
                return array.indexOf(item, 0) === index;
              })

// 对比新旧数组
console.log('我是老数组：',array)
console.log('我是新数组',newArray)
3.2.2 打印结果
 我现在是谁 小明
 我现在排第几位 0
 我是在操纵哪个数组 (6) ["小明", "小弘", "小生", "小明", "小生", "小美"]
 ===========================================
 我现在是谁 小弘
 我现在排第几位 1
 我是在操纵哪个数组 (6) ["小明", "小弘", "小生", "小明", "小生", "小美"]
 ===========================================
 我现在是谁 小生
 我现在排第几位 2
 我是在操纵哪个数组 (6) ["小明", "小弘", "小生", "小明", "小生", "小美"]
 ===========================================
 我现在是谁 小明
 我现在排第几位 3
 我是在操纵哪个数组 (6) ["小明", "小弘", "小生", "小明", "小生", "小美"]
 ===========================================
 我现在是谁 小生
 我现在排第几位 4
 我是在操纵哪个数组 (6) ["小明", "小弘", "小生", "小明", "小生", "小美"]
 ===========================================
 我现在是谁 小美
 我现在排第几位 5
 我是在操纵哪个数组 (6) ["小明", "小弘", "小生", "小明", "小生", "小美"]
 ===========================================
 我是老数组： (6) ["小明", "小弘", "小生", "小明", "小生", "小美"]
 我是新数组 (4) ["小明", "小弘", "小生", "小美"]

3.3 特点：

  • (1)返回一个新的数组
  • (2)支持三个参数，分别为item（当前每一项），index（索引值），arr（原数组）
  • (3)原数组的元素执行了回调函数之后返回值若为true，则会将这个元素放入返回的数组中
  • (4) filter() 不会对空数组进行检测
  • (5) filter() 无法停止遍历

四、some循环

4.1 用法：

array.some(function(currentValue,index,arr),thisValue)
// currentValue => 当前元素的值
// index => 当前元素的索引值
// arr当前元素属于的数组对象
// thisValue this指向，默认全局对象，可忽略

4.2 例子：

4.2.1 代码
// 查找是否有符合要求的数组元素
// 定义array数组
const array = ['1','5','3','6','9','7']

// some遍历数组
let newArray = array.some((item,index,arr)=>{
                console.log('我现在是谁',item)
                console.log('我现在排第几位',index)
                console.log('我是在操纵哪个数组',arr)
                console.log('===========================================')
                return item > 6
              })

// 对比新旧数组
console.log('我是老数组：',array)
console.log('我是新数组',newArray)
4.2.2 打印结果
 我现在是谁 1
 我现在排第几位 0
 我是在操纵哪个数组 (6)["1", "5", "3", "6", "9", "7"]
 ===========================================
 我现在是谁 5
 我现在排第几位 1
 我是在操纵哪个数组 (6)["1", "5", "3", "6", "9", "7"]
 ===========================================
 我现在是谁 3
 我现在排第几位 2
 我是在操纵哪个数组 (6)["1", "5", "3", "6", "9", "7"]
 ===========================================
 我现在是谁 6
 我现在排第几位 3
 我是在操纵哪个数组 (6)["1", "5", "3", "6", "9", "7"]
 ===========================================
 我现在是谁 9
 我现在排第几位 4
 我是在操纵哪个数组 (6)["1", "5", "3", "6", "9", "7"]
 ===========================================
 我是老数组： (6)["1", "5", "3", "6", "9", "7"]
 我是新数组 true

4.3 特点：

  • (1)some() 方法用于检测数组中的元素是否满足指定条件，返回布尔值
    • 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
    • 如果没有满足条件的元素，则返回false
  • (2)支持三个参数，分别为item（当前每一项），index（索引值），arr（原数组）
  • (3)some() 返回布尔值， 不会改变原始数组
  • (4)some() 不会对空数组进行检测
  • (5)some() 可通过return停止遍历

五、every循环

5.1 用法：

array.every(function(currentValue,index,arr), thisValue)
// currentValue => 当前元素的值
// index => 当前元素的索引值
// arr当前元素属于的数组对象
// thisValue this指向，默认全局对象，可忽略

5.2 例子：

5.2.1 代码
// 查询数组是否都符合要求
// 定义array数组
const array = ['3','5','1','6','9','7']

// some遍历数组
let newArray = array.every((item,index,arr)=>{
                console.log('我现在是谁',item)
                console.log('我现在排第几位',index)
                console.log('我是在操纵哪个数组',arr)
                console.log('===========================================')
                return item > 1
              })

// 对比新旧数组
console.log('我是老数组：',array)
console.log('我是新数组',newArray)
5.2.2 打印结果
 我现在是谁 3
 我现在排第几位 0
 我是在操纵哪个数组 (6)["3", "5", "1", "6", "9", "7"]
 ===========================================
 我现在是谁 5
 我现在排第几位 1
 我是在操纵哪个数组 (6)["3", "5", "1", "6", "9", "7"]
 ===========================================
 我现在是谁 1
 我现在排第几位 2
 我是在操纵哪个数组 (6)["3", "5", "1", "6", "9", "7"]
 ===========================================
 我是老数组： (6)["3", "5", "1", "6", "9", "7"]
 我是新数组 false

5.3 特点：

  • (1)every() 方法用于检测数组所有元素是否都符合指定条件，返回布尔值
    • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
    • 如果所有元素都满足条件，则返回 true
  • (2)支持三个参数，分别为item（当前每一项），index（索引值），arr（原数组）
  • (3)every() 返回布尔值， 不会改变原始数组
  • (4)every() 不会对空数组进行检测
  • (5)every() 可通过return停止遍历

六、reduce循环

6.1 用法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// total => 初始值，计算结束后返回值
// currentValue => 当前元素的值
// index => 当前元素的索引值
// arr当前元素属于的数组对象
// thisValue this指向，默认全局对象，可忽略

6.2 例子：

6.2.1 代码
// 累加值
// 定义array数组
const array = [3,5,1,6,9,7]

// some遍历数组
let newArray = array.reduce((total,item,index,arr)=>{
                console.log('当前累加值',total)
                console.log('我现在是谁',item)
                console.log('我现在排第几位',index)
                console.log('我是在操纵哪个数组',arr)
                console.log('===========================================')
                return total + item
              })

// 对比新旧数组
console.log('我是老数组：',array)
console.log('我是新数组',newArray)
6.2.2 打印结果
 当前累加值 3
 我现在是谁 5
 我现在排第几位 1
 我是在操纵哪个数组 (6) [3, 5, 1, 6, 9, 7]
 ===========================================
 当前累加值 8
 我现在是谁 1
 我现在排第几位 2
 我是在操纵哪个数组 (6) [3, 5, 1, 6, 9, 7]
 ===========================================
 当前累加值 9
 我现在是谁 6
 我现在排第几位 3
 我是在操纵哪个数组 (6) [3, 5, 1, 6, 9, 7]
 ===========================================
 当前累加值 15
 我现在是谁 9
 我现在排第几位 4
 我是在操纵哪个数组 (6) [3, 5, 1, 6, 9, 7]
 ===========================================
 当前累加值 24
 我现在是谁 7
 我现在排第几位 5
 我是在操纵哪个数组 (6) [3, 5, 1, 6, 9, 7]
 ===========================================
 我是老数组： (6) [3, 5, 1, 6, 9, 7]
 我是新数组 31

6.3 特点：

  • (1)reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
  • (2)支持四个参数，分别为total（累加值），item（当前每一项），index（索引值），arr（原数组）
  • (3)reduce() 返回最终计算值， 不会改变原始数组
  • (4)reduce() 无法停止当前的遍历
  • (5)reduce() 可以作为一个高阶函数，用于函数的 compose

七、forEach循环

7.1 用法：

array.forEach(function(currentValue, index, arr), thisValue)
// currentValue => 当前元素的值
// index => 当前元素的索引值
// arr当前元素属于的数组对象
// thisValue this指向，默认全局对象，可忽略

7.2 例子：

7.2.1 代码
// 更新数据
// 定义array数组
const array = ['小明','小弘','小生']

// map遍历数组
let newArray = array.forEach((item,index,arr)=>{
                console.log('我现在是谁',item)
                console.log('我现在排第几位',index)
                console.log('我是在操纵哪个数组',arr)
                console.log('===========================================')
                return item+index
              })

// 对比新旧数组
console.log('我是老数组：',array)
console.log('我是新数组',newArray)
7.2.2 打印结果
我现在是谁 小明
我现在排第几位 0
我是在操纵哪个数组 (3)["小明", "小弘", "小生"]
===========================================
我现在是谁 小弘
我现在排第几位 1
我是在操纵哪个数组 (3)["小明", "小弘", "小生"]
===========================================
我现在是谁 小生
我现在排第几位 2
我是在操纵哪个数组 (3)["小明", "小弘", "小生"]
===========================================
我是老数组： (3 ["小明", "小弘", "小生"]
我是新数组 undefined

7.3 特点：

  • (1)循环遍历数组中得每一项
  • (2)支持三个参数，分别为item（当前每一项），index（索引值），arr（原数组）
  • (3)forEach() 没有返回值
  • (4)forEach() 对于空数组是不会执行回调函数的
  • (5)forEach() 无法停止当前的遍历

八、总结

image.png

image.png

avatar
文章
阅读
粉丝