数组遍历详解

      const arr = [
        {
          name: 'tom',
          age: 18
        },
        {
          name: 'jack',
          age: 19
        },
        {
          name: 'rose',
          age: 20
        },
      ]

1. for循环遍历

最简单基础的循环遍历方法，也是使用最频繁的方法。

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

/*
{name: 'tom', age: 18}
{name: 'jack', age: 19}
{name: 'rose', age: 20}
*/

2. for...of遍历

// arr 遍历的数组
// item 遍历的数组的元素
for(let item of arr) {
    console.log(item)
}
/*
{name: 'tom', age: 18}
{name: 'jack', age: 19}
{name: 'rose', age: 20}
*/

3. forEach() 遍历

**forEach()**本质上等同于for循环，对每一项执行function函数。forEach改变原数组。

第一个参数是数组里的当前元素，第二个参数是数组当前元素的索引。

arr.forEach((item,index) => {
    console.log(index,item)
    item.age++
})
console.log(arr)
/*
0 {name: 'tom', age: 18}
1 {name: 'jack', age: 19}
2 {name: 'rose', age: 20}
[
	{name: 'tom', age: 19},
	{name: 'jack', age: 20},
	{name: 'rose', age: 21},
]
*/

4. map()

**map()**方法返回一个新数组，新数组中的元素为原始数组元素调用函数处理后的值。

map()方法按照原始数组顺序一次处理元素。

不会改变原始数组，会返回一个新的数组。

let newArr = arr.map((item,index) => {
    return item.age++
})
console.log(arr)
console.log(newArr)
/*
[
	{name: 'tom', age: 18},
	{name: 'jack', age: 19},
	{name: 'rose', age: 20},
]

[18, 19, 20]
*/

5. filter()

方法创建一个新的数组，新数组的元素是通过检查指定数组中符合条件的所有元素。

不会改变原始数组。

      let tempArr = arr.filter(item => {
        if (item.age == 19) {
          return item
        }
      })
      console.log(arr);
      console.log(tempArr);
/*
[
	{name: 'tom', age: 18},
	{name: 'jack', age: 29},
	{name: 'rose', age: 20},
]
[
	{name: 'jack', age: 19},
]
*/

6. find()

遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回undefined。

let newArr = arr.find(item=>{
    return item.age == 19
})
let tempArr = arr.find(item=>{
    return item.name == 'wang'
})
console.log(arr)
console.log(newArr)
console.log(tempArr)
/*
[
	{name: 'tom', age: 18},
	{name: 'jack', age: 29},
	{name: 'rose', age: 20},
]

{name: 'jack', age: 19}

undefined
*/

7. findIndex()

遍历数组，返回符合条件的第一个元素的索引，如果没有符合条件的元素则返回 -1。

let newArr = arr.findIndex(item=>{
    return item.age == 20
})
let tempArr = arr.findIndex(item=>{
    return item.name == 'wang'
})
console.log(arr)
console.log(newArr)
console.log(tempArr)

/*
[
	{name: 'tom', age: 18},
	{name: 'jack', age: 29},
	{name: 'rose', age: 20},
]
2
-1
*/

8. some()

遍历数组，只要有一个以上的元素满足条件就返回true，否则返回false，退出循环。

let newArr = arr.some(item=>{
    return item.age == 20
})
let tempArr = arr.some(item=>{
    return item.name == 'wang'
})
console.log(arr)
console.log(newArr)
console.log(tempArr)

/*
[
	{name: 'tom', age: 18},
	{name: 'jack', age: 29},
	{name: 'rose', age: 20},
]
true
false
*/

9. every()

遍历数组，每一个元素都满足条件，则返回true，否则返回false。

const arr = [
        {
          name: 'tom',
          age: 18,
          height: 180
        },
        {
          name: 'jack',
          age: 19,
          height: 180
        },
        {
          name: 'rose',
          age: 20,
          height: 180
        },
      ]
let temp = arr.every(item=>{
    return item.age == 18
})
let tempArr = arr.every(item=>{
    return item.height == 180
})

console.log(temp)
console.log(tempArr)

/*
false
true
*/

10.reduce()

reduce() 方法对数组中的每个元素按顺序执行，每次运行会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

const list = [1, 2, 3, 4, 5]
let temp = reduce((total,item)=>{
    total + item
})
console.log(temp) // 15

11. reduceRight()

reduceRight() 方法的功能和 reduce() 功能是相同的，不同的是reduceRight() 是从数组的末尾向前将数组中的数组项做累加。

const list = [1,2,3,4,5]
let temp = list.reduceRight((total,item) => {
    total + item
})
console.log(temp)  // 15

12. fill()

  const list = [
    {
      name: 'tom',
      age: 18,
      height: 180
    },
    {
      name: 'jack',
      age: 19,
      height: 180
    },
    {
      name: 'rose',
      age: 20,
      height: 180
    },
  ]
  let temp = list.fill({
    color: 'red'
  })
  console.log(temp);
/*
[
{color: 'red'},
{color: 'red'},
{color: 'red'},
]
*/

016 数组遍历详解