ES5新增方法遍历数组方法 forEach()、map()、filter()、some()、every()

迭代(遍历方法):forEach()、map()、filter()、some()、every()

1.forEach()

    array.forEach(function(Value,index,arr))

var arr = [1, 2, 3]
var sum = 0
arr.forEach(function (value, index, array) {
  console.log('每个数组元素' + value);
  console.log('每个数组元素索引号' + index);
  console.log('数组本身' + array);
  sum += value
})
console.log(sum);


每个数组元素1
demo.html:21 每个数组元素索引号0
demo.html:22 数组本身1,2,3
demo.html:20 每个数组元素2
demo.html:21 每个数组元素索引号1
demo.html:22 数组本身1,2,3
demo.html:20 每个数组元素3
demo.html:21 每个数组元素索引号2
demo.html:22 数组本身1,2,3
demo.html:25 6

2.fileter()


array.filter(function(Value,index,arr))
filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组

返回数组

var arr = [12, 66, 4, 77, 88]
var newArr = arr.filter(function (value, index, array) {
  // return value >= 20
  return value % 2 === 0
})
console.log(newArr);


结果:
(4) [12, 66, 4, 88]

3.some()

array.some(function(Value,index,arr))

返回布尔值

找到第一个就自动终止,适合查找唯一值,如id,index等

例1:

    var arr = [10, 30, 4]
    var flag = arr.some(function (value, index) {
      // return value >= 20
      return value < 3
    })
    console.log(flag);

    var arr1 = ['red', 'blue', 'pink']
    var flag1 = arr1.some(function (value, index) {
      return value == 'pink'
    })
    console.log(flag1);

结果:

false
true

例2:

var data = [{
      id: 1,
      pname: '小米',
      price: 3999
    }, {
      id: 2,
      pname: 'oppo',
      price: 999
    }, {
      id: 3,
      pname: '荣耀',
      price: 1299
    }, {
      id: 4,
      pname: '华为',
      price: 1999
    },];

var arr = []
data.some(function (value) {
    //product.value为input框输入的值
    if (value.pname === product.value) {
        //console.log(value);
        arr.push(value)
        //特性:
        //return true自动退出
        //return false则继续查找
        return true
    }
})

结果:

arr=[ input框的值data中匹配的唯一对象 ]


 filter和some的异同:

1、filter()也是查找满足条件的元素,返回的是一个数组,而且是把所有满足条件的元素返回回来

 2、some()也是查找满足条件的元素是否存在,返回的是一个布尔值,如果查找到满足条件的第一个条件的元素就终止循环。

4.every()

需求:判断数组中,水果是否被

const arr = [
    {id:1,name:'西瓜',state:true},
    {id:2,name:'榴莲',state:false},
    {id:3,name:'草莓',state:true},
]

const result = arr.every(item=>item.state)
console.log(result)

结果:

false

5.reduce()

const arr = [
    {id : 1, name: '西瓜', state : true, price : 10, count : 1},
    {id : 2, name: '榴莲', state : false, price : 80, count : 2},
    {id : 3, name: '草莓', state : true, price : 20, count : 3},
]

//需求把已勾选的水果,总价累加起来

//低级程序员
let sum = 0
arr.filter(item=>item.state).forEach(item=>{
    sum + =item.price * item.count
})

console.log(sum)



//高阶程序员
const result = arr.filter(item=>item.state).reduce((sum,item)=>{
    sum + = item.price * item.count
},0)

console.log(result)

结果:

70

70


版权声明:本文为weixin_44253584原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。