on
자바스크립트 자주쓰는 5가지 기능 // forEach 반복문 // map 반복문...
자바스크립트 자주쓰는 5가지 기능 // forEach 반복문 // map 반복문...
728x90
1. forEach, map, filter, sort, reduce 5가지 기능 연습하기
위 5가지 기능은 배열데이터에서 한개의 원소를 전달하여 처리한다.
에를 배열 [1,2,3]이 있다고 하면 1를 보내고 다음 2를 보내고 마지막 3을 보내 처리한다.
이와같이 json 데이터 [{'a':1}. {'b':2}, {'c':3}]도 마찬가지로 {'a':1}를 보내고 {'b':2}를 보내고 {'c':3}를 마지막으로 전달하여 처리한다.
forEach 반복문 // map 반복문 // filter 조건문 // sort 정렬하기 // reduce 합산하기
1) json 데이터 예제
const companies = [{
"name": "Buzzster",
"category": "Granite Surfaces",
"end": 2003,
"start": 1994
},
{
"name": "Riffwire",
"category": "Construction Clean and Final Clean",
"end": 2000,
"start": 1994
},
{
"name": "Avamm",
"category": "Landscaping & Irrigation",
"end": 1986,
"start": 1993
},
{
"name": "Innojam",
"category": "Marlite Panels (FED)",
"end": 1998,
"start": 2003
},
{
"name": "Tazzy",
"category": "Exterior Signage",
"end": 2012,
"start": 1998
},
{
"name": "Eimbee",
"category": "Framing (Steel)",
"end": 2008,
"start": 1993
},
{
"name": "Chatterbridge",
"category": "Retaining Wall and Brick Pavers",
"end": 2004,
"start": 2011
},
{
"name": "Rhynoodle",
"category": "Marlite Panels (FED)",
"end": 1994,
"start": 1998
}, {
"name": "Topicstorm",
"category": "Marlite Panels (FED)",
"end": 2004,
"start": 1995
}, {
"name": "Shuffledrive",
"category": "Framing (Wood)",
"end": 2003,
"start": 1999
}
]
2) 배열형태의 데이터 예제
const ages = [12, 39, 50, 30, 5, 33, 29, 50, 25, 15]
let list = document.querySelector("#list")
console.log(list)
// for loop
for (let i = 0; i < companies.length; i++) {
console.log(companies[i])
}
// forEach 첫번째 방식
companies.forEach(function (com, index) {
console.log(index)
console.log(com)
});
// forEach 두번째 방식
const test = []
companies. forEach (com => test.push(com.start + 1000))
// json데이터를 웹페이지에 리스트로 표현하는 방법
list.innerHTML = ''
companies. forEach (com => list.innerHTML += `${com.name}
${com.category}${com.start}${com.end}
`);
// map 방식
// map 방식도 forEach와 유사하다.
companies.map(function(val, index){
console.log(val)
console.log("map 방식")
})
companies. map (val => console.log(val))
companies. map (val => list.innerHTML+=`${val.name}`)
ages.map(age => console.log(age))
const testmap= companies
.map(com => com.start -com.end)
.map(com => com - 1)
console.log(testmap)
// filter 방식
// for 반복문 결과 출력하기
for(let i=0; i
if(ages[i] >=20 ){
console.log(ages[i])
}
}
// for 반복문 결과 저장하기
let canDrink=[]
for(let i=0; i
if(ages[i] >=20 ){
console.log(ages[i])
canDrink.push(ages[i])
}
}
// filter 이용 결과 저장
// 기존 함수방식 이용
let canDrink1 = ages.filter(function(age){
if (age >=20){
return true;
}
})
// 애로우 함수 이용
canDrink1=ages. filter (age=> age >= 20)
console.log(canDrink1)
const tenyear = companies.filter(com => ((com.end - com.start) > 10))
console.log(tenyear)
// sort 방식
//오름차순
let sorted_age =ages. sort ((a,b) => a-b )
console.log(sorted_age)
//내림차순
sorted_age =ages. sort ((a,b) => b-a )
console.log(sorted_age)
// 회사 시작년도별 오름차순
let sorted_com = companies.sort((c1,c2)=> c1.start - c2.start)
console.log(sorted_com)
// reduce 방식
//for 반복문으로 총합 계산하기
let sum=0
for(let i=0; i
sum += ages[i]
}
console.log(sum)
// reduce 이용하 총합 구하기
let total_age = ages. reduce ((age, total) => (age + total), 0)
console.log(total_age)
728x90
반응형
from http://ecogis.tistory.com/181 by ccl(A) rewrite - 2021-09-11 14:01:33