介紹幾種常用的數(shù)組過濾方法，處理數(shù)據(jù)。

1、filter()方法

按照條件過濾數(shù)據(jù)，返回新數(shù)據(jù)。

const array = [
  {name: '11', age: 1},
  {name: '22', age: 2},
  {name: '33', age: 3}
];
const filterArray = array.filter(item => item.age > 2);
console.log(filterArray); // 輸出新數(shù)組： [{name: '33', age: 3}]

附：Js 利用filter篩選數(shù)組中符合多個條件的項(xiàng)

在JavaScript中，你可以使用filter函數(shù)結(jié)合多個條件來篩選數(shù)組。你可以創(chuàng)建一個函數(shù)，該函數(shù)將返回一個新的數(shù)組，其中包含滿足所有條件的元素。

以下是一個簡單的例子，假設(shè)我們有一個對象數(shù)組，我們想要篩選出那些年齡大于20且名字以"J"開頭的對象。

let people = [

{ name: 'John', age: 25 },j

{ name: 'Jane', age: 18 },

{ name: 'Doe', age: 22 },

{ name: 'Jane', age: 20 }

];

let filteredPeople = people.filter(person =>

person.age > 20 && person.name.startsWith('J')

);

console.log(filteredPeople);

// 輸出: [{ name: 'John', age: 25 }, { name: 'Jane', age: 20 }]

在這個例子中，filter函數(shù)接受一個箭頭函數(shù)作為參數(shù)，該箭頭函數(shù)對每個person元素進(jìn)行條件檢查。如果這個條件為真，元素就會被添加到結(jié)果數(shù)組中。在這個例子中，我們使用了&&操作符來組合兩個條件。

2、find()方法

按照條件過濾數(shù)據(jù)，查找并返回第一個匹配的元素，返回數(shù)據(jù)是對象類型或字符串類型（單項(xiàng)）。

const array = ['11', '22', '33'];
const res = array.find(item=> item === '22');
console.log(res); // 輸出 "22"


const array = [{name:'11'}, {name:'22'}, {name:'33'},{name:'22'}];
const res = array.find(item => item.name === '22');
console.log(res); // 輸出 {name:'22'}

3、reduce()方法

按照條件過濾數(shù)據(jù)，查找并返回第一個元素，返回數(shù)據(jù)是對象類型或字符串類型。

reduce()方法在處理大型數(shù)據(jù)集和復(fù)雜計算時非常有用，能夠提供簡潔、高效的代碼實(shí)現(xiàn)。

解釋：

第一個參數(shù)是一個回調(diào)函數(shù)（也稱為累加器函數(shù)）。

第二個參數(shù)（可選）是初始化累加器的值。下面是reduce()方法的語法。

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);
// 數(shù)組名.reduce(回調(diào)函數(shù)(舊值, 元素, 當(dāng)前下標(biāo), 原數(shù)組), 初始值);

如果未提供initialValue，那么數(shù)組的第一個元素將作為累加器的初始值，并從數(shù)組的第二個元素開始處理。但是，在這種情況下，如果數(shù)組為空，則會拋出TypeError。

// 1.計算數(shù)組的和
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, curr) => acc + curr, 0); // 輸出：15

// 2.統(tǒng)計每個元素出現(xiàn)的次數(shù)
const array = ['11', '22', '11', '22', '33'];
const fruitCount = array.reduce((acc, curr) => {
  acc[curr] = (acc[curr] || 0) + 1;
  return acc;
}, {}); 
// 輸出：{ 11: 2, 22: 2, 33: 1 }


// 3.二維數(shù)組扁平一維數(shù)組
const arr2D = [[1, 2], [3, 4], [5, 6]];
const arrFlat = arr2D.reduce((acc, curr) => acc.concat(curr), []);
// 輸出：[1, 2, 3, 4, 5, 6]

4、findIndex()方法

查找并返回數(shù)組中滿足條件的第一個元素的索引，如果找不到滿足條件的元素，將返回 -1。

const names = ['11', '22', '33'];
const index = names.findIndex(name => name === '22');
console.log(index); // 輸出 1

5、includes()方法

確定數(shù)組是否包含某個值，并在適當(dāng)時返回 true 或 false。

includes 和 indexOf 方法都使用嚴(yán)格的相等性（'==='）搜索數(shù)組。如果值的類型不同（例如4和'4'），它們將分別返回 false 和 -1。

// 檢查11是否為數(shù)組中的元素
const array = [11, 22, 33, 11];
const inc = array.includes(11);
console.log(inc)//true
 
//檢查數(shù)組是否在第一個元素之外的其他位置包含22
const array = [11, 22, 33, 44, 55];
const inc = array.includes(22, 1);
console.log(inc) //true

6、indexOf()方法

返回數(shù)組中找到匹配的元素的第一個索引。如果數(shù)組中不存在該元素，則返回 -1。

includes 和 indexOf 方法都使用嚴(yán)格的相等性（'==='）搜索數(shù)組。如果值的類型不同（例如4和'4'），它們將分別返回 false 和 -1。

// 匹配數(shù)組中33的索引
const array = [11, 22, 33, 44, 55];
const ind = array.indexOf(33);
console.log(ind)//2

其他

如果你想找到在符合特定條件的陣列中的所有項(xiàng)目，使用 filter()。
如果你想檢查是否至少有一個項(xiàng)目符合特定的條件，請使用 find()。
如果你想檢查一個數(shù)組包含一個特定的值，請使用 includes()。
如果要在數(shù)組中查找特定項(xiàng)目的索引，請使用indexOf() 

總結(jié)

到此這篇關(guān)于javascript常用的數(shù)組過濾和查找方法總結(jié)的文章就介紹到這了,更多相關(guān)js數(shù)組過濾方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論