기능적 자바 스크립트의 필터링 및 체인

JavaScript의 어휘 : 객체 지향적, 명령 적 및 기능적 프로그래밍

JavaScript의 힘은 객체 지향 프로그래밍, 명령 프로그래밍 및 기능 프로그래밍을 지원하는 다양성입니다. 개발자는 프로젝트 요구 및 팀 선호도에 따라 프로그래밍 패러다임을 유연하게 전환 할 수 있습니다.

es5는 , 및 와 같은 기본 배열 메소드를 도입하여 기능 프로그래밍을 크게 용이하게합니다. 그 중에서 메소드는 배열의 각 요소를 반복하여 지정된 테스트 조건에 따라 새 배열에 추가할지 여부를 결정할 수 있습니다.

메소드 를 사용하여 코드를 단순화하십시오

메소드는 코드를보다 간결하고 명확하게 만듭니다. 배열의 각 요소를 반복하고 테스트 기능을 적용합니다. 테스트 함수가 를 반환하면 요소는

메소드에 의해 리턴 된 새 배열에 포함됩니다. map reduce 메소드는 ES5, filter 및 filter의 다른 두 기능 배열 방법과 함께 작동하며 원래 배열을 변경하지 않고 간결하고 효율적인 코드를 작성하는 데 조합하여 사용될 수 있습니다.

메소드는 루프보다 약간 느리지 만 코드 단순성과 유지 관리 장점은 권장되는 연습입니다. JavaScript 엔진의 최적화로 성능이 더욱 향상 될 것으로 예상됩니다. filter 이 기사는 Dan Prince, Vildan Softic 및 Joan Yinn이 검토했습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewers에게 감사합니다!

내가 JavaScript를 좋아하는 이유 중 하나는 유연성 때문입니다. 이를 통해 객체 지향 프로그래밍, 필수 프로그래밍 및 기능적 프로그래밍을 사용할 수 있으며 현재 요구 사항과 팀 선호도 및 기대치에 따라이를 전환 할 수 있습니다. filter JavaScript는 기능 기술을 지원하지만 Haskell 또는 Scala와 같은 순수한 기능 프로그래밍에는 최적화되지 않습니다. 일반적으로 JavaScript 프로그램을 100% 기능으로 구축하지는 않지만 기능 프로그래밍 개념을 사용하여 코드의 단순성을 유지하고 재사용 및 테스트하기 쉬운 코드 설계에 중점을 둡니다. true 필터 데이터 세트를 사용하여 filter 메서드 를 사용합니다 ES5의 출현으로 JavaScript 배열은 기능적 프로그래밍을보다 편리하게 만드는 몇 가지 방법을 상속합니다. JavaScript 어레이는 이제 기본적으로 매핑, 조절 및 필터링 될 수 있습니다. 각 방법은 배열의 모든 항목을 가로 지르고 루핑 또는 로컬 상태 변경없이 분석을 수행하여 즉시 사용하거나 더 작동 할 수있는 결과를 반환합니다. 이 기사에서는 필터링을 소개하고 싶습니다. 필터링을 사용하면 배열의 각 항목을 평가하고 통과 한 테스트 조건에 따라 요소가 포함 된 새 배열을 반환할지 여부를 결정할 수 있습니다. 배열의 필터 메소드를 사용하면 원래 배열과 동일한 길이 또는 더 짧은 다른 배열이 설정되며 설정 조건과 일치하는 원래 배열의 서브 세트 항목이 포함됩니다.

루프 데모를 사용한 필터

필터링으로부터 이익을 얻을 수있는 간단한 문제의 예는 문자열 배열을 세 문자로 문자열로 제한하는 것입니다. 이것은 복잡한 문제가 아니며, 루프를 위해 정상적인 JavaScript를 사용하여 필터 방법을 사용하지 않고 쉽게 해결할 수 있습니다. 다음과 같이 보일 수 있습니다

우리가하는 일은 세 줄이 포함 된 배열을 정의하고 3 개의 문자열 만 저장할 수있는 빈 배열을 만드는 것입니다. 배열을 반복 할 때 루프 용으로 사용되는 카운트 변수를 정의합니다. 우리는 세 문자가있는 문자열을 만날 때마다 새로운 빈 배열로 밀어 넣습니다. 완료되면 결과를 기록하면됩니다. 우리가 원래 배열을 루프로 수정하는 것을 방해하는 것은 없지만 그렇게하면 원래 값이 영구적으로 상실됩니다. 새 배열을 만들고 원래 배열을 변경하지 않도록하는 것이 훨씬 깨끗합니다. 사용

