数组中的方法

最新推荐文章于 2024-07-25 09:24:40 发布

阿里今天不上班

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量62

点赞数

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_52905182/article/details/127726020

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、forEach 方法

forEach 方法找某个元素，会把数组内从头到尾循环一遍，无法在中停止，浪费循环性能

<body>

</body>
<script>
  const arr = ['小红','苏大强','张三']
  console.log('ok')
  arr.forEach((item,index)=>{
    if (item === '苏大强'){
      console.log(index)
      return
    }
  })
</script>

二、some 方法

some 找到某个元素之后，可以通过return true 固定语法，终止循环

<body>

</body>
<script>
const arr = ['小红','苏大强','张三']
 arr.some((item,index)=>{
    console.log('ok')
    if (item === '苏大强'){
      console.log(index)
      return true
    }
  })
</script>

三、every方法

every 判断每一项是否满足需求

// 需求：判断数组中，水果是否被全选 true /false
  const arr2 = [ 
      {id:1,name:'西瓜',state:true},
      {id:2,name:'草莓',state:false},
      {id:3,name:'榴莲',state:true},
  ]
  const result = arr2.every(item =>item.state === true)
  console.log(result)

四、reduce方法

reduce 累加器

// 需求：把购物车数组中，已勾选的水果，总价加起来
 const arr2 = [ 
      {id:1,name:'西瓜',state:true,price:10,count:1},
      {id:2,name:'草莓',state:false,price:20,count:2},
      {id:3,name:'榴莲',state:true,price:80,count:5},
  ]
  //let amt = 0  // 总价
  //arr2.filter(item =>item.state).forEach(item =>{
	//amt += item.price * item.count
//})
 // console.log(amt)
 
 arr2.filter(item =>item.state).reduce((amt,item) =>{
	return amt += item.price * item.count
},0)