JavaScript (5) - Array.from() , Array.prototype.reduce() 사용방법
2022. 10. 13. 17:05ㆍfront-end/JavaScript
728x90
Array.from()
Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 '복사'해 새로운 Array 객체를 만든다.
console.log(Array.from('soyoung'));
// expected output: Array ["s", "o", "y", "o", "u", "n", "g"]
console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]
//배열 형채를 가진 객체(arguments)에서 배열 만들기
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [1, 3, 3]
Array.prototype.reduce()
배열의 각 요소에 대해 주어진 reduce() 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.
const array1 = [1, 2, 3, 4];
const initialValue = 0;
const sumValue = array1
.reduce((previousValue, currentValue)=> previousValue+currentValue,initialValue);
console.log(sumValue) //10
reduce() 중첩 배열 합치기 concat() 사용
let flattend = [[0,1],[2,3],[4,5]].reduce((acc,curr)=> acc.concat(curr),[])
console.log(flattend) //[0,1,2,3,4,5]
객체 내의 값 인스턴스 개수 세기 (코딩테스트에서 유용)
let names = ['Soyoung', 'Jinhee', 'Sungsil', 'Hana', 'Soyoung'];
let countedNames = names.reduce(function(allNames, name){
if(name in allNames){
allNames[name]++;
}else {
allNames[name] = 1;
}
return allNames;
},{});
console.log('countedNames:',countedNames)
//countedNames: { Soyoung: 2, Jinhee: 1, Sungsil: 1, Hana: 1 }
속성으로 객체 분류하기
var people = [
{ name: 'Soyoung', age: 21 },
{ name: 'Jinhee', age: 20 },
{ name: 'Sungsil', age: 20 }
];
function groupBy(objArray, property){
return objArray.reduce((arr,obj) => {
let key = obj[property];
if(!arr[key]){
arr[key] = [];
}
arr[key].push(obj)
return arr;
},{})
}
let groupedPeople = groupBy(people,'age')
console.log('groupedPeople:',groupedPeople)
//groupedPeople: {
'20': [ { name: 'Jinhee', age: 20 }, { name: 'Sungsil', age: 20 } ],
'21': [ { name: 'Soyoung', age: 21 } ]
}
728x90
'front-end > JavaScript' 카테고리의 다른 글
Javascript debugger (1) - 브라우저를 코딩 에디터로 사용하기 (0) | 2024.02.01 |
---|---|
JavaScript (6) - 호이스팅(Hoisting), 변수 선언의 실행 시점 (2) | 2023.12.04 |
JavaScript (4) - getElementById vs querySelecter (0) | 2022.04.03 |
JavaScript (3) - Window Size, Window.scrollTo, Window.scrollBy, Window Load 설명 (0) | 2022.04.03 |
JavaScript (2) - find() , filter() 함수 설명 (0) | 2022.04.03 |