es6 필터()를 사용하는 방법

es6에서 filter()는 배열 필터링 메서드입니다. 콜백 함수를 호출하여 배열의 요소를 필터링하고 조건을 충족하는 모든 요소를 ​​반환합니다. 구문 "Array.filter(callback(element[, index[) , 배열] ])[, thisArg])". filter() 메서드는 새 배열을 만들고, 새 배열의 요소에서 조건을 충족하는 지정된 배열의 모든 요소를 ​​확인합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, 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  -1) {
   filtered.push(employees[i]);
 }
}
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

위 코드에서 우리는 John이 포함된 문자를 찾고 있으며 indexOf를 사용하고 있습니다. > 모든 직원의 메소드 이름. 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

for 루프 코드는 employees 배열을 수동으로 반복하고 일치하는 직원을 filtered 배열로 푸시해야 하기 때문에 복잡해 보입니다. 🎜🎜그러나 배열 필터링 방법을 사용하면 위 코드를 단순화할 수 있습니다. 🎜

배열 필터 메소드 filter()

🎜filter() 메소드는 새 배열을 생성하고 새 배열의 요소는 지정된 배열의 모든 요소가 조건을 충족하는지 확인됩니다. 정황. 🎜🎜배열 필터 메서드의 구문은 다음과 같습니다. 🎜

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

🎜필터 메서드는 원래 배열을 변경하지 않지만 제공된 테스트 조건을 만족하는 모든 요소가 포함된 새 배열을 반환합니다. 🎜🎜filter 메소드는 콜백 함수를 첫 번째 매개변수로 사용하고 배열의 각 요소에 대해 콜백 함수를 실행합니다. 🎜🎜콜백 함수가 반복될 때마다 각 배열 요소 값이 콜백 함수에 첫 번째 매개변수로 전달됩니다. 🎜🎜필터 메소드를 사용하는 다음 코드를 참조하세요. 🎜

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

🎜🎜🎜여기서 배열 필터링 방법을 사용하면 employees 배열을 수동으로 반복할 필요도 없고 필터링할 필요도 없습니다. 일치하는 직원을 제거하려면 미리 배열을 만들어 필터링하세요. 🎜

필터 메소드 filter() 이해하기

🎜필터 메소드는 콜백 함수를 받아들이고 배열의 각 요소는 실행 중에 처리됩니다. 루프의 각 반복은 자동으로 첫 번째 매개변수로 전달됩니다. 🎜🎜다음과 같은 숫자 배열이 있다고 가정합니다. 🎜

const onlyTrueValues = checkedState.filter(Boolean);

🎜 그리고 30보다 큰 모든 요소를 ​​찾으려면 아래와 같이 필터 방법을 사용할 수 있습니다. 🎜

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]

*/

🎜🎜🎜콜백 함수 내부에서 루프의 첫 번째 반복에서, 배열의 첫 번째 요소인 값 10은 number 매개변수 값으로 전달되고 10 > 30은 false이므로 숫자 10은 일치하는 것으로 간주되지 않습니다. 🎜🎜배열 필터 메소드는 배열을 반환하므로 10은 30보다 크지 않으며 필터링된 배열 목록에 추가되지 않습니다. 🎜🎜다음 루프 반복에서 배열의 다음 요소인 40이 number 매개변수 값으로 콜백 함수에 전달되고, 40 > 일치하는 것으로 간주되어 필터링된 배치에 추가됩니다. 🎜🎜이 작업은 배열의 모든 요소가 루프를 완료하지 않을 때까지 계속됩니다. 🎜🎜🎜콜백 함수가 false 값을 반환하는 한 해당 요소는 필터링된 배열에 추가되지 않습니다. 필터 메소드는 콜백 함수가 true 값을 반환하는 요소만 포함하는 배열을 반환합니다. 🎜🎜🎜값을 콘솔에 기록하면 루프가 반복될 때마다 콜백 함수에 전달된 요소의 현재 값을 확인할 수 있습니다. 🎜

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

*/

🎜🎜🎜이제 다음 코드를 살펴보세요. 🎜

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]

🎜🎜🎜위 코드에서는 해당 항목만 알아냅니다. 값은 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前端开发】

위 내용은 es6 필터()를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!