JavaScript의 filter() 메서드에 대한 심층적인 이해(코드 포함)

이 기사에서 제공하는 것은 JavaScript에서도 널리 사용되는 filter() 메서드입니다. 필요한 참조 가치가 있습니다. 그것이 당신에게 도움이 되기를 바랍니다.

filter() 메서드는 제공된 함수에 의해 구현된 테스트의 모든 요소를 ​​포함하는 새 배열을 만듭니다.

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Syntax

var array = arr.filter(function(item,index,array){})
// 一般都传一个参数

Return Value

새로운 테스트 통과 요소 컬렉션의 배열 또는 테스트가 실패하는 경우 빈 배열

Description

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

filter 통과하는 요소의 범위는 콜백 함수가 처음 호출되기 전에 결정되었습니다. 필터를 호출한 후 배열에 추가된 요소는 필터로 순회되지 않습니다. 기존 요소가 변경된 경우 콜백 함수에 전달되는 값은 필터가 해당 요소를 순회하는 순간의 값입니다. 삭제되었거나 값이 할당되지 않은 요소는 순회되지 않습니다. (이해가 안되면 앞서 작성한 forEach 메소드를 읽어보세요)

Example

작은 값 모두 필터링

//下例使用 filter 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。
function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

JSON의 잘못된 항목 필터링

// 以下示例使用filter()创建具有非零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

배열에서 검색

// 下面的示例使用filter()根据搜索条件过滤数组内容
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']
//如果输入的字母是不相连的，那么久得不到你想要的结果
console.log(filterItems('al'));// []
// 输出结果为空

필터 방법은 일반적으로 필터링 및 필터링에 사용됩니다.

일부 환경에서 필터 방식이 지원되지 않는 경우, mdn 홈페이지를 방문하여 MDN Array.prototype.filter() 방식 문제를 해결하시기 바랍니다.

위 내용은 JavaScript의 filter() 메서드에 대한 심층적인 이해(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!