js中数组操作map()、filter()、some()、every()、find()、reduce()、for()、forEach()

1.map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新数组，原数组不变。

let arr = [{ id: 1, name: 'vs' }, { id: 2, name: 'wb' }, { id: 3, name: 'ls' }]
let newArr = arr.map((item, index) => {
  console.log(item); // item是数组里的每一项
  console.log(index); // index是数组的下标
})

运行结果：

---

1.1给数组里的每一项添加值

方法1：

let arr = [{ id: 1, name: 'vs' }, { id: 2, name: 'wb' }, { id: 3, name: 'ls' }]
let newArr = arr.map((item, index) => {
  return {
    id: item.id,
    name: item.name,
    // 给数组里每一项添加age
    age: 20
  }
})
console.log(newArr);

运行结果：

---

方法2：

let arr = [{ id: 1, name: 'vs' }, { id: 2, name: 'wb' }, { id: 3, name: 'ls' }]
let newArr = []
arr.map((item, index) => {
  newArr.push(Object.assign(item, {
    age: 20
  }))
})
console.log(newArr);

运行结果：

---

2.filter函数:过滤通过条件的元素组成一个新数组，原数组不变。

let arr = [{ id: 1, name: 'vs' }, { id: 2, name: 'wb' }, { id: 3, name: 'ls' }]
let newArr = arr.filter((item, index) => {
  // 满足 item.id > 1 的项都可以返回
  return item.id > 1
})
console.log(newArr);

//简写
let arr = [{ id: 1, name: 'vs' }, { id: 2, name: 'wb' }, { id: 3, name: 'ls' }]
let newArr = arr.filter(item => item.id > 1)
console.log(newArr);

运行结果：

---

3.some函数，遍历数组中是否有符合条件的函数，返回布尔值（有一个满足就返回true，无就是false）。

let arr1 = [{ id: 1, name: 'vs', check: 1 }, { id: 2, name: 'wb', check: 1 }, { id: 3, name: 'ls', check: 1 }]
let arr2 = [{ id: 1, name: 'vs', check: 1 }, { id: 2, name: 'wb', check: 1 }, { id: 3, name: 'ls', check: 0 }]
let arr3 = [{ id: 1, name: 'vs', check: 1 }, { id: 2, name: 'wb', check: 0 }, { id: 3, name: 'ls', check: 0 }]
let arr4 = [{ id: 1, name: 'vs', check: 0 }, { id: 2, name: 'wb', check: 0 }, { id: 3, name: 'ls', check: 0 }]
// check 有一个是 1 就返回 true，全 0 返回 false
let arrSome1 = arr1.some((item, index) => {
  return item.check == 1
})
// 简写
let arrSome2 = arr2.some(item => item.check == 1)
let arrSome3 = arr3.some(item => item.check == 1)
let arrSome4 = arr4.some(item => item.check == 1)
console.log(arrSome1); // 返回 true
console.log(arrSome2); // 返回 true
console.log(arrSome3); // 返回 true
console.log(arrSome4); // 返回 false

运行结果：

---

4.every函数，遍历数组是否每个元素都符合条件，返回布尔值（全部都要满足条件才得返回true,否则返回false）。

let arr1 = [{ id: 1, name: 'vs', check: 1 }, { id: 2, name: 'wb', check: 1 }, { id: 3, name: 'ls', check: 1 }]
let arr2 = [{ id: 1, name: 'vs', check: 1 }, { id: 2, name: 'wb', check: 1 }, { id: 3, name: 'ls', check: 0 }]
let arr3 = [{ id: 1, name: 'vs', check: 1 }, { id: 2, name: 'wb', check: 0 }, { id: 3, name: 'ls', check: 0 }]
let arr4 = [{ id: 1, name: 'vs', check: 0 }, { id: 2, name: 'wb', check: 0 }, { id: 3, name: 'ls', check: 0 }]
// check 要全是 1 才能返回 true，否则返回 false
let arrEvery1 = arr1.every((item, index) => {
  return item.check == 1
})
// 简写
let arrEvery2 = arr2.every(item => item.check == 1)
let arrEvery3 = arr3.every(item => item.check == 1)
let arrEvery4 = arr4.every(item => item.check == 1)
console.log(arrEvery1); // 返回 true
console.log(arrEvery2); // 返回 false
console.log(arrEvery3); // 返回 false
console.log(arrEvery4); // 返回 false

运行结果：

---

5.find函数，用于查找数组中是否有满足条件的元素，当找到第一个满足条件的元素时，则直接返回该元素。如果都不满足条件，则返回 undefined。原数组不变。

let arr1 = [{ id: 1, name: 'vs' }, { id: 2, name: 'wb' }, { id: 2, name: 'wbss' }, { id: 3, name: 'ls' }]
let arrFind1 = arr1.find(item => item.id == 2)
let arrFind2 = arr1.find(item => item.id == 4)
console.log(arrFind1); // 返回的是 { id: 2, name: 'wb' }，而不是 { id: 2, name: 'wbss' } ----- id=2只返回第一个
console.log(arrFind2); // 返回 undefined ----没有满足条件

运行结果：

---

6.reduce函数，接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，原数组不变。

let arr = [1, 2, 3, 4]
// total:初始值,或者计算结束后的返回值，item：当前值，index：当前索引，arr:原数组，一般写前面两个
const result = arr.reduce((total, item, index, arr) => {
  return total + item
}, 0)
// 这里的0，是传递给函数的初始值
console.log(result); // 10

运行结果：

---

6.1求一个数组里面的最大值

let arr = [1, 2, 3, 4]
let max = arr.reduce((total, item) => {
  return Math.max(total, item)
})
console.log(max);

运行结果：

---

7.数组遍历方法（for、forEach）

7.1第一种

let arr = [1, 2, 3, 4]
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

运行结果：

---

7.2第二种

let arr = [1, 2, 3, 4]
for (let i in arr) {
  console.log(arr[i]);
}

运行结果：

---

7.3第三种

// forEach()方法接收一个回调函数，
// 参数有三个，分别是item:每一项、index:当前项的索引、以及arr:原数组。
// forEach()函数没有返回值。
let arr = [1, 2, 3, 4]
arr.forEach((item, index) => {
  console.log(item, index);
})

运行结果：