JavaScript 함수형 프로그래밍에서 Map 및 Reduce 메서드를 사용하는 방법에 대한 자세한 설명

ECMAScript 6의 놀라운 새 기능을 지원하는 워크플로에 대한 모든 이야기에서 ECMAScript 5가 이제 우리가 사용할 준비가 된 JavaScript의 함수형 프로그래밍을 지원하는 몇 가지 훌륭한 도구와 방법을 제공했다는 사실을 잊기 쉽습니다. 이러한 함수 메소드 중 대표적인 것은 자바스크립트 배열 객체 기반의 map() 메소드와 Reduce() 메소드이다.

아직 map() 및 Reduce() 메소드를 사용하지 않았다면 지금이 바로 사용을 시작할 때입니다. 오늘날 대부분의 JavaScript 개발 플랫폼은 기본적으로 ECMAScript5를 지원합니다. Map 메서드와 Reduce 메서드를 사용하면 코드가 더욱 간결해지고, 읽기 쉽고, 유지 관리가 쉬워지며, 기능 개발이 더욱 간편해집니다.

성능: 주의 사항

물론 향상된 성능을 유지하는 것이 현실이라면 코드의 가독성과 유지 관리성이 둘 사이에서 균형을 이루어야 합니다. 오늘날의 브라우저는 더 효율적으로 수행하기 위해 for 루프와 같은 더 번거롭고 전통적인 기술을 사용합니다.

제가 코드를 작성하는 방식은 보통 코드 작성 시 가독성과 유지 관리성을 최우선으로 생각하고, 실제 상황에서 실행되는 코드에 문제가 있다고 판단되면 성능 개선을 위해 노력합니다. 코드. 코드를 조기에 최적화하는 것은 어렵고, 이러한 최적화로 인해 나중에 코드를 작성하기가 어려워집니다.

브라우저가 향후 성능 향상을 위해 최적화를 수행할 것이라고 기대하기보다는 JavaScript 엔진에서 map() 및 Reduce()와 같은 메소드를 사용하면 코드 성능을 더 향상시킬 수 있다는 점을 고려해 볼 가치가 있습니다. . 성능의 벽에 부딪히지 않는 한, 나는 재미있게 코드를 작성하는 것을 선호하지만, 필요할 경우 코드의 성능을 유지하기 위해 항상 조정할 준비가 되어 있습니다. 그렇게 하면 코드가 덜 매력적이게 됩니다.

맵 메소드 사용

매핑은 배열의 모든 요소에 대해 작동하고 동일한 길이와 변환된 내용으로 다른 배열을 생성하는 기본적인 함수형 프로그래밍 기술입니다.

방금 말씀드린 내용을 좀 더 구체적으로 설명하기 위해 간단한 사용 예를 들어봤습니다. 예를 들어, 문자 데이터가 포함된 배열이 있고 이를 각 문자 데이터의 길이가 포함된 다른 배열로 변환해야 한다고 가정해 보겠습니다. (그것은 로켓 과학처럼 복잡하지 않고 복잡한 애플리케이션을 작성할 때 자주 해야 할 일이지만 이와 같은 간단한 예에서 작동 방식을 이해하면 사용하는 데 도움이 될 것입니다. 코드에 데이터 값을 추가합니다).

방금 설명한 대로 배열에서 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이라는 변수가 있습니다. 이 변수는 루프가 배열을 순회할 때마다 연산에 필요한 배열 항목을 임시로 저장하는 데 사용됩니다. for 루프를 초기화하기 위한 내부 변수와 루프 변수가 있는 for 루프를 정의합니다. 그런 다음 반복된 배열의 길이가 동물 배열의 길이와 같아질 때까지 각 항목을 반복합니다. 루프를 통과할 때마다 반복 항목의 문자 길이를 계산하고 이를 길이 배열에 저장합니다.

참고: 논의해야 할 점은 위의 코드를 item 변수 없이 더 간결하게 작성할 수 있고 동물의 길이[count]를 lengths 배열에 직접 넣을 수 있다는 점입니다. 중간 변환 과정. 이렇게 하면 코드 공간이 약간 절약될 수 있지만, 이 매우 간단한 예제의 경우에도 코드를 읽기가 약간 어려워집니다. 마찬가지로 코드를 보다 효율적이고 덜 간단하게 만들기 위해 알려진 동물 배열 길이를 사용하여 new Array(animals.length)를 통해 길이 배열을 초기화한 다음 옵션 데이터 길이를 삽입하기 위해 push 메서드를 사용하는 대신 이를 인덱싱할 수 있습니다. 실제로 코드를 어떻게 사용할 계획인지에 따라 다릅니다.

이 구현에는 기술적인 오류가 없습니다. 이는 모든 표준 JavaScript 엔진과 함께 작동하며 작업을 훌륭하게 수행합니다. map() 메서드를 사용하는 방법을 알고 나면 이 방식으로 구현하는 것이 어색해 보일 수 있습니다.

위 코드가 map() 메소드를 사용하여 어떻게 구현되는지 보여드리겠습니다.

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

이 작은 예에서는 먼저 동물 유형 배열을 다시 동물 변수에 대한 배열을 만듭니다. 그러나 우리가 선언해야 하는 유일한 다른 변수는 lengths 변수이며, 익명 인라인 함수를 동물 배열의 각 요소에 매핑한 결과에 직접 해당 값을 할당합니다.

익명 함수는 각 동물에 대해 연산을 수행한 후 동물의 문자 길이를 반환합니다. 결과적으로 lengths는 원래 동물 배열과 동일한 길이를 갖는 배열이 되며, 이 배열에는 각 문자의 길이가 포함됩니다.

