数组循环遍历高级方法

数组各种遍历方法补充

• forEach

  const items = [1, 3, 4, 5]
  items.forEach((item, index, arr) => {
    console.log(item) // 注意forEach没有返回值
  })
  

  • 注意: forEach没有返回值, 循环无法停止

• find

  const items = [
    { id: 1, title: 'chifan1' },
    { id: 2, title: 'chifan1' }
  ]
  // 遍历数组找到符合条件的元素
  items.find((item, index) => {
    return item.id === 2 //如果该函数返回true, 返回满足条件的元素.
  })
  

  • 注意:
    • find 有返回值, 返回的是一个数组
    • 如果该函数返回true, 返回满足条件的元素.
    • 找到第一个满足条件的, 理解停止遍历返回

• findIndex

  • 和find方法类似, 只不过返回的是元素的索引

• some

  const todos = [
    { id: 1, title: 'chifan', completed: true },
    { id: 2, title: 'chifan', completed: false }
  ]
  // 返回的是一个布尔值, 用于查看数组中是否有指定元素, 找到第一个就停止, 不会再执行
  todos.some(item => item.id === 2) // 判断里面是否有 item.id 等于2的, 有返回true
  

• every

  const todos = [
    { id: 1, title: 'chifan', completed: true },
    { id: 2, title: 'chifan', completed: false }
  ]
  // 返回的是一个布尔值, 用于查看数组中是否所有的元素都满足条件
  todos.every(item => item.id === 2) // 判断里面是否有所有item.id 等于2的, 是返回true
  

• filter

  const todos = [
    { id: 1, title: 'chifan', completed: true },
    { id: 2, title: 'chifan', completed: false }
  ]
  // 筛选出数组中满足条件的, 返回一个新的数组
  todos.filter((item, index) => {
    return item.completed === true // 返回一个满足item.completed为true的数组
  })
  

• map

const todos = [
  { id: 1, title: 'chifan', completed: true },
  { id: 2, title: 'chifan', completed: false }
]
// 根据原数据映射出一个新的数组
console.log(todos.map(item => item.id)) // 返回一个数组, 里面的项是之前item的id
console.log(todos.map(item => {
  return {
  	id: item.id,
    title: item.title
  }	
})) // 返回一个数组, 里面的是对象, 对象里面是原来的 id 和 title