js 中 filter 数组中过滤对象

https://www.cnblogs.com/Qooo/p/14097176.html

filter 过滤返回新的数组

find找到一个符合的就返回它

some有符合的就返回true，不会继续执行

every有不符合的就返回false，不继续执行，否则遍历完返回true

1、filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

原数组不变
不会对空数组进行检测

let arr1 = [1,2,3,4]
let arr2 = arr1.filter(item=>item===1)
console.log(arr1, 'arr1')  // [1,2,3,4] arr1
console.log(arr2, 'arr2') // [1] arr2
      
let arr3 = [{
    id:1,
    name:'aa',
    desc: 'aaaa'
 },{
    id:2,
    name:'bb'
  },{
     id:3,
     name: 'aa'
 }]
let arr4 = arr3.filter(item=>item.name === 'aa')
console.log(arr4, 'arr4') // [{id:1,name:'aa', desc:'aaaa'},{id:3,name:'aa'}] arr4

2、find() 对于空数组，函数是不会执行的。

不会改变原数组
返回符合测试条件的第一个数组元素值

找到就返回不会继续执行

let arr5 = [1,2,1,3,4,5]
let arr6 = arr5.find(item=>item===1)
console.log(arr6, 'arr6')  // 1 arr6

let arr7 = arr3.find(item=>item.name === 'aa')
console.log(arr7, 'arr7') // {id:1,name:'aa',desc:'aaaa'} arr7

3、some 用于检测数组中的元素是否满足指定条件
会依次执行数组的每个元素-如果有一个元素满足条件(即只要有条件满足即可相当于或)，则表达式返回true , 剩余的元素不会再执行检测，如果没有满足条件的元素，则返回false

let someArr1 = [1,2,3,4]
      let someArr2 = someArr1.some(item=>item === 1)
      console.log(someArr2, 'someArr1') // true  someArr1
      
      let someArr4 = [{
          id:1,
          name:'bb'
      },{
          id:4,
          name:'cc'
      },{
          id:1,
          name:'dd'
      }]
      
      let someArr3 = someArr4.find(info=>{
          return arr3.some(item=>item.id === info.id)
      })
      console.log(someArr3) // {id:1,name:'bb'}

4、every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）
every() 方法使用指定函数检测数组中的所有元素-如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测，如果所有元素都满足条件，则返回 true

let everyArr = [1,2,3,4]
let everyArr2 = everyArr.every(item=>item===1)
console.log(everyArr2, 'everyArr2') //false "everyArr2"

filter经常和indexof一起用截取字符串

比如我这里想要通过layers字符串判断是包含line还是包含point

let arr = [
            { pid: 900, name: "管线", type: "3dtiles",  },
            { pid: 900, name: "管线", type: "3dtiles",  },
            { pid: 600, name: "管道线", type: "wms", layers: "dixiaguandao:gd_line" }
            , { pid: 600, name: "管道点", type: "wms", visible: true}
            , { pid: 600, name: "路灯线", type: "wms", visible: true ,layers: "dixiaguandao:ld_line" }
            , { pid: 600, name: "路灯点", type: "wms",visible: true,  layers: "dixiaguandao:ld_point" }
            , { pid: 600, name: "建设线", type: "wms", visible: true, layers: "dixiaguandao:js_line" }
            , { pid: 600, name: "建设点", type: "wms", visible: true, layers: "dixiaguandao:js_point" }
            , { pid: 600, name: "新型线", type: "wms", visible: false, layers: "dixiaguandao:xx_line" }
            , { pid: 600, name: "新型点", type: "wms", visible: true, layers: "dixiaguandao:xx_point" }
        ]
function getLayers() {
    let arr = viewer.gisdata.config.operationallayers;
    let arr1 = arr.filter(item=>{
        return item.pid == 600 && item.visible ==true
    });//通过pid和visible过滤数组
    let arr2 = [];
    for (let i = 0 ;i<arr1.length;i++){
        arr2.push(arr1[i].layers.split(':')[1]);
    }//取到layers通过：截取：后面的组成数组
    if (pointOrLine == '管点'){
        layerNameArr = arr2.filter(item=>{
            return item.indexOf('point')!==-1
        })
    }else{
        layerNameArr = arr2.filter(item=>{
            return item.indexOf('line')!==-1
        })
    }//如果是‘管点’，带有point的组成数组layerNameArr；否则带line的组成数组layerNameArr
    console.log("layernamearr=========="+layerNameArr);
    return layerNameArr;
}