es6 filter()怎麼用 - tw511教學網

在es6中，filter()是一個陣列過濾方法，會呼叫一個回撥函數來過濾陣列中的元素，返回符合條件的所有元素，語法「Array.filter(callback(element[, index[, array]])[, thisArg])」。filter()方法會建立一個新陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。

前端（vue）入門到精通課程：進入學習
API 檔案、設計、偵錯、自動化測試一體化共同作業工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

陣列過濾器方法是 JavaScript 中使用最廣泛的方法之一。

它允許我們快速過濾出具有特定條件的陣列中的元素。

因此，在本文中，您將瞭解有關過濾器方法及其各種用例的所有內容。

所以讓我們開始吧。

看看下面沒有使用過濾器方法的程式碼：

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 迴圈程式碼看起來很複雜，因為我們需要手動迴圈employees陣列並將匹配的員工推播到filtered陣列中。

但是使用陣列過濾方法，我們可以簡化上面的程式碼。

陣列過濾方法filter()

filter() 方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。

陣列過濾方法的語法如下：

Array.filter(callback(element[, index[, array]])[, thisArg])
登入後複製

filter 方法不會更改原始陣列，但會返回一個新陣列，其中包含滿足提供的測試條件的所有元素。

filter 方法將回撥函數作為第一個引數，併為陣列的每個元素執行回撥函數。

在回撥函數的每次迭代中，每個陣列元素值都作為第一個引數傳遞給回撥函數。

使用過濾器方法檢視以下程式碼：

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 }]
登入後複製

在這裡，使用陣列過濾方法，我們不需要手動迴圈遍歷employees陣列，也不需要filtered事先建立陣列來過濾掉匹配的員工。

瞭解過濾方法filter()

filter 方法接受一個回撥函數，陣列的每個元素在迴圈的每次迭代中都作為第一個引數自動傳遞。

假設我們有以下數位陣列：

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]
登入後複製

所以在回撥函數內部，在迴圈的第一次迭代中，陣列中的第一個元素值 10 將作為number引數值傳遞，並且 10 > 30 為 false，因此數位 10 不會被視為匹配項。

陣列過濾方法返回一個陣列，因此 10 不大於 30，它不會被新增到filtered陣列列表中。

然後在迴圈的下一次迭代中，陣列中的下一個元素 40 將作為number引數值傳遞給回撥函數，當 40 > 30 為真時，將被視為匹配並新增到filtered大批。

這將一直持續到陣列中的所有元素都沒有完成迴圈。

因此，只要回撥函數返回一個false值，該元素就不會被新增到過濾後的陣列中。filter 方法返回一個陣列，該陣列僅包含回撥函數為其返回true值的那些元素。

您可以看到在迴圈的每次迭代中傳遞給回撥函數的元素的當前值如果將值記錄到控制檯：

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]
*/
登入後複製

現在，看看下面的程式碼：

const checkedState = [true, false, false, true, true];
 
const onlyTrueValues = checkedState.filter(function(value) {
  return value === true;
});
 
console.log(onlyTrueValues); // [true, true, true]
登入後複製

在上面的程式碼中，我們只找出那些值為true.

回撥函數可以如上所示編寫，也可以使用箭頭函數如下所示：

const onlyTrueValues = checkedState.filter(value => {
  return value === true;
});
登入後複製

而如果箭頭函數中只有一條語句，我們可以跳過return關鍵字，隱式返回值，如下：

const onlyTrueValues = checkedState.filter(value => value === true);
登入後複製

上面的程式碼可以進一步簡化為：

const onlyTrueValues = checkedState.filter(Boolean);
登入後複製

要了解它是如何工作的，請檢視我的這篇文章。

回撥函數引數

除了陣列的實際元素外，傳遞給 filter 方法的回撥函數還接收以下引數：

我們正在迴圈的index陣列中當前元素的
array我們迴圈播放的原版

看看下面的程式碼：

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]

*/
登入後複製

過濾方法的用例

正如您在上面看到的，陣列過濾器方法對於過濾掉陣列中的資料很有用。

但是過濾器方法在一些實際用例中也很有用，例如從陣列中刪除重複項，分離兩個陣列之間的公共元素等。

從陣列中刪除元素

filter 方法最常見的用例是從陣列中刪除特定元素。

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名稱為的陣列中刪除使用者John。

userToRemove因此，在回撥函數中，我們正在檢查保留名稱與儲存在變數中的名稱不匹配的使用者的條件。

從陣列中查詢唯一或重複項

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方法返回第一個匹配元素的索引，因此，在上面的程式碼中，我們正在檢查我們正在迴圈的元素的當前索引是否與第一個匹配元素的索引匹配，以找出唯一和重複元素.

查詢兩個陣列之間的不同值

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 方法迴圈，在回撥函數中，我們正在檢查products2陣列是否包含我們使用 arrayindexOf方法迴圈的當前元素。

如果該元素不匹配，則條件為真，該元素將被新增到filteredProducts陣列中。

您還可以使用陣列includes方法來實現相同的功能：

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"]
登入後複製

瀏覽器對過濾方法的支援

所有現代瀏覽器和 Internet Explorer (IE) 版本 9 及更高版本
Microsoft Edge 版本 12 及更高版本

【相關推薦：】

以上就是es6 filter()怎麼用的詳細內容，更多請關注TW511.COM其它相關文章！