迭代函数

@Array

以下为数组的实例方法

返回：没有

对数组中的每一项执行给定函数。本质上与使用 for 循环迭代数组一样

原数组：不会被修改；仅仅使用数据

无法中断

function foreach(arr, fn) {
  for (let i = 0; i < arr.length; i++) {
    fn(arr[i]);
  }
}

foreach(arr, (item) => {
  console.log(item);
})

filter()

对数组中的每一项执行给定函数，返回执行结果为 true 的项组成的数组 - calls the predicate function one time for each element in the array

返回：符合条件的新数组

原数组：不会被修改

function filter(arr, fn) {
  let res = []
  for (let i = 0; i < arr.length; i++) {
    if (fn(arr[i])) {
      res.push(arr[i])
    }
  }
  return res;
}

[] 模糊查询

根据名字是否包含指定的关键字过滤结果

goods.filter(item => item.name.includes(keyword))

[] 获取偶数

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
let res = arr.filter(item => item % 2 === 0)

[] 删除指定特征如 id 的数据项 - 购物车、歌单

let data = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]
let res = data.filter(item => item.id != 11)

函数封装

function delItem(dataItem) {
  data = data.filter(item => item.id != dataItem.id)
}

map()

对数组中的每一项执行给定函数，返回每次函数调用的结果组成的数组

适合创建包含的项与另一个数组一一对应的数组 - 映射

返回：新数组

原数组：不会被修改

[] 示例

let data = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]

提取特征数据 - 从API请求的数据中获取数据项的 name 展示；也可以在请求时指定需要的数据，具体情况看API的支持

提取1个 - 返回每个数据项的 name 组成的数组

let res = data.map(item => item.name)

提取多个 - 返回每个数据项的 name、desc 组成的数组

let res = data.map(item => ({name: item.name, desc:item.desc}))

修改格式 - 修改每个数据项的 name 为大写

let res = data.map(item => ({ id: item.id, name: item.name.toUpperCase() }))

添加属性 - 为每个数据项增加一个数量，初始化为1；如添加到购物车

let res = data.map(item => ({ ...item, num: 1 }))

添加属性 -简单数组生成索引数组

let data = ['gl', 'cq', 'sz', 'sh', 'gz']
let res = data.map((item, ind) => ({ id: ind, location: item }))

[] 创建 DOM

使用 join() 将数组转化为字符串使用

fetch('/utils/data/message.json')
.then(res => res.json())
.then(res => {
  console.log(res);
  let json = res.cont.map(item => `${item.msg}`).join('')
  ul.innerHTML = json
})

every()

对数组中的每一项执行给定函数；如果该函数对每一项都返回 true，则返回 true

返回：布尔值

原数组：不会被修改

函数实现原理如下

const every = (arr, fn) => {
  let res = true
  for (let v of arr) {
    res = fn(v);
    if (!res) {
      break
    }
  }
  return res;
}

res = every(arr, v => v > 10);
console.log(res);

[] 全选业务

全选为真，所有待选项都选中

全选为假，所有待选项都不选中

如果有一个待选项没有选中，则全选为假 - 每一个待选项都为真，全选才为真

checkAll = options.every(item => item.check)

some()

对数组中的每一项执行给定函数；如果该函数有一项返回 true，则返回 true

返回类型：布尔值

原数组：不会被修改

函数实现原理如下

const some = (arr, fn) => {
  let res = false
  for (let v of arr) {
    res = fn(v)
    if (res) {
      break
    }
  }
  return res;
}
res = some(arr, v => v > 8);
console.log(res);

[] 应用：查找数据列表中是否有符合条件的数据项，避免重名

let arr = [0, 1, 2, 3, 4, 5]
let flag = arr.some(item => item > 5)
console.log(flag);  // false

let obj = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]
let flag = obj.some(item => item.name == 'sz')
console.log(flag); // true

find()

查找符合条件的第一个数据项

返回：查找到的数据，无则返回 undefined

原数组：不会被修改

let arr = [0, 1, 2, 3, 4, 5]
let res = arr.find(item => item > 3)
console.log(res); // 4

[] 根据 id 获取/请求商品

let obj = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]
let res = obj.find(item => item.id === 11)
console.log(res); // { id: 11, name: 'cq' }

[] 添加到购物车

根据 id 查找购物车，如果有，则数量 +1；如果没有，则新增一个数量值对，为 1

const existingItem = cart.find(item => item.id === product.id)
if (existingItem) {
  existingItem.quantity++
} else {
  cart.push({ ...product, quantity: 1 })
}