메서드 우리는이 작업을 수행하는 데 기술적 인 오류가 없었지만 배열에서 필터 메소드의 가용성을 통해 코드를보다 간결하고 직접적으로 만들 수 있습니다. 다음은 필터 메소드를 사용하여 정확히 동일한 작업을 수행하는 방법의 예입니다.

<code class="language-javascript">var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]</code>

이전과 마찬가지로 원래 배열이 포함 된 변수로 시작하고 세 문자가있는 문자열 만 포함하는 배열의 새로운 변수를 정의합니다. 그러나이 경우 두 번째 배열을 정의 할 때 필터 방법을 원래 동물 배열에 적용한 결과에 직접 할당합니다. 작동의 값 길이가 3 인 경우에만 익명의 인라인 함수를 필터로 전달합니다. 필터 메소드는 배열의 각 요소를 반복하고 해당 요소에 테스트 기능을 적용하여 작동합니다. 테스트 함수가 요소에 대해 true를 반환하면 필터 메소드에 의해 반환 된 배열에는 요소가 포함됩니다. 다른 요소가 건너 뜁니다. 코드가 어떻게 간결한 지 알 수 있습니다. 필터의 역할을 미리 이해하지 못 하더라도이 코드를 확인하고 의도를 알아낼 수 있습니다. 기능 프로그래밍의 한 가지 이점은 추적 할 로컬 상태의 수를 줄이고 함수 내에서 외부 변수의 수정을 제한하여 코드의 단순성을 향상 시킨다는 것입니다. 이 경우 원래 배열을 가로 질러 카운트 변수와 다양한 상태는 추적 해야하는 더 많은 상태 일뿐입니다. 필터를 사용하여 루프와 카운트 변수를 제거했습니다. 우리는 이전만큼 새 배열의 값을 변경하지 않습니다. 우리는 그것을 한 번만 정의하고 필터 조건을 원래 배열에 적용하여 얻은 값을 할당합니다.

필터를 형식화하는 다른 방법

우리가 const 선언과 익명 인라인 화살표 함수를 사용하면 코드가 더 간결 할 수 있습니다. 이들은 현재 대부분의 브라우저 및 JavaScript 엔진에서 기본적으로 지원되는 ECMAScript 6 (ES6) 기능입니다.

코드를 기존 코드 기반에 맞추지 않으면 대부분의 경우 이전 구문을 넘어서는 것이 가장 좋습니다. 선택하는 것이 중요합니다. 우리가 더 간결하게되면, 우리 코드의 각 라인이 더 복잡해집니다. JavaScript를 흥미롭게 만드는 것은 팀의 선호도에 맞는 크기, 효율성, 선명도 또는 유지 관리를 최적화하기 위해 여러 가지 방법을 사용하여 동일한 코드를 설계 할 수 있다는 것입니다. 그러나 이것은 또한 팀에 더 큰 부담을 주어 공유 스타일 가이드를 만들고 각 선택의 장단점을 논의해야합니다. 이 경우 코드를보다 읽기 쉽고 다재다능하게 만들기 위해 익명 인라인 화살표 기능을 위의 익명 인라인 화살표 기능을 전통적인 이름 지정된 기능으로 변환 한 다음 해당 이름이 메소드의 필터로 직접 전달할 수 있습니다. 코드는 다음과 같이 보일 수 있습니다

여기서 우리가하는 모든 것은 위에서 정의 된 익명 인라인 화살표 함수를 추출하고이를 별도의 이름의 함수로 변환하는 것입니다. 우리가 볼 수 있듯이, 우리는 배열 요소의 적절한 값 유형을 취하고 동일한 유형을 반환하는 순수한 함수를 정의했습니다. 기능의 이름을 필터 방법으로 조건으로 직접 전달할 수 있습니다.

(, 및 체인 호출에 관한 설문 조사 내용은 공간 제한으로 인해 원본 텍스트에 따라 추가하십시오.)

<code class="language-javascript">var animals = ["cat","dog","fish"];
var threeLetterAnimals = animals.filter(function(animal) {
  return animal.length === 3;
});
console.log(threeLetterAnimals); // ["cat", "dog"]</code>

원본 텍스트의 그림과 형식을 유지하십시오.

위 내용은 기능적 자바 스크립트의 필터링 및 체인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!