JavaScript에서 누산기와 객체의 각 키에 함수를 적용하는 방법은 무엇입니까?
- 王林앞으로
- 2023-08-25 17:33:061458검색
JavaScript에서는 축소() 메서드를 사용하여 누산기와 객체의 각 키(왼쪽에서 오른쪽으로)에 함수를 적용할 수 있습니다.
reduce() 메서드는 배열을 사용하고 콜백 함수를 첫 번째 인수로 받아들입니다. 자세한 내용은 배열 감소()를 참조하세요. 이 메소드의 구문을 살펴보겠습니다.
Syntax
array array.reduce(callback[, initialValue]);
Parameters
Callback - 배열의 각 값에 대해 실행되는 함수입니다.
initialValue - 첫 번째 콜백의 첫 번째 매개변수로 사용되는 개체입니다.
Callback 함수에는 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() 메서드는 모든 값의 합계인 누산기를 반환합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!