MAP를 사용하고 기능적 자바 스크립트를 줄입니다

코어 포인트

javaScript aviL 및

객체의 메소드는 코드를보다 간결하고 읽기 쉽고 유지 관리하기 쉽게하는 강력한 기능 프로그래밍 도구입니다.
• Array 는 배열의 모든 요소에 작용하고 변환 된 컨텐츠를 포함하는 동일한 길이의 다른 배열을 생성하는 기본 기능 프로그래밍 기술입니다. ECMAScript 5는 배열 객체에 매핑 기능을 추가하여 기본 배열 유형을 완전한 기능으로 바꾸어 기능 프로그래밍을 쉽게 사용할 수 있도록합니다. map() reduce()
메소드 (ECMAScript 5의 새로운 메소드)는 와 유사하지만 다른 functor를 생성하는 대신 단일 결과를 생성하여 모든 유형 일 수 있습니다. 배열의 각 요소에 함수를 적용하여 배열이 단일 출력 값으로 줄어 듭니다.
• map() 방법은 성능에 영향을 줄 수 있지만, 오늘날 코드 품질과 개발자 만족도의 개선은 성능에 대한 일시적인 영향을 능가 할 가능성이 높습니다. 저자는 및
• 가 특정 응용 프로그램에 적합한 지 여부를 결정하기 전에 실제 상황에서의 영향을 측정하고 측정하는 기능 기술을 사용하는 것이 좋습니다. reduce() map() ECMAScript 6의 많은 놀라운 새로운 기능과 관련된 프로세스 토론은 만연하며, ECMAScript 5는 우리가 오늘날 사용할 수있는 JavaScript의 기능 프로그래밍을 지원할 수있는 훌륭한 도구를 제공한다는 것을 잊기 쉽습니다. 여기에는 javaScript
객체를 기반으로 한 기본
• 및 map() 메소드가 포함됩니다. reduce() 아직 map()와 reduce()를 사용하지 않았다면 지금 시작하십시오! 대부분의 최신 JavaScript 플랫폼은 기본적으로 ECMAScript 5를 지원합니다. 매핑 및 규정은 코드를보다 간결하고 읽기 쉽고 유지하기 쉽게 만들 수 있으며보다 우아한 기능 개발을 위해 안내 할 수 있습니다.
성능 : 예방 조치

물론, 필요할 때, 코드의 판독 및 유지 보수는 성능과 균형을 이루어야합니다. 현재 브라우저는

루프와 같은 더 성가신 전통적인 기술을 사용하여 더 효율적입니다. Array 내 접근 방식은 일반적으로 먼저 읽고 유지하기 쉬운 코드를 작성한 다음 실제 상황에서 문제를 발견하면 성능을 최적화하는 것입니다. 조기 최적화는 모든 악의 원천입니다. map() 브라우저가 reduce() 및

를 최적화 할 때 이러한 방법을 사용하면 JavaScript 엔진의 개선을 더 잘 활용할 수 있다는 점을 고려할 가치가 있습니다. 성능 문제에 직면하지 않는 한, 코드를 낙관적으로 작성하고 필요할 경우 백업 포켓에서 코드를 덜 매력적으로 만드는 성능 조정을 선호합니다.

맵 map() reduce()를 사용하십시오 매핑은 배열의 모든 요소에 작용하고 동일한 길이의 다른 배열 (변환 된 컨텐츠 포함)을 생성하는 기본 기능 프로그래밍 기술입니다.

더 구체적으로 말하면 간단한 사용 사례를 생각해 봅시다. 예를 들어, 각 단어 길이가 포함 된 배열로 변환 해야하는 단어 배열이 있다고 가정합니다. (이것은 복잡한 응용 프로그램을 위해 일반적으로 실행하는 데 필요한 복잡한 로켓 과학이 아니라,이 간단한 경우에서 작동하는 방법을 이해하면 코드에 실제 가치를 추가하는 데 도움이 될 것입니다).

방금 설명한 작업을 수행하기 위해 배열에서

루프를 사용하는 방법을 이미 알고있을 수 있습니다. 다음과 같이 보일 수 있습니다

우리가 한 모든 것은 일부 변수를 정의하는 것입니다. 배열의 각 루프에서 작동하는 각 항목을 저장하십시오. 임시 내부 카운터 변수와 A

변수로 루프를 최적화합니다. 그런 다음 각 항목을 배열 길이까지 반복합니다. 각 항목에 대해 길이를 계산하여 for 배열로 밉니다.

