JS遍历数组的8种常见方法

1. forEach

对数组的每个元素执行一次给定的函数
返回值是undefined
不会改变原数组

arr.forEach(item => {
	item ++
	console.log(item)
})

2. filter

过滤，筛选出满足函数条件的数组元素，浅拷贝（新数组的元素被改变时才会改变原数组的元素）。
返回值是一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
不会改变原数组

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);

3. some

数组内是否存在满足条件的元素
返回值是布尔值，true/false
不会改变原数组

4. every

数组内是否是所有元素都满足条件
返回值是布尔值，true/false
不会改变原数组

const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(item=> {
	return item > 30
}));
// expected output: false

5. map

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
map() 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

• forEach和map的区别：
  1. forEach()方法没有返回值，而map()方法有返回值，为一个新数组。
  2. …

6. reduce

arr.reduce(function(prev, currentValue, currentIndex, arr), initValue)

• reduce方法接收一个函数作为累加器
• prev 上次调用函数的返回值
• cur 当前元素
• curIndex 当前元素索引
• arr 调用的数组
• initValue 函数迭代的初始值

关于initValue

如果没有提供initialValue，reduce 会从index = 1的地方开始执行 callback 方法，跳过第一个索引0，索引0的值作为prev。
如果提供initiValue，则从索引0开始即index = 0，prev为initValue。

求和用法

let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) {
  return previousValue + currentValue
}, 0)
// sum is 6

计算数组中每个元素出现的次数

const names = ['A', 'D', 'T', 'B', 'A'];
const nameNum = names.reduce((pre,cur) => {
 // ？ str in str ？？？？？？？？？？？？？？？？？？？？？/
  if(cur in pre) {
    pre[cur]++
  } else {
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{A: 2, B: 1, T: 1, D: 1}

数组去重

const arr = [1,2,2,4,4,1]
const newArr = arr.reduce((pre,cur) => {
 // arr.includes(num)
 // 用于判断一个数组是否包含一个指定得值
    if(!pre.includes(cur)) {
    // arr.concat(arr2)
    // 连接两个或多个数组，此方法不会更改现有数组，而是返回一个新数组
    // 不包含，则连接，形成新数组
      return pre.concat(cur)
    } else {
      return pre
    }
},[])
console.log(newArr);// [1, 2, 4]

将二维数组转化为一维

const arr = [[0, 1], [2, 3], [4, 5]]
const newArr = arr.reduce((pre,cur) => {
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

对象的属性求和

const result = [
    {
        subject: '语文',
        score: 90
    },
    {
        subject: '数学',
        score: 90
    },
    {
        subject: '英语',
        score: 100
    }
];

const sum = result.reduce((prev, cur) => {
    return cur.score + prev;
}, 0);
console.log(sum) //280

reduce参考链接

7. find

返回数组中满足条件的第一个元素的值，若没有满足测试函数的元素，则返回undefined

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
let res = arr1.find((value, index, arr) => {
  return value > 14
})
// undefined

8. findIndex

找到满足条件的第一个元素，返回其下标，如果未找到，则返回-1。

var res1 = arr1.findIndex((value, index, arr) => {
  return value > 3
})

var res2 = arr1.findIndex((value, index, arr) => {
  return value > 14
})
// 4
// -1