ES6形式常用的数组遍历函数

文章目录

• ​​0. 给定一个数组​​
• ​​1. find()：查找成员对象​​
• ​​2. findIndex()：查找成员下标​​
• ​​3. filter()：过滤数组​​
• ​​4. forEach()：迭代数组​​
• ​​5. some()和every()：量词遍历​​
• ​​6. map()：变换​​
• ​​7. reduce()：规约​​

0. 给定一个数组

const arr = [{
  name: '袁绍',
    age: 33,
    title: '本初',
    index: 2
  },
  {
    name: '曹操',
    age: 40,
    title: '孟德',
    index: 1
  },
  {
    name: '刘备',
    age: 35,
    title: '玄德',
    index: 6
  },
  {
    name: '马超',
    age: 30,
    title: '孟起',
    index: 7
  },
  {
    name: '张飞',
    age: 28,
    title: '翼德',
    index: 3
  },
  {
    name: '关羽',
    age: 27,
    title: '云长',
    index: 4
  },
  {
    name: '赵云',
    age: 22,
    title: '子龙',
    index: 4
  },
]

1. find()：查找成员对象

用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。find()返回的结果是一个对象。

const obj1 = arr.find(item => item.age < 30)
const obj2 = arr.find(item => item.index == 4)
const obj3 = arr.find(item => item.title !== '玄德')
const obj4 = arr.find(item => item.name.indexOf('关', 0) !== -1)

console.log(obj1) //{"name": "张飞","age": 28,"title": "翼德","index": 3}
console.log(obj2) //{"name": "关羽","age": 27,"title": "云长","index": 4}
console.log(obj3) //{"name": "袁绍","age": 33,"title": "本初","index": 2}
console.log(obj4) //{"name": "关羽","age": 27,"title": "云长","index": 4}

字符串查找可参考​​这里​​

2. findIndex()：查找成员下标

返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。findIndex()返回的结果是一个整型的值。

const index1 = arr.findIndex(item => item.age < 30)
const index2 = arr.findIndex(item => item.index == 4)
const index3 = arr.findIndex(item => item.title !== '玄德')
const index4 = arr.findIndex(item => item.name.indexOf('关', 0) !== -1)

console.log(index1) //4
console.log(index2) //5
console.log(index3) //0
console.log(index4) //5

3. filter()：过滤数组

使用指定的回调函数测试所有数组元素，并创建一个包含所有通过测试的元素构成的新数组。filter()不改变原数组内容，返回的结果是一个新的数组。

const arr1 = arr.filter(item => item.age < 30)
const arr2 = arr.filter(item => item.index == 4)
const arr3 = arr.filter(item => item.title !== '玄德')
const arr4 = arr.filter(item => item.name.indexOf('关', 0) !== -1)

console.log(arr1)
console.log(arr2)
console.log(arr3)
console.log(arr4)

返回值

注意：上边所述的函数都是有返回值的。因此，箭头函数体部分都是一个可以得到布尔值的表达式，而不是一个语句块{…}。当然也可以显式return一个具有布尔值的表达式。

4. forEach()：迭代数组

遍历数组所有元素，利用回调函数对数组的每一个元素进行操作。不支持break或continue关键字。特别地，return只用于决定是否结束当前循环（不是整个循环），类似continue。forEach()仅是一个遍历操作，没有返回值——可理解为返回void。forEach()不会修改原来的数组。

let newArr = []
arr.forEach(item => {
  if (item.age < 30) {
    newArr.push(item.name)
  }
})

newArr.forEach(item => {
  console.log(item)
})
/* 输出：
张飞
关羽
赵云
*/

既然是操作，箭头函数体部分当然要使用{…}语句块形式。

let nb
arr.forEach(item => {
  if (item.index === 4) { // 4可有两个呕！
    nb = item.name
  }
})

console.log(nb) // 赵云

//return到底有啥用？
let nb
arr.forEach(item => {
  if (item.index === 4) {
    nb = item.name
    return
  }
})

console.log(nb) // 还是输出：赵云

//再看
let nb
arr.forEach(item => {
  if (item.index === 4) {
    nb = item.name
    return // 相当于continue
    console.log(nb) //不被输出
  }
})

特殊方法修改原数组内容

let test = arr.forEach((item, index,) => {
  input[index] = item.age + 10
})
console.log(test) // 没有返回值
console.log(arr) // 原数组被改了

结果

5. some()和every()：量词遍历

两个函数都遍历数组中的所有元素。两个函数都返回布尔值。

• some()
  存在量词，数组中只要存在（至少一个）满足条件的元素就返回true，否则返回false。
• every()
  全称量词，数组中的元素必须都满足条件才返回true，否则返回false。

console.log(
  arr.some(item => item.age > 39)
) // true

console.log(
  arr.every(item => item.age < 30)
) // false

6. map()：变换

依次处理数组中的每一个元素。每一个元素均被map()定义的回调函数进行变换，将变换后的元素再收集起来，最终返回一个新的数组。
map()不会对空数组进行处理，不会改变原始数组。

const newArr = arr.map(item => item.name)
console.log(newArr) //["袁绍","曹操","刘备","马超","张飞","关羽","赵云"]

const newArr = arr.map(item => item.age > 30)
console.log(newArr) //[true,true,true,false,false,false,false]

const newArr = arr.map(item => item.age > 30? 'A':'B')
console.log(newArr) //["A","A","A","B","B","B","B"]

const newArr = arr.map(item => {
    if (item.index < 4) {
        return item
    }
})

console.log(newArr)
/** 输出：
[
    {
        "name": "袁绍",
        "age": 33,
        "title": "本初",
        "index": 2
    },
    {
        "name": "曹操",
        "age": 40,
        "title": "孟德",
        "index": 1
    },
    null,
    null,
    {
        "name": "张飞",
        "age": 28,
        "title": "翼德",
        "index": 3
    },
    null,
    null
]
*/

const newArr = arr.map(item => item.age + 10)
console.log(newArr) // [43,50,45,40,38,37,32]

数组成员是对象的变换

const newArr = arr.map(item => {
  let {name, age, title} = item
  let elem = {
    name,
    age: age+10,
    alias: title
  }
  return elem
})

console.log(newArr)

结果

7. reduce()：规约

这里“规约”类似于SQL中的聚合函数。即把一个数组表达的集合聚合为一个值——多个值变一个值。该函数最终返回一个单值。

// preVal：前一次调用reduce()的返回值；currVal：当前遍历到的数组元素
const totle = arr.reduce((preVal,) => {
  return preVal + currVal.age
}, 0) // 0是初始值

console.log(totle) //215