참고 :

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

의 길이를 중간 할당없이 배열로 직접 밀어서 더 간결하게 할 수 있다고 말할 수 있습니다. 이렇게하면 코드가 일부 저장되지만이 매우 간단한 예제조차도 코드를 덜 읽기 쉽게 만듭니다. 다시 말하지만, 더 효율적이지만 덜 간단하게하기 위해, 배열 길이를 사용하여 animals 배열을 lengths로 초기화 한 다음 를 사용하는 대신 색인별로 항목을 삽입 할 수 있습니다. 그것은 모두 실제 세계에서 코드를 사용하는 방법에 달려 있습니다. item 이 방법에는 기술적 인 문제가 없습니다. 표준 JavaScript 엔진에서 작동해야하며 작업을 수행합니다. 그러나 for를 사용하는 방법을 알면 서투른 것처럼 보일 것입니다. loops 우리가 이것을 다루기 위해 우리가 어떻게 사용하는지 보여 드리겠습니다 : for animals 이 경우 배열 변수로 다시 시작합니다. 그러나 우리가 선언하는 다른 변수는 lengths이며, 익명 인라인 함수를

배열의 각 요소에 매핑 한 결과에 직접 할당합니다. 이 익명 기능은 각 동물에서 수술을 수행하여 길이를 반환합니다. 결과적으로 는 각 단어의 길이를 포함하는 원래 배열과 같은 길이의 배열이됩니다.

이 방법에 대해 주목해야 할 몇 가지 포인트. 첫째, 원래 방법보다 훨씬 짧습니다. 둘째, 변수를 훨씬 적게 선언해야합니다. 변수가 적을수록 글로벌 네임 스페이스에 노이즈가 줄어들고 동일한 코드의 다른 부분이 동일한 이름의 변수를 사용하는 경우 충돌 가능성이 줄어 듭니다. 또한 변수는 값을 처음부터 끝까지 변경할 필요가 없습니다. 기능 프로그래밍에 뛰어 들면 상수와 불변 변수를 사용하는 우아한 능력에 감사 할 것입니다. 지금은 학습을 시작하기에는 너무 늦지 않았습니다.

이 접근법의 또 다른 장점은 명명 된 기능을 분리하여 다목적 성을 향상시켜 프로세스에서 클리너 코드를 생성한다는 것입니다. 익명의 인라인 함수는 지저분 해 보이고 코드 재사용을 더욱 어렵게 만들 수 있습니다. 우리는 라는 함수를 정의하고 이런 식으로 문맥 상에 사용할 수 있습니다 :

.

이것이 얼마나 깨끗해 보이는지 보시겠습니까? 툴킷의 일부로 매핑을 가져 오면 코드가 완전히 새로운 기능 수준으로 이동할 수 있습니다. getLength() unfunctor 란 무엇입니까?

흥미롭게도, 배열 객체에 매핑 함수를 추가함으로써 ECMAScript 5는 기본 배열 유형을 완전한 unfunctor로 바꾸어 기능적 프로그래밍을보다 쉽게 ​​사용할 수 있도록합니다.

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

클래식 기능 프로그래밍 정의에 따르면 기능은 세 가지 조건을 충족합니다.

에는 값 세트가 포함되어 있습니다 각 요소에 작용하는 매핑 함수를 구현합니다. 매핑 함수는 같은 크기의 함수를 반환합니다

이것은 다음 JavaScript 회의에서 논의 할 수있는 주제입니다.

Functors에 대해 자세히 알고 싶다면 Mattias Petter Johansson 의이 놀라운 비디오를 확인하십시오.

rudge

사용

메소드는 또한 ECMAScript 5의 새로운 메소드이며, 다른 functor를 생성하지는 않지만 단일 결과를 생성한다는 점을 제외하고 와 유사한 새로운 메소드입니다. 예를 들어,

