>웹 프론트엔드 >프런트엔드 Q&A >es6에서 필터의 기능은 무엇입니까

es6에서 필터의 기능은 무엇입니까

青灯夜游
青灯夜游원래의
2023-01-29 14:41:081238검색

es6에서 필터 필터는 배열 요소를 필터링하고 새 배열을 반환합니다. filter() 함수는 제공된 콜백 함수를 통해 구현된 테스트의 모든 요소를 ​​포함하는 새 배열을 생성합니다. 구문 "arr.filter(callback(element[, index[, array]])[, thisArg])"; 테스트를 통과한 배열 요소가 없으면 빈 배열이 반환됩니다.

es6에서 필터의 기능은 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES6

filter 함수는 일반적으로 필터로 알려져 있습니다. 함수: 배열 요소를 필터링하고 새 배열을 반환합니다.

filter() 메서드는 전달된 모든 요소를 ​​포함하는 새 배열을 생성합니다. 함수에 의해 구현된 테스트 요소입니다.

var sexData=["男","女","女","男","女"];
var filter2=sexData.filter(function(sex){
	return sex==="女"
})

//console.log(filter2)    ["女", "女", "女"]
var porducts = [
	{name: 'apple',type: 'red'} ,
	{name: 'orange',type: 'orange'},
	{name: 'banana',type: 'yellow'},
	{name: 'mango',type: 'yellow'}
];
var filter2=porducts.filter(function(item){
	return item.type==='yellow'
})
//console.log(filter2)
//0: {name: "banana", type: "yellow"}1: {name: "mango", type: "yellow"}

Syntax

var newArray = arr.filter(
  callback(element[, index[, array]])[, thisArg]
)

Parameters

  • callback: 콜백 함수

  • element: arr 배열에서 처리되는 데이터

  • index: 요소의 첨자, 선택사항

  • 배열: 필터를 호출한 배열 자체, 선택사항

  • thisArg: 콜백 실행 시 이에 사용되는 값, 선택사항

반환값

  • 배열 요소가 통과하지 못한 경우 테스트를 통과한 요소들로 구성된 새로운 배열 테스트에서는 빈 배열이 반환됩니다.

Description

  • filter는 배열의 각 요소에 대해 콜백 함수를 한 번씩 호출하고 콜백이 true 또는 true와 동등한 값을 반환하는 모든 요소가 포함된 새 배열을 만듭니다. 콜백은 값이 할당된 인덱스에서만 호출되며, 삭제되었거나 값이 할당된 적이 없는 인덱스에서는 호출되지 않습니다. 콜백 테스트에 실패한 요소는 건너뛰고 새 배열에 포함되지 않습니다.

  • 콜백이 호출되면 세 가지 매개변수가 전달됩니다: 요소의 값, 요소의 인덱스, 탐색되는 배열 자체
    필터에 thisArg 매개변수가 제공되면 this 값으로 사용됩니다. 콜백이 호출될 때. 그렇지 않으면 콜백의 this 값은 비엄격 모드에서는 전역 객체가 되고 엄격 모드에서는 정의되지 않습니다. 콜백 함수에서 최종적으로 관찰되는 this의 값은 일반 함수에서 보이는 "this"의 규칙에 따라 결정됩니다.

  • filter는 원래 배열을 변경하지 않고 필터링된 새 배열을 반환합니다.

  • filter 콜백이 처음 호출되기 전에 탐색되는 요소의 범위가 결정되었습니다. 필터가 호출된 후 배열에 추가된 요소는 필터로 순회되지 않습니다. 기존 요소가 변경된 경우 콜백에 전달되는 값은 필터가 해당 요소를 순회하는 순간의 값입니다. 삭제되었거나 값이 할당되지 않은 요소는 순회되지 않습니다.

특수 사용법:

1. 빈 문자열 제거, 정의되지 않음, null

array.filter((value, index, arr) => {value})

2. 배열 중복 제거

array.filter((value, index, arr) => {arr.indexOf(value) === index})

Example

1. 예제 사용법 filter()가 생성합니다. 0이 아닌 ID를 가진 요소의 json입니다.

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }];var invalidEntries = 0;function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);}function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; }var arrByID = arr.filter(filterByID);console.log('Filtered Array\n', arrByID); // Filtered Array// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]console.log('Number of Invalid Entries = ', invalidEntries); // Number of Invalid Entries = 5

2. 정의되지 않은 빈 문자열 제거

//2. 去掉空字符串、undefined、null
var porducts = [
	{name:''},
	{name:"哈哈"}
];
var filter2=porducts.filter(function(item){
	return item.name
})
//console.log(filter2)    
//打印得出  0: {name: "哈哈"}

3. 배열에서 중복 항목 제거

//3. 数组去重
array.filter((value, index, arr) => {arr.indexOf(value) === index})
var porducts = ['苹果','香蕉','苹果','芒果']
var filter2=porducts.filter(function(item,index,porducts){
	return porducts.indexOf(item)==index
})
//console.log(filter2)
// ["苹果", "香蕉", "芒果"]

[권장 학습:

javascript 고급 튜토리얼

]

위 내용은 es6에서 필터의 기능은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.