欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS數(shù)組中filter方法的使用實例

 更新時間：2022年07月14日 15:52:44   作者：小李的代碼經(jīng)銷商  
在數(shù)組的使用中我們通常會有數(shù)組的過濾的需求,比如值在某個范圍內(nèi)的數(shù)字,用來組成一個新的數(shù)組,這就用到了數(shù)組的過濾,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組中filter方法使用的相關(guān)資料,需要的朋友可以參考下

1、定義

  filter()創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

2、語法

array.filter(function(currentValue,index,arr), thisValue);

3、參數(shù)說明

返回

4、用法

filter() 方法用于把Array中的某些元素過濾掉，然后返回剩下的未被過濾掉的元素。

5、注意事項

1、filter() 不會對空數(shù)組進行檢測；

2、filter() 不會改變原始數(shù)組。

6、使用實例

1.返回數(shù)組array中所有元素都大于等于14的元素、返回等于14、返回大于某個值和小于某個值的元素的元素。

const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14)
console.log(newArr);//打印 [17,18,32,33,16,40]
 
// 查找某個值-------------------------
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num == 14)
console.log(newArr);//打印 [14]
 
//返回大于某個值和小于某個值的元素
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14 && num < 33)
console.log(newArr);//打印 [17, 18, 32, 16]

2.數(shù)組去重操作：對數(shù)組array中所有相同的元素進行去重復(fù)操作。

const array = [2, 2, 'a', 'a', true, true, 15, 17]
const newArr = array.filter((item, i, arr) => {
      return arr.indexOf(item) === i
    })
console.log(newArr);//打印 [2, 'a', true, 15, 17]
 
//-------------------------------------------------------------------------
 
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,]
const newArr = array.filter((item, i, arr) => {
      return arr.indexOf(item) === i
    })
console.log(newArr);// 打印 [1, 2, 3, 4, 5, 6, 7, 8, 9]

3、數(shù)組中保留奇數(shù)或者偶數(shù)。

//保留偶數(shù)----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {
      return item % 2 === 0
    })
console.log(newArr);// 打印 [2, 4, 6, 8, 10]
 
//保留奇數(shù)----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {
      return item % 2 !== 0
    })
console.log(newArr);// 打印 [1, 3, 5, 7, 9]

4、去掉數(shù)組中的假值，比如：空字符串、undefined、null、0、false。

const array = [
      { id: 3 },
      { id: 4 },
      { id: null },
      { id: undefined },
      { id: '' },
      { id: 0 },
      { id: false }
     ]
const newArr = array.filter(({ id }) => id)
console.log(newArr);// 打印 [{ "id": 3 },{ "id": 4 }]
 
//-------------------------------------------------------------------
 
const array = [undefined, null, 3, 5, 'a', false, 0]
const newArr = array.filter(item => item)
console.log(newArr);// 打印 [3, 5, 'a']

5、把對象數(shù)組array中的某個屬性值取出來存到數(shù)組newArr中。

const array = [
  { name: "a", type: "letter" },
  { name: '1', type: "digital" },
  { name: 'c', type: "letter" },
  { name: '2', type: "digital" },
];
const newArr = array.filter((item, i, arr) => {
  return item.type === "letter"
})
console.log(newArr);
// 打印 [{ "name": "a", "type": "letter" }, { "name": "c", "type":"letter" }]

6、filter結(jié)合find方法，實現(xiàn)兩個數(shù)組的補集的解決方法，oldArr的元素newArr中都有，在newArr中去掉所有的oldArr。

find() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。這里有四個元素，那么就會返回兩個數(shù)組元素相等的值，這里取反就返回不相等的值， 不取反的時候因為30的元素不符合，所以不返回30的值。

const array = [32, 4, 11, 55, 46, 99, 104, 54, 16, 33, 78, 43, 40]
const oldArr = [32, 33, 16, 40, 30]
function myfunction() {
  const result = array.filter(item1 => {
    //此處取反去掉，將變換元素狀態(tài)
    return !oldArr.find(item2 => {
      return item1 === item2
    })
  })
  return result
}
const newArr = myfunction()
console.log(newArr);
// 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43]
// 不取反打印 [32, 16, 33, 40]   此處30的元素不符合，所以不返回30的值

附：多條件單數(shù)據(jù)篩選

根據(jù)單個名字或者單個年齡篩選，用filter方法，判斷條件之間是或的關(guān)系。

// 根據(jù)名字或者年齡篩選
function filterByName2(aim, name, age) {
    return aim.filter(item => item.name == name || item.age == age)
}
console.log(filterByName2(aim,'Leila',19))

總結(jié)

到此這篇關(guān)于JS數(shù)組中filter方法使用的文章就介紹到這了,更多相關(guān)JS數(shù)組filter方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論