배열의 모든 단어의 길이의 합을 숫자로 생각한다고 가정하십시오. 시작할 수 있습니다
1. 초기 배열을 정의한 후, 우리는 실행 총에 대한 변수
를 생성하고 처음에는 0으로 설정됩니다. 또한 루프를 통과 할 때 배열의 각 반복 및 루프 카운터의 변수
2. 및 반복을 최적화하기 위해 변수 변수를 저장하기 위해 변수 를 만들었습니다. 그런 다음
배열의 모든 단어를 반복하기 위해 루프를 실행하고 각 단어를 변수에 할당합니다. 마지막으로, 각 항목의 길이를 총계에 추가합니다.
3. 다시,이 접근법에는 기술적 인 문제가 없습니다. 우리는 배열로 시작하여 결국 결과를 얻습니다. 그러나 메소드를 사용 하여이 프로세스를보다 직접적으로 만들 수 있습니다.

   var animals = ["cat","dog","fish"];
   var lengths = [];
   var item;
   var count;
   var loops = animals.length;
   for (count = 0; count < loops; count++) {
     item = animals[count];
     lengths.push(item.length);
   }
   console.log(lengths); //[3, 3, 4]

   여기서 일어나는 일은 우리가 새로운 변수를 정의하고 익명 인라인 함수와 초기 실행 총 값 0 인 두 매개 변수를 사용하여

   배열을 줄인 결과에 할당하는 것입니다. 축소는 배열의 각 항목을 가로 지르고 해당 항목의 함수를 실행 한 다음 다음 반복에 전달 된 실행 총에 추가합니다. 여기에 인라인 함수에는 실행 합계와 현재 배열에서 처리중인 단어의 두 가지 매개 변수가 있습니다. 이 함수는 현재 단어의 길이에 total의 현재 값을 추가합니다. animals 의 두 번째 매개 변수를 0으로 설정했는데, 이는 total에 숫자가 포함되어 있음을 나타냅니다. 두 번째 매개 변수가 없으면

   메소드가 여전히 작동하지만 결과가 반드시 기대하는 결과는 아닙니다. (그것을 시도하고 총을 실행할 때 JavaScript에서 어떤 논리를 사용하는지 확인하십시오.)

   . 익명 인라인 함수의 정의는 메소드를 호출 할 때 통합되므로 필요한 것보다 조금 더 복잡해 보일 수 있습니다. 이 작업을 다시하자. 그러나 익명 인라인 함수를 사용하는 대신 먼저 명명 된 함수를 정의합시다. reduce() 이것은 조금 더 길지만 항상 자라는 것이 나쁜 것은 아닙니다. 이런 식으로 보면 total 메소드에서 발생하는 일이 조금 더 명확 해집니다. reduce

   메소드에는 두 가지 매개 변수가 있습니다. 배열의 각 요소에 적용되는 함수와 총계를 실행하는 데 사용되는 초기 값이 있습니다. 이 경우 라는 새 함수의 이름과 실행 총 제로의 초기 값을 전달합니다. 우리는

   함수를 생성하여 두 개의 매개 변수를 수용 할 수 있도록 실행 합계와 처리 할 문자열도 생성했습니다. reduce() 결론

   var animals = ["cat","dog","fish"];
   var lengths = animals.map(function(animal) {
     return animal.length;
   });
   console.log(lengths); //[3, 3, 4]

   정기적으로

   및 reduce를 사용하는 습관을 개발하면 코드가 더 간결하고 일반적이며 유지하기 쉽고보다 기능적인 JavaScript 기술을 사용할 수있는 방법을 포장하는 대안을 제공합니다.

   및 reduce() 메소드는 ECMAScript 5에 추가 된 새로운 방법 중 하나 일뿐입니다. 아마도 오늘날 보는 코드 품질과 개발자 만족도의 개선은 성능에 대한 일시적인 영향보다 훨씬 큽니다. 기능적 기술을 사용하여 실제 세계에서 영향을 개발하고 측정하기 전에 및 가 응용 프로그램에 적합한 지 여부를 결정하십시오. addLength 이 기사는 Panayiotis Velisarakos, Tim Severien 및 Dan Prince에 의해 검토되었습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewers에게 감사합니다! addLength() 기능적 자바 스크립트 (FAQ)

   의 Map-Reduce에 대한 질문이 자주 묻습니다 JavaScript의지도와 감소의 차이점은 무엇입니까?

   JavaScript에서 맵과 감소는 배열에 작용하는 고차 기능입니다. 맵 함수는 원래 배열의 각 요소에 함수를 적용하여 새 배열을 만드는 데 사용됩니다. 원래 배열을 수정하지는 않지만 새 배열을 반환합니다. 반면, 감소 기능은 배열을 단일 값으로 단순화하는 데 사용됩니다. 단일 출력 값으로 줄일 수 있도록 배열의 각 요소에 함수를 적용합니다.

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