这种方式需要注意的一些事情。首先，它比最初编写的代码更简洁。其次，我们仅需要申明更少的变量。更少的变量意味着在全局命名空间里杂音更少，并且如果相同代码的其他部分使用了相同的变量名就会减少碰撞的机会。最后，我们的变量不可能从头到脚都会改变它们的值。随着你深入函数式编程，你将会欣赏使用常量和不变的变量的优雅的能力，现在开始使用并不算早。

这种实现方式的另一个优点是，我们可以通过在整个代码编写过程中通过将代码放进一个个命名的函数里而简化代码而有机会提升自己编写代码的多功能性。匿名的内联函数看着有些乱，并且使得重复使用代码更困难。我们可以定义一个命名为getLength()的函数，并且像下面的方式来使用:

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

看看上面的代码看上去多简洁啊?只是把你处理数据的部分映射一下就使你的代码达到一个全新的功能水平。

什么是函子?

有趣的一点是，通过在数组对象里添加映射，ECMAScript5把基本的数组类型变成了一个完整的函子，这使得函数式编程对我们来说更加的容易。

根据传统的函数编程定义，一个函子需要满足三个条件:

• 1.它保存着一组值。

• 2.它实现了一个map函数来操作每一个元素。

• 3.它的map函数返回一个具有同样大小的函子。

这个将会在你下一次的JavaScript聚会上被翻来覆去的讨论。

如果你想了解更多关于函子的信息,你可以看看Mattias Petter Johansson录制的关于这方面的视频。

使用Reduce方法

Reduce()方法在ECMAScript5里也是新增的，而且它和map()方法很类似，除了不产生其他的函子，reduce()方法产生的一个结果是它可能是任何类型。例如，设想一下，如果你想得到我们animals数组里的所有字符长度都分别作为一个数字然后相加的结果。你也许会像下面这样做:

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

在我们定义我们的初始数组之后，我们为运行总计定义了一个total变量，并把它的初始值设为0。我们也定义一个变量item来保存每一次for循环迭代animals数组的迭代值，并且再定义一个count变量作为一个循环计数器，并且用这两个变量来初始化我们的迭代。然后我们运行for循环来迭代animals数组里的所有字符数据，每次迭代都会把迭代的结果保存到item变量。最终我们把每一次迭代到的item的长度加到我们的total变量里就可以了。

这种实现方式也没有任何的技术错误。我们从定义一个数组开始，然后得到一个结果值就结束了。但是如果我们使用了reduce()方法，我们可以使上面的代码更加简单明了:

var animals = ["cat","dog","fish"];
var total = animals.reduce(function(sum, word) {
  return sum + word.length;
}, 0);
console.log(total);

这里发生变化的是，我们定义了一个名为total的新变量，并且把执行animals数组对象的reduce方法的返回值分配给它，在reduce方法里有两个参数：一个匿名内联function方法，和初始化total的值为0。对于数组中的每一个项reduce()方法都会执行，它在数组的那一项上执行这个function函数，并且把它添加到运行总计，然后再进行下一次迭代。这里我们的内联function方法有两个参数：运行总计，和当前程序正在处理的从数组中获取的字符。这个function函数把当前total的值添加到当前word的长度上。

注意的是：我们设置reduce()方法的第二个参数值为0，这样做确定了total变量包含的是一个数值。如果没有第二个参数reduce方法仍然可以执行，但是执行的结果将不是你期望的那样。(你可以试试并且可以看看当运行总计结束后你是否能推测出JavaScript所使用的编程逻辑。)

那看上去似乎比它需要做的更有一点复杂，因为当调用reduce()方法时需要在一个内联function里综合的定义。我们再那么做一次，但是首先让我们定义一个命名的function函数，而不再使用匿名内联函数:

var animals = ["cat","dog","fish"];
var addLength = function(sum, word) {
  return sum + word.length;
};
var total = animals.reduce(addLength, 0);
console.log(total);

这个代码稍微有点长，但是代码有点长并不总是坏事。这样写你应该看到它使代码更加清晰些，只是在reduce()方法里发生了一点变化。

该程序里reduce()方法有两个参数：一个function函数，用来调用数组里的每一个元素，和一个为total变量设置的运行总计初始值。在这个代码示例中，我们放入了一个名为addLength的新function和为运行总计变量赋初始值为0。在上一行代码中，我们定义了一个名为addLength的function函数，这个函数也需要两个参数：一个当前和一个要处理的字符串。

결론

map() 메서드와 Reduce() 메서드를 자주 사용하면 코드가 더 간단해지고, 다양해지고, 유지 관리가 쉬워지는 옵션이 제공됩니다. 또한 보다 기능적인 JavaScript 기술을 사용할 수 있는 길을 열어줍니다.

map() 메서드와 Reduce() 메서드는 ECMAScript5에 추가된 새로운 메서드 중 두 가지에 불과합니다. 오늘 이를 사용해 보면 코드 품질과 개발자 만족도가 성능에 미치는 일시적인 영향보다 더 크다는 사실을 알게 될 것입니다. map() 메소드와 Reduce() 메소드가 자신의 애플리케이션에 적합한지 판단하기 전에 함수형 함수 기술을 활용하여 현실 세계에서 그 영향을 개발하고 측정해 본 후 사용 여부를 판단해 보세요.

위 내용은 JavaScript 함수형 프로그래밍에서 Map 및 Reduce 메서드를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!