So verwenden Sie es6 filter()

In es6 ist filter() eine Array-Filtermethode. Sie ruft eine Rückruffunktion auf, um die Elemente im Array zu filtern und alle Elemente zurückzugeben, die die Bedingungen erfüllen. Die Syntax „Array.filter(callback(element[, index[. , array] ])[, thisArg])". Die Methode filter() erstellt ein neues Array und die Elemente im neuen Array werden auf alle Elemente im angegebenen Array überprüft, die die Bedingungen erfüllen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Die Array-Filtermethode ist eine der am häufigsten verwendeten Methoden in JavaScript.

Es ermöglicht uns, Elemente in einem Array mit bestimmten Bedingungen schnell herauszufiltern.

In diesem Artikel erfahren Sie alles über die Filtermethode und ihre verschiedenen Anwendungsfälle.

Also fangen wir an.

---

Sehen Sie sich den folgenden Code an, ohne die Filtermethode zu verwenden:

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  -1) {
   filtered.push(employees[i]);
 }
}
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

Im obigen Code suchen wir nach Zeichen mit John und verwenden den indexOf Methodenname aller Mitarbeiter. 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

Der for-Schleifencode sieht kompliziert aus, da wir das Array employees manuell durchlaufen und passende Mitarbeiter in das Array filtered verschieben müssen. 🎜🎜Aber mithilfe der Array-Filtermethode können wir den obigen Code vereinfachen. 🎜

Array-Filtermethode filter()

🎜filter()-Methode erstellt ein neues Array und die Elemente im neuen Array werden auf alle Elemente im angegebenen Array überprüft, die den Anforderungen entsprechen Bedingungen. 🎜🎜Die Syntax der Array-Filtermethode lautet wie folgt: 🎜

const onlyTrueValues = checkedState.filter(value => {
  return value === true;
});

🎜Die Filtermethode ändert nicht das ursprüngliche Array, sondern gibt ein neues Array zurück, das alle Elemente enthält, die die bereitgestellte Testbedingung erfüllen. Die 🎜🎜filter-Methode verwendet eine Callback-Funktion als ersten Parameter und führt die Callback-Funktion für jedes Element des Arrays aus. 🎜🎜Bei jeder Iteration der Callback-Funktion wird jeder Array-Elementwert als erster Parameter an die Callback-Funktion übergeben. 🎜🎜Sehen Sie sich den folgenden Code mit der Filtermethode an: 🎜

const onlyTrueValues = checkedState.filter(value => value === true);

🎜🎜🎜Hier müssen wir bei Verwendung der Array-Filtermethode das Array employees nicht manuell durchlaufen und auch nicht filtern Erstellen Sie vorab ein Array, um passende Mitarbeiter zu filtern. 🎜

Verstehen Sie die Filtermethode filter()

🎜Die Filtermethode akzeptiert eine Rückruffunktion und jedes Element des Arrays wird währenddessen aufgerufen Jede Iteration der Zhongdu-Schleife wird automatisch als erster Parameter übergeben. 🎜🎜Angenommen, wir haben das folgende Zahlenarray: 🎜

const onlyTrueValues = checkedState.filter(Boolean);

🎜 Und wir möchten alle Elemente finden, die größer als 30 sind, dann können wir die Filtermethode wie unten gezeigt verwenden: 🎜

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]

*/

🎜🎜🎜Also innerhalb der Callback-Funktion, in der ersten Iteration der Schleife, Das erste Element im Array, der Wert 10, wird als Parameterwert number übergeben und 10 > 30 ist falsch, sodass die Zahl 10 nicht als Übereinstimmung betrachtet wird. 🎜🎜Die Array-Filtermethode gibt ein Array zurück, sodass 10 nicht größer als 30 ist und nicht zur Liste der gefilterten-Arrays hinzugefügt wird. 🎜🎜Dann wird bei der nächsten Iteration der Schleife das nächste Element im Array, 40, als Parameterwert number an die Callback-Funktion übergeben, und wenn 40 > wird als Übereinstimmung betrachtet und zum gefilterten-Stapel hinzugefügt. 🎜🎜Dies wird so lange fortgesetzt, bis nicht alle Elemente im Array die Schleife abgeschlossen haben. 🎜🎜🎜Solange die Rückruffunktion einen false-Wert zurückgibt, wird das Element nicht zum gefilterten Array hinzugefügt. Die Filtermethode gibt ein Array zurück, das nur die Elemente enthält, für die die Rückruffunktion einen true-Wert zurückgibt. 🎜🎜🎜Sie können den aktuellen Wert des an die Callback-Funktion übergebenen Elements bei jeder Iteration der Schleife sehen, wenn Sie den Wert in der Konsole protokollieren: 🎜

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}
]

*/

🎜🎜🎜Schauen Sie sich nun den folgenden Code an: 🎜

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]

🎜🎜🎜Im obigen Code finden wir nur diese heraus Der Wert ist 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 及更高版本

【相关推荐：web前端开发】

Das obige ist der detaillierte Inhalt vonSo verwenden Sie es6 filter(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!