728x90
반응형
var data = [{name : "corn", description : "초당옥수수", price : 5500},
{name : "beer", description : "캔맥주", price : 4500},
{name : "candy", description : "사탕", price : 350}];
for 와 forEach
for(var i=0; i<data.length; i++) {
console.log(data[i].title , data[i].price)
}
data.forEach(function(v) {
console.log(v.title, v.price);
});
map(적용) 과 filter(추출)
var filteredData = data.map(function(v) {
return v * 1.1 ; //10% 가격을 인상!
});
var filteredData = data.filter(function(v) {
return v.price > 5000; //5000원이상만 추출
});
var filteredData = data.filter(function(v) {
return v.price > 5000;
}).map(function(v) {
v.price = (''+v.price).replace(/^(\d+)(\d{3})$/, "$1,$2원");
return v;
});
immutable 원본 데이터 유지
원래의 data 값은 그대로 유지되면서 새로운 배열만 확인
var filteredData = data.filter(function(v) {
return v.price > 5000;
}).map(function(v) {
var obj = {};
obj.title = v.title;
obj.content = v.content;
obj.price = (''+v.price).replace(/^(\d+)(\d{3})$/, "$1,$2원");
return obj;
});
reduce
배열의 모든 요소에 대해 지정된 콜백 함수 호출하여
그 반환 값을 누적하여 돌려주는 함수
reduce 함수의 매개변수로 콜백함수와, 누적의 초기값이 있음
초기값은 선택사항
아래 코드는 상품의 가격을 모두 합한 값을 반환
var totalPrice = data.reduce(function(prevValue, product) {
return prevValue + product.price; }, 0);
console.log(totalPrice);
728x90
반응형
'Web > Frontend' 카테고리의 다른 글
jQuery 프레임워크에 대해 (0) | 2021.07.01 |
---|---|
[JS] 객체리터럴, this, bind() (0) | 2021.07.01 |
HTML Templating (0) | 2021.06.11 |
Tab UI Component (0) | 2021.06.11 |
[CSS] float (0) | 2021.05.27 |