10가지 예제로 Javascript Reduce 방법 배우기
24948 단어 beginnerswebdevjavascriptprogramming
이 시작 값을 지정할 수 있으며, 그렇지 않은 경우 배열의 첫 번째 항목을 사용합니다.
이러한 예제의 대부분은 문제에 대한 아이디어 솔루션이 아닐 수도 있지만 아이디어는 문제를 해결하기 위해 reduce를 사용하는 방법을 설명하는 것입니다.
좋아 시작하자.
합산과 곱셈:
∑그리고 ∏
\sum 및\prod
∑그리고 ∏
// Summation
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i);
// Without initial value
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i, 5 );
// For clarity the above code is the same as
[3, 5, 4, 3, 6, 2, 3, 4].reduce(function(a, i){return (a + i)}, 0 );
// Multiplication
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a * i);
이 예에서는 배열의 첫 번째 항목을 가져오기 때문에 초기 값을 그대로 둘 수 있지만, 오프셋이나 편향을 매우 유용하게 사용할 수도 있습니다.
배열에서 최대값 찾기:
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => Math.max(a, i), -Infinity);
여기에서 각 반복에서 누산기와 현재 항목 사이의 최대값을 반환하고 결국 전체 배열의 최대값을 얻습니다.
실제로 배열에서 최대값을 찾으려면 이것을 사용하지 마십시오. 다음을 사용할 수 있습니다.
Math.max(...[3, 5, 4, 3, 6, 2, 3, 4]);
고르지 않은 배열 연결
let data = [
["The","red", "horse"],
["Plane","over","the","ocean"],
["Chocolate","ice","cream","is","awesome"],
["this","is","a","long","sentence"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))
// Result
['The red horse',
'Plane over the ocean',
'Chocolate ice cream is awesome',
'this is a long sentence']
아주 간단합니다. 여기에서도 맵을 사용하여 배열의 각 항목을 살펴보고 모든 배열에 대해 축소를 수행하고 배열을 단일 문자열로 축소합니다.
배열에서 중복 제거:
let dupes = [1,2,3,'a','a','f',3,4,2,'d','d']
let withOutDupes = dupes.reduce((noDupes, curVal) => {
if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }
return noDupes
}, [])
현재 값에 누적기 배열에 대한 인덱스가 있는지 확인하지 않으면 -1을 반환하므로 배열에 없으므로 추가할 수 있습니다.
기본적으로 고유한 값만 저장하기 때문에 javascript set 이 작업을 훨씬 더 잘 수행할 수 있지만 어느 쪽이든 생각할 수 있는 깔끔한 알고리즘이라고 생각합니다.
괄호 확인
[..."(())()(()())"].reduce((a,i)=> i==='('?a+1:a-1,0);
//Long way with for loop
status=0
for i in string:
if(i=="("):
status=status+1
elif(i==")"):
status=status-1
if(status<0):
return False
이것은 내가 얼마 전에 했던 코딩 챌린지에서 채택한 멋진 것입니다.
장기적으로 우리는 어떤 지점에서 상태가 0보다 작은지 확인함으로써 루프를 더 빨리 끝낼 수 있습니다.
여기서 조건은 상태가 0이면 괄호가 정확하지 않으면 불균형이 있다는 것입니다.
속성별로 그룹화
let obj = [
{name: 'Alice', job: 'Data Analyst', country: 'AU'},
{name: 'Bob', job: 'Pilot', country: 'US'},
{name: 'Lewis', job: 'Pilot', country: 'US'},
{name: 'Karen', job: 'Software Eng', country: 'CA'},
{name: 'Jona', job: 'Painter', country: 'CA'},
{name: 'Jeremy', job: 'Artist', country: 'SP'},
]
let ppl = obj.reduce((group, curP) => {
let newkey = curP['country']
if(!group[newkey]){
group[newkey]=[]
}
group[newkey].push(curP)
return group
}, [])
여기서 우리는 국가 키로 객체의 첫 번째 배열을 그룹화합니다. 각 반복에서 키가 없는지 확인하여 배열을 만든 다음 현재 사람을 여기에 추가하고 그룹 배열을 반환합니다.
이것을 사용하여 지정된 키로 개체를 그룹화하는 기능을 만들 수 있습니다.
배열 배열을 병합했습니다.
let flattened = [[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce(
(singleArr, nextArray) => singleArr.concat(nextArray), [])
// results is [3, 4, 5, 2, 5, 3, 4, 5, 6]
이것은 깊이가 1 수준에 불과하지만 재귀 함수로 이것을 조정할 수 있지만 자바 스크립트에서 재귀를 만드는 팬은 아닙니다 😂
이 작업을 수행하는 의도된 방법은 .flat 메서드를 사용하는 것입니다. 동일한 작업을 수행합니다.
[ [3, 4, 5],
[2, 5, 3],
[4, 5, 6]
].flat();
양수만 거듭제곱
[-3, 4, 7, 2, 4].reduce((acc, cur) => {
if (cur> 0) {
let R = cur**2;
acc.push(R);
}
return acc;
}, []);
// Result
[16, 49, 4, 144]
이것은 지도와 필터를 동시에 수행하는 것과 같습니다. 음수를 필터링하고 양수를 증가시킵니다.
문자열 반전
const reverseStr = str=>[...str].reduce((a,v)=>v+a)
이것은 문자열뿐만 아니라 모든 객체에서 작동합니다. 또한 이 구문을 사용하면 함수에 reduce가 있으므로 reverseStr("Hola")을 호출하면 aloH가 제공됩니다. 😂
이진수에서 십진수로
const bin2dec = str=>[...String(str)].reduce((acc,cur)=>+cur+acc*2,0)
// Long format for readability
const bin2dec = (str) => {
return [...String(str)].reduce((acc,cur)=>{
return +cur+acc*2
},0)
}
이것을 설명하기 위해 예를 볼 수 있습니다.
(10111)->1+(1+(1+(0+(1+0*2)*2)*2)*2)*2
이것은 설명하기 약간 다르지만 첫 번째 실행이 중앙에 있고 중앙에서 바깥쪽으로 확장되는 것처럼 생각하십시오.
팔로우를 해주시면 감사하겠습니다. 여기서 더 많은 콘텐츠를 만들 계획입니다. 시간이 있으면 내 YouTube 채널을 확인하세요.
이제 여러분이 이제 정확한 문제에 대한 올바른 도구를 선택하는 것을 더 잘 이해하기를 바랍니다.
언젠가 여러분도 리듀스를 멋지게 사용하고 스스로에 대해 기분 좋은 날이 되길 바랍니다 😂
덕분에
이 마지막 2
Reference
이 문제에 관하여(10가지 예제로 Javascript Reduce 방법 배우기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ramgendeploy/learn-javascript-reduce-method-with-5-examples-128n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)