Javascript数组遍历方法

数组遍历方法

forEach

const itens = [1, 2, 3]
items.forEach(item => {
  console.log(item)
})

• forEach 没有返回值，循环无法停止

find

• 作用：遍历数组，找到符合条件的元素
• 注意：找到第1个满足条件的元素并停止遍历立即返回

const items = [
   { id: 1, title: '吃饭1' },
   { id: 2, title: '吃饭2' },
   { id: 3, title: '吃饭3' },
   { id: 4, title: '吃饭4' }
]

const ret = items.find((item, index) => {
  // 每遍历一次就调用你传递的这个函数 function (item, index) { return item.id === 2 }
  // 如果该函数返回 true，那么停止遍历，返回满足该条件的元素
  // 如果直到遍历结束都没有符合该条件的元素，则返回 undefined
  return item.id === 2
})
console.log(ret)

findIndex

• 找到第1个, 满足该条件的元素索引

const items = [1, 2, 3, 4]

console.log(items.findIndex(n => n % 2 === 0))

some

• 作用：判断数组中是否有指定条件的元素，返回一个布尔值

const todos = [
  { id: 1, title: '吃饭', completed: true },
  { id: 2, title: '睡觉', completed: true },
  { id: 3, title: '打豆豆', completed: false },
  { id: 4, title: '吃饭', completed: true }
]

console.log(todos.some(item => item.title === '打豆豆123'))

every

• 作用：和 some 正好相反，用于判断数组中所有元素是否满足指定条件

const todos = [
  { id: 1, title: '吃饭', completed: true },
  { id: 2, title: '睡觉', completed: true },
  { id: 3, title: '打豆豆', completed: true },
  { id: 4, title: '吃饭', completed: true }
]

console.log(todos.every(item => item.completed === true))

filter

• 作用：筛选数据，筛选出数组中满足条件的元素项，得到一个新的数组

const todos = [
  { id: 1, title: '吃饭', completed: true },
  { id: 2, title: '睡觉', completed: false },
  { id: 3, title: '打豆豆', completed: true },
  { id: 4, title: '吃饭', completed: false }
]

// filter 会在内部创建一个新的数组，然后遍历你的数组
// 然后把所有满足 item.completed === true 条件的元素放到这个新数组中
// 遍历结束，返回这个新的数组
console.log(todos.filter(item => item.completed === true))

map

• 作用：根据源数据映射出一个新的数组（个数不变，但是里面的元素的内容可以定制）
• 注意：map 函数映射的个数和你遍历的原数组的长度是一样的

const todos = [
  { id: 1, title: '吃饭', completed: true },
  { id: 2, title: '睡觉', completed: false },
  { id: 3, title: '打豆豆', completed: true },
  { id: 4, title: '吃饭', completed: false }
]

console.log(todos.map(item => item.id))
console.log(todos.map(item => item.id + 10))
// 如果加判断条件的话返回的数据数量也是不会改变的
console.log(todos.map(item => {
  if (item.id !== 2) {
    return {
      id: item.id,
      title: item.title
    }
  }
  // return undefined
}))

includes

• 注意：不能传函数指定条件
  • 必须给定一个数据值
  • 常用于简单数组类型判断

const todos = [
  { id: 1, title: '吃饭', completed: true },
  { id: 2, title: '睡觉', completed: false },
  { id: 3, title: '打豆豆', completed: true },
  { id: 4, title: '吃饭', completed: false }
]
console.log([1, 2, 3, 5].includes(2))

console.log([1, 2, 3, 5].includes(2))

console.log(todos.includes({ id: 1, title: '吃饭', completed: true }))

const item2 = todos[1]

console.log(todos.includes(item2))

reduce

• 作用：想让数组的元素累积起来求得一个最终结果的时候可以使用它,将其结果汇总为单个返回值
• 例如：数组元素求和

var nums = [1, 2, 3, 4, 5]

// 两个参数
// 第1个参数：遍历一次就调用一次
// 第2参数：用来指定初始值，相当于你在这里 var prev = 0
// 第1次：prev 0
// prev 是上一次的计算结果，第1次的值是你指定的初始值，之后都是上一次的结果
const ret = nums.reduce(function (prev, item) {
  console.log(prev, item)

  // 计算完毕以后，将本次结果作为下一次 prev 的值
  return prev + item
}, 10)

console.log('ret => ', ret)

console.log(nums.reduce((prev, curr) => prev + curr, 0))

const users = [
  { id: 1, name: '张三', age: 18 },
  { id: 1, name: '张三', age: 20 },
  { id: 1, name: '张三', age: 10 },
  { id: 1, name: '张三', age: 15 }
]

console.log(users.reduce((prev, curr) => prev + curr.age, 0) / users.length)