JavaScript에서 누산기와 객체의 각 키에 함수를 적용하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 누산기와 객체의 각 키에 함수를 적용하는 방법은 무엇입니까?

王林

풀어 주다： 2023-08-25 17:33:06

앞으로

1406명이 탐색했습니다.

如何在 JavaScript 中对累加器和对象的每个键应用函数？

JavaScript에서는 축소() 메서드를 사용하여 누산기와 객체의 각 키(왼쪽에서 오른쪽으로)에 함수를 적용할 수 있습니다.

reduce() 메서드는 배열을 사용하고 콜백 함수를 첫 번째 인수로 받아들입니다. 자세한 내용은 배열 감소()를 참조하세요. 이 메소드의 구문을 살펴보겠습니다.

Syntax

array array.reduce(callback[, initialValue]);

로그인 후 복사

Parameters

Callback - 배열의 각 값에 대해 실행되는 함수입니다.

initialValue - 첫 번째 콜백의 첫 번째 매개변수로 사용되는 개체입니다.

Callback< /strong> 함수에는 4개의 매개변수가 전달됩니다.

첫 번째 매개변수는 이전 콜백 함수 호출의 결과인 누산기이거나, 이것이 첫 번째 호출인 경우 초기 값입니다.
두 번째 매개변수는 현재 처리 중인 키입니다.
세 번째 매개변수는 현재 처리 중인 키입니다. 처리 중인 값입니다.
네 번째 매개변수는 현재 처리 중인 인덱스입니다.

그런 다음 Reduce() 메서드는 누산기를 반환합니다.

reduce() 메서드 적용하기

Reduce() 메서드의 작동 방식을 이해하기 위해 간단한 예를 살펴보겠습니다.

객체 배열이 있고 각 객체에는 이름과 값 속성이 있습니다. 값을 합산하기 위해 Reduce() 메소드를 사용합니다.

누산기(이전 콜백 함수 호출의 결과)와 처리할 현재 값을 받는 콜백 함수를 전달하여 이를 수행할 수 있습니다. 그런 다음 콜백 함수는 누산기와 현재 값을 반환합니다.

예

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = arr.reduce((acc, cur) => acc + cur.value, 0);
      document.getElementById("result").innerHTML = sum;
   </script>
</body>
</html>

로그인 후 복사

위 프로그램에는 객체 배열이 있고 각 객체에는 이름과 값 속성이 있습니다. 값을 합산하기 위해 Reduce() 메소드를 사용합니다.

콜백 함수 ((acc, cur) => acc + cur.value)를 전달합니다. 이 함수는 처리 중인 누산기 acc(이전 콜백 함수 호출의 결과)와 현재 값 cur를 받습니다. 그런 다음 콜백 함수는 누산기와 현재 값을 반환합니다.

그런 다음 reduce() 메서드는 모든 값의 합계인 누산기를 반환합니다.

< h2>reduce() 사용의 장점
reduce() 사용의 한 가지 장점은 코드를 더 읽기 쉽게 만들 수 있다는 것입니다.
예를 들어 위 배열의 값을 합산하려면 for 루프를 사용할 수도 있습니다.
Example
<html> <head> <title>Using for loop</title> </head> <body> <h2> Using for loop to sum the values of objects in an array</h2> <div id="result"></div> <script> let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }]; let sum = 0; for (let i = 0; i < arr.length; i++) { sum += arr[i].value; } document.getElementById("result").innerHTML = sum </script> </body> </html>
로그인 후 복사
위의 reduce() 메서드와 for 루프는 모두 동일한 결과를 얻습니다. 그러나 reduce() 메서드가 더 간결하고 읽기 쉽습니다.
reduce() 사용의 또 다른 장점은 데이터를 병렬로 처리하는 데 사용할 수 있다는 것입니다.
예를 들어 객체 배열이 있는 경우 각 객체는 이름과 값 속성을 가지며 다음을 원합니다. 병렬로 처리 각 개체에 대해 map() 메서드를 사용할 수 있습니다.
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }]; let results = arr.map(obj => { // do something with obj });
로그인 후 복사
하지만 데이터를 순차적으로 처리하려면 reduce() 메서드를 사용할 수 있습니다.
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }]; let result = arr.reduce((acc, obj) => { // do something with obj and return the result }, initialValue);
로그인 후 복사
결론

이 튜토리얼에서는 Reduce() 메서드를 사용하여 누산기와 객체의 각 키에 함수를 적용하는 방법을 살펴보았습니다. 우리는 또한 다른 방법에 비해 Reduce()를 사용하는 것의 몇 가지 이점을 확인했습니다.
위 내용은 JavaScript에서 누산기와 객체의 각 키에 함수를 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!