Web/Frontend

[JS] 배열 메소드

WakaraNai 2021. 7. 1. 15:42
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