這篇文章主要介紹“es6 filter()如何用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“es6 filter()如何用”文章能幫助大家解決問題。
專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)科爾沁免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
在es6中，filter()是一個(gè)數(shù)組過濾方法，會(huì)調(diào)用一個(gè)回調(diào)函數(shù)來過濾數(shù)組中的元素，返回符合條件的所有元素，語法“Array.filter(callback(element[, index[, array]])[, thisArg])”。filter()方法會(huì)創(chuàng)建一個(gè)新數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
數(shù)組過濾器方法是 JavaScript 中使用最廣泛的方法之一。
它允許我們快速過濾出具有特定條件的數(shù)組中的元素。
看看下面沒有使用過濾器方法的代碼：
const employees = [
{ name: 'David Carlson', age: 30 },
{ name: 'John Cena', age: 34 },
{ name: 'Mike Sheridan', age: 25 },
{ name: 'John Carte', age: 50 }
];
const filtered = [];
for(let i = 0; i < employees.length; i++) {
if(employees[i].name.indexOf('John') > -1) {
filtered.push(employees[i]);
}
}
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]
在上面的代碼中，我們正在查找具有John我們正在使用indexOf方法的名稱的所有員工。
for 循環(huán)代碼看起來很復(fù)雜，因?yàn)槲覀冃枰謩?dòng)循環(huán)employees數(shù)組并將匹配的員工推送到filtered數(shù)組中。
但是使用數(shù)組過濾方法，我們可以簡(jiǎn)化上面的代碼。
filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
數(shù)組過濾方法的語法如下：
Array.filter(callback(element[, index[, array]])[, thisArg])
filter 方法不會(huì)更改原始數(shù)組，但會(huì)返回一個(gè)新數(shù)組，其中包含滿足提供的測(cè)試條件的所有元素。
filter 方法將回調(diào)函數(shù)作為第一個(gè)參數(shù)，并為數(shù)組的每個(gè)元素執(zhí)行回調(diào)函數(shù)。
在回調(diào)函數(shù)的每次迭代中，每個(gè)數(shù)組元素值都作為第一個(gè)參數(shù)傳遞給回調(diào)函數(shù)。
使用過濾器方法查看以下代碼：
const employees = [
{ name: 'David Carlson', age: 30 },
{ name: 'John Cena', age: 34 },
{ name: 'Mike Sheridan', age: 25 },
{ name: 'John Carte', age: 50 }
];
const filtered = employees.filter(function (employee) {
return employee.name.indexOf('John') > -1;
});
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]
在這里，使用數(shù)組過濾方法，我們不需要手動(dòng)循環(huán)遍歷employees數(shù)組，也不需要filtered事先創(chuàng)建數(shù)組來過濾掉匹配的員工。
filter 方法接受一個(gè)回調(diào)函數(shù)，數(shù)組的每個(gè)元素在循環(huán)的每次迭代中都作為第一個(gè)參數(shù)自動(dòng)傳遞。
假設(shè)我們有以下數(shù)字?jǐn)?shù)組：
const numbers = [10, 40, 30, 25, 50, 70];
而我們想要找出所有大于30的元素，那么我們可以使用如下所示的過濾方法：
const numbers = [10, 40, 30, 25, 50, 70];
const filtered = numbers.filter(function(number) {
return number > 30;
});
console.log(filtered); // [40, 50, 70]
所以在回調(diào)函數(shù)內(nèi)部，在循環(huán)的第一次迭代中，數(shù)組中的第一個(gè)元素值 10 將作為number參數(shù)值傳遞，并且 10 > 30 為 false，因此數(shù)字 10 不會(huì)被視為匹配項(xiàng)。
數(shù)組過濾方法返回一個(gè)數(shù)組，因此 10 不大于 30，它不會(huì)被添加到filtered數(shù)組列表中。
然后在循環(huán)的下一次迭代中，數(shù)組中的下一個(gè)元素 40 將作為number參數(shù)值傳遞給回調(diào)函數(shù)，當(dāng) 40 > 30 為真時(shí)，將被視為匹配并添加到filtered大批。
這將一直持續(xù)到數(shù)組中的所有元素都沒有完成循環(huán)。
因此，只要回調(diào)函數(shù)返回一個(gè)
false值，該元素就不會(huì)被添加到過濾后的數(shù)組中。filter 方法返回一個(gè)數(shù)組，該數(shù)組僅包含回調(diào)函數(shù)為其返回true值的那些元素。
您可以看到在循環(huán)的每次迭代中傳遞給回調(diào)函數(shù)的元素的當(dāng)前值如果將值記錄到控制臺(tái)：
const numbers = [10, 40, 30, 25, 50, 70];
const filtered = numbers.filter(function(number) {
console.log(number, number > 30);
return number > 30;
});
console.log(filtered); // [40, 50, 70]
/* output
10 false
40 true
30 false
25 false
50 true
70 true
[40, 50, 70]
*/
現(xiàn)在，看看下面的代碼：
const checkedState = [true, false, false, true, true];
const onlyTrueValues = checkedState.filter(function(value) {
return value === true;
});
console.log(onlyTrueValues); // [true, true, true]
在上面的代碼中，我們只找出那些值為true.
回調(diào)函數(shù)可以如上所示編寫，也可以使用箭頭函數(shù)如下所示：
const onlyTrueValues = checkedState.filter(value => {
return value === true;
});
而如果箭頭函數(shù)中只有一條語句，我們可以跳過return關(guān)鍵字，隱式返回值，如下：
const onlyTrueValues = checkedState.filter(value => value === true);
上面的代碼可以進(jìn)一步簡(jiǎn)化為：
const onlyTrueValues = checkedState.filter(Boolean);
要了解它是如何工作的，請(qǐng)查看我的這篇文章。
除了數(shù)組的實(shí)際元素外，傳遞給 filter 方法的回調(diào)函數(shù)還接收以下參數(shù)：
我們正在循環(huán)的index數(shù)組中當(dāng)前元素的
array我們循環(huán)播放的原版
看看下面的代碼：
const checkedState = [true, false, false, true, true];
checkedState.filter(function(value, index, array) {
console.log(value, index, array);
return value === true;
});
/* output
true 0 [true, false, false, true, true]
false 1 [true, false, false, true, true]
false 2 [true, false, false, true, true]
true 3 [true, false, false, true, true]
true 4 [true, false, false, true, true]
*/
正如您在上面看到的，數(shù)組過濾器方法對(duì)于過濾掉數(shù)組中的數(shù)據(jù)很有用。
但是過濾器方法在一些實(shí)際用例中也很有用，例如從數(shù)組中刪除重復(fù)項(xiàng)，分離兩個(gè)數(shù)組之間的公共元素等。
從數(shù)組中刪除元素
filter 方法最常見的用例是從數(shù)組中刪除特定元素。
const users = [
{name: 'David', age: 35},
{name: 'Mike', age: 30},
{name: 'John', age: 28},
{name: 'Tim', age: 48}
];
const userToRemove = 'John';
const updatedUsers = users.filter(user => user.name !== userToRemove);
console.log(updatedUsers);
/* output
[
{name: 'David', age: 35},
{name: 'Mike', age: 30},
{name: 'Tim', age: 48}
]
*/
在這里，我們從users名稱為 的數(shù)組中刪除用戶John。
userToRemove因此，在回調(diào)函數(shù)中，我們正在檢查保留名稱與存儲(chǔ)在變量中的名稱不匹配的用戶的條件。
從數(shù)組中查找唯一或重復(fù)項(xiàng)
const numbers = [10, 20, 10, 30, 10, 30, 50, 70];
const unique = numbers.filter((value, index, array) => {
return array.indexOf(value) === index;
})
console.log(unique); // [10, 20, 30, 50, 70]
const duplicates = numbers.filter((value, index, array) => {
return array.indexOf(value) !== index;
})
console.log(duplicates); // [10, 10, 30]
該indexOf方法返回第一個(gè)匹配元素的索引，因此，在上面的代碼中，我們正在檢查我們正在循環(huán)的元素的當(dāng)前索引是否與第一個(gè)匹配元素的索引匹配，以找出唯一和重復(fù)元素.
查找兩個(gè)數(shù)組之間的不同值
const products1 = ["books","shoes","t-shirt","mobile","jackets"];
const products2 = ["t-shirt", "mobile"];
const filteredProducts = products1.filter(product => products2.indexOf(product) === -1);
console.log(filteredProducts); // ["books", "shoes", "jackets"]
在這里，我們products1使用 filter 方法循環(huán)，在回調(diào)函數(shù)中，我們正在檢查products2數(shù)組是否包含我們使用 arrayindexOf方法循環(huán)的當(dāng)前元素。
如果該元素不匹配，則條件為真，該元素將被添加到filteredProducts數(shù)組中。
您還可以使用數(shù)組includes方法來實(shí)現(xiàn)相同的功能：
const products1 = ["books","shoes","t-shirt","mobile","jackets"];
const products2 = ["t-shirt", "mobile"];
const filteredProducts = products1.filter(product => !products2.includes(product));
console.log(filteredProducts); // ["books", "shoes", "jackets"]
所有現(xiàn)代瀏覽器和 Internet Explorer (IE) 版本 9 及更高版本
Microsoft Edge 版本 12 及更高版本
關(guān)于“es6 filter()如何用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
重慶分公司
重慶分公司
