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;
}