快捷導(dǎo)航

JS中關(guān)于filter()方法的使用及說明

更新時(shí)間：2023年05月24日 14:31:48 作者：鐵錘妹妹@

這篇文章主要介紹了JS中關(guān)于filter()方法的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

關(guān)于filter()方法的使用

常見的場景：當(dāng)我們從后端請求到數(shù)據(jù)列表時(shí)，我們需要對其中符合條件的數(shù)據(jù)進(jìn)行篩選、當(dāng)我們拿到數(shù)據(jù)，我們希望把英文首字母大寫，數(shù)組去重等等。

定義和用法

filter用于對數(shù)組進(jìn)行過濾。
filter()方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

注意：

filter() 不會(huì)對空數(shù)組進(jìn)行檢測；不會(huì)改變原始數(shù)組

語法

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

返回值：

返回?cái)?shù)組，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空數(shù)組。

實(shí)例

實(shí)例1

返回?cái)?shù)組nums中所有大于5的元素。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {
  return num > 5;
});
console.log(res);  // [6, 7, 8, 9, 10]

實(shí)例2

對數(shù)組進(jìn)行過濾，篩選出年齡大于 18歲的數(shù)據(jù)

const arr = [
	{
        name: 'tom1',
        age: 23
    },
    {
        name: 'tom2',
        age: 42
    },
    {
        name: 'tom3',
        age: 17
    },
    {
        name: 'tom4',
        age: 13
    },
]
const res = arr.filter(item => item.age > 18);
console.log(res);  //[{name: 'tom1',age: 23},{name: 'tom2',age: 42}]
console.log(arr);

實(shí)例3

利用 filter 遍歷出所有偶數(shù)

let arr = [56, 15, 48, 3, 7];
let newArr = arr.filter(function (x) {
    return x % 2 === 0;
});
console.log(newArr)
// [56, 48]

實(shí)例4

把一個(gè)Array中的空字符串刪掉，可以這么寫：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本沒有trim()方法
});
r; // ['A', 'B', 'C']

實(shí)例5

利用 filter 進(jìn)行數(shù)組去重

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //當(dāng)前元素，在原始數(shù)組中的第一個(gè)索引==當(dāng)前索引值，否則返回當(dāng)前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'RUNOOB','RUNOOB',true,true,15];
console.log(unique(arr))
// [1, "RUNOOB", true, 15]

 var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry']
 var temp_arr = arr.filter(function (element, index, self) {
      return self.indexOf(element) === index
    })
 console.log(temp_arr)

indexOf總是返回第一個(gè)元素的位置，后續(xù)的重復(fù)元素位置與indexOf返回的位置不相等，因此被filter濾掉了，所以重復(fù)的元素僅會(huì)保留第一個(gè)位置的元素