Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript 필터:단계별 가이드

JavaScript() 필터 메서드는 기존 배열에서 요소 배열을 생성합니다. filter() 메서드는 콜백 함수를 인수로 받아들입니다. 이 함수는 요소를 기존 목록에서 새 목록에 추가해야 하는지 여부를 평가합니다.

JavaScript가 처음이라면 filter() 및 감소() 자바스크립트 함수. 이러한 함수는 배열이라고도 하는 개체 목록으로 작업할 때 유용할 수 있습니다. .

배열에서 특정 값만 가져오려는 경우 JavaScript filter()를 사용할 수 있습니다. 함수. 이 자습서에서는 예제를 참조하여 filter() 함수를 사용하는 방법에 대해 설명합니다.

<내비>
  • 어레이 리프레셔
  • 자바스크립트 필터 배열
  • 자바스크립트 예제 필터링
  • 결론

어레이 리프레셔

JavaScript 배열은 0개 이상의 항목을 저장합니다. 항목은 숫자, 기타 배열, 문자열이거나 다른 데이터 유형을 사용할 수 있습니다. 특정 항목에 액세스하기 위해 "0"부터 시작하는 번호가 지정된 인덱스를 사용합니다.

배열을 사용하면 동일한 변수에 여러 값을 저장할 수 있습니다. 이렇게 하면 값을 저장하기 위해 여러 변수를 작성할 필요가 없기 때문에 더 잘 쓰고 깔끔하게 작성할 수 있습니다.

다음은 JavaScript 배열의 예입니다.

let names = ["Alex", "Bill", "Connor", "Daniel", "Edna"];

자바스크립트 필터 배열

JavaScript 배열 filter() 메서드는 기존 배열의 내용을 기반으로 새 배열을 만듭니다. filter() 메서드는 기존 배열의 각 항목에 대한 콜백 함수를 평가합니다. 콜백 함수의 조건을 충족하는 항목은 새 목록에 추가됩니다.

필터 방법을 사용하여 특정 기준을 충족하는 값을 검색하고 새 배열에 추가할 수 있습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

필터 배열 JavaScript 구문

필터 메서드는 다음 구문을 사용합니다.

var newArr = oldArr.filter(function(item) {
	return yourCondition;
});

이 코드는 "oldArr" 배열의 내용을 기반으로 "newArr"이라는 배열을 정의합니다. 콜백 함수는 조건이 충족되면 새 배열에 값을 반환합니다. 조건의 예는 다음과 같습니다.

  • 항목> 5
  • 항목 =="제시"
  • 항목 <3

JavaScript 비교 연산자를 사용하여 조건을 작성할 수 있습니다. 또는 if 문을 사용할 수 있습니다. if 문을 사용하면 여러 값 중 새 목록에 추가할 값을 제어할 수 있습니다.

자바스크립트 예제 필터링

숫자 목록 필터링

간단한 예부터 시작하겠습니다. 커피숍에서 구매한 목록이 있습니다. $10 이상의 구매를 표시하는 새 목록을 만들고 싶습니다.

구매 목록은 다음과 같습니다.

var purchases = [2.50, 2.70, 10.50, 12.30, 9.60, 2.30, 3.40];

filter() 메서드를 사용하여 $10 이상의 구매를 검색할 수 있습니다.

var big_purchases = purchases.filter(function(purchase) {
	return purchase > 10;
});

우리 프로그램은 구매가 $10 이상의 가치가 있는지 확인합니다. 구매가 big_purchases에 추가됩니다. $10 이상의 가치가 있으면 나열하십시오. 그렇지 않으면 구매가 누락됩니다.

big_purchases JavaScript 변수의 값은 다음과 같습니다.

[10.5, 12.3]

filter() 메서드는 우리가 정의한 테스트를 통과하는 모든 요소를 ​​반환합니다. 이 테스트는 "항목> 10"입니다. 모든 구매에 액세스하려면 원래 "구매" 목록을 다시 참조할 수 있습니다. filter() 메서드는 $10보다 큰 값의 배열을 반환합니다.

객체 배열 필터링

학교에 있는 모든 사람의 이름을 포함하는 배열이 있습니다.

var students = [
	{
		id: 1,
		name: "Alex",
		class: "First Grade",
		age: 5
	},
{
		id: 2,
		name: "Bill",
		class: "First Grade",
		age: 5
	},
{
		id: 3,
		name: "Connor",
		class: "Second Grade",
		age: 6
	}
];

1학년 학생만 검색하려면 어떻게 해야 합니까? 필터() 이 작업을 쉽게 수행할 수 있습니다. "students" 배열에서 모든 1학년 학생을 반환하는 함수를 작성해 보겠습니다.

var firstGradeStudents = students.filter(function (student) {
	return student.class === “First Grade”;
});

필터() 하나의 매개변수를 받습니다. 데이터에 대해 실행할 작업을 결정하는 기능입니다.

필터() 함수는 "students" 배열의 모든 객체를 통과합니다. filter()는 클래스가 "First Grade"인 학생을 반환합니다. "===" 연산자는 같음을 의미합니다.

필터 함수는 "firstGradeStudents" 변수를 통해 액세스할 수 있는 이러한 새 값으로 새 배열을 생성합니다.



결론

filter() 배열 메서드를 사용하여 기존 배열의 내용에서 새 배열을 만들 수 있습니다. 단서는 filter() 메서드의 이름에 있습니다. filter() 필터 기존 배열에서 요소를 출력합니다.

그리고 그게 다야! 이제 reduce()를 사용할 수 있습니다. 더 자신있게 JavaScript에서. JavaScript로 코딩하는 방법에 대해 자세히 알아보려면 JavaScript 초보자를 위한 최고의 자습서에 대한 기사를 읽어보세요.