Javascript – 数组应用

简介

本篇文章主要讲述数组的几个处理方法。分别为

some

every

reduce

some

假设有若干个成员的数组，需要判断某个成员在整个数组中的索引，我们可以使用 forEach 来枚举每一个成员，并判断该成员是否是我们想要找到的成员，并输出索引。

let arr = ['小明', '小红', '张三', '李四'];

arr.forEach((item,index) => {
  if (item === '张三')
  {
    console.log(index);
  }
})

但是这里有一个缺陷，就是 forEach 的循环一旦运行是不能中断的，意味着每一次判断都必须把数组所有成员都枚举完，而我们的需求是当枚举到我们需要的成员索引后，应当马上停止枚举，可以使用 some 方法。

let arr = ['小明', '小红', '张三', '李四'];

arr.some((item,index) => {
  if (item === '张三')
  {
    console.log(index);
    return true;
  }
})

every

every 的作用是判断数组中某个属性是否全为 true ,如果是则返回 true,否则返回 false.这个功能一般多用在类似购物车，或列表上的 "全选" 按钮提示上。

let arr = [
  {name:'小明', state:true},
  {name:'小红', state:true},
  {name:'小白', state:true},
  {name:'小黑', state:true}
];

const state = arr.every(item=>item.state);

若成员中全为 true ,则 state 返回 true, 否则返回 false

reduce

reduce 的作用是进行数组内成员数据的累计统计。我们可以使用传统的 forEach 方式进行累计

let arr = [
  {id:1, name:'小明', state:true, price:10, count:2},
  {id:2, name:'小红', state:true, price:20, count:3},
  {id:3, name:'小白', state:false, price:30, count:4},
  {id:4, name:'小黑', state:true, price:40, count:5}
];

 let amt = 0
// 先把数组中 state 为 false 的成员进行过滤掉，现在返回数组id为1,2,4 三个成员
 const filter = arr.filter(item => item.state)
// 再把过滤出来的成员让它们每一项的数目相加
 filter.forEach(item => {
   amt += item.price * item.count
 })
// 最后得出总价格
console.log(amt) 

但是我们可以使用 reduce 的方式累计数组中的总计。

let arr = [
  {id:1, name:'小明', state:true, price:10, count:2},
  {id:2, name:'小红', state:true, price:20, count:3},
  {id:3, name:'小白', state:false, price:30, count:4},
  {id:4, name:'小黑', state:true, price:40, count:5}
];

 let amt = 0
// 先把数组中 state 为 false 的成员进行过滤掉，现在返回数组id为1,2,4 三个成员
 const filter = arr.filter(item => item.state)
// reduce( (累计的变量,当前循环项)=>{}, 初始数值 )
 filter.reduce( (amt,item)=>{
   return amt += item.price * item.count
 }, 0 )
// 最后得出总价格
console.log(amt)