배열 (2)
배열 (2)
1. sort
배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.
Array.prototype.sort() - JavaScript | MDN
1): sort 기본
1. sort 기본
{
const data = [10,50,20,60,80,90];
data.sort();
console.log(data); // 문자열 유니코드로 정렬
}
=>결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[ 10, 20, 50, 60, 80, 90 ]
[Done] exited with code=0 in 0.059 seconds
----------------------------------------------------------------------------
2. sort 자릿수 정렬
{
const data = [100,150,120,610,80,90];
data1.sort();
console.log(data); // 이렇게 하면 자릿수대로 분류를 하기때문에 정렬이 되지않는다
}
=>결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[ 100, 120, 150, 610, 80, 90 ]
[Done] exited with code=0 in 0.056 seconds
----------------------------------------------------------------------------
3. 오름차순 해결 방법 (1)
{
// 오름 차순 정렬
const data = [100,150,120,610,80,90];
data.sort(function(a,b){
if(a>b){
return 1
}else if(a<b){
return -1
}else{
//a,b가 같았을때
return 0
}
});
console.log(data);
}
=>결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[ 80, 90, 100, 120, 150, 610 ]
[Done] exited with code=0 in 0.054 seconds
----------------------------------------------------------------------------
3-1. 오름차순 해결 방법 (2)
{
const data = [100,150,120,610,80,90];
data.sort((a,b)=>a-b); // 결과값이 하나 일때 return 생략
console.log(data);
}
=>결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[ 80, 90, 100, 120, 150, 610 ]
[Done] exited with code=0 in 0.052 seconds
----------------------------------------------------------------------------
4. 내림 차순 해결
{
// 내림 차순 정렬
const data = [100,150,120,610,80,90];
data.sort(function(a,b){
if(a>b){
return -1
}else if(a<b){
return 1
}else{
//a,b가 같았을때
return 0
}
});
console.log(data);
}
=>결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[ 610, 150, 120, 100, 90, 80 ]
[Done] exited with code=0 in 0.065 seconds
2): sort 활용
1. 기본 출력
{
const obj = [
{name:'철수',age:22},
{name:'영희',age:25},
{name:'훈이',age:27},
{name:'짱구',age:26},
{name:'유리',age:21},
{name:'맹구',age:22},
{name:'민지',age:25},
{name:'재석',age:21},
{name:'다미',age:22},
]
obj.sort((a,b)=>{
if(a.age>b.age){
return 1;
}else if(a.age<b.age){
return -1;
}else{
return 0;
}
})
console.log(obj);
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[
{ name: '유리', age: 21 },
{ name: '재석', age: 21 },
{ name: '철수', age: 22 },
{ name: '맹구', age: 22 },
{ name: '다미', age: 22 },
{ name: '영희', age: 25 },
{ name: '민지', age: 25 },
{ name: '짱구', age: 26 },
{ name: '훈이', age: 27 }
]
[Done] exited with code=0 in 0.068 seconds
----------------------------------------------------------------------------
2. 삼항연산으로 출력
{
const obj = [
{name:'철수',age:22},
{name:'영희',age:25},
{name:'훈이',age:27},
{name:'짱구',age:26},
{name:'유리',age:21},
{name:'맹구',age:22},
{name:'민지',age:25},
{name:'재석',age:21},
{name:'다미',age:22},
]
obj.sort((a,b)=>{
//삼항연산자 조건 ? true : false
return a.age > b.age ? 1 : a.age < b.age ? -1 : 0
});
console.log(obj);
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[
{ name: '유리', age: 21 },
{ name: '재석', age: 21 },
{ name: '철수', age: 22 },
{ name: '맹구', age: 22 },
{ name: '다미', age: 22 },
{ name: '영희', age: 25 },
{ name: '민지', age: 25 },
{ name: '짱구', age: 26 },
{ name: '훈이', age: 27 }
]
[Done] exited with code=0 in 0.068 seconds2. filter
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
조건에 맞는 값을 출력할 때 , 결과가 배열로 출력
Array.prototype.filter() - JavaScript | MDN
1): filter 기본
/* 3의 배수만 출력 */
{
const arr = [10,30,50,20,60,40];
const result1 = arr.filter((element,index,arr)=>{
// element 요소값 , index 인덱스번호 , arr 배열값
return element % 3 ==0;
});
console.log(result1);
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[ 30, 60 ]
==================================
[Done] exited with code=0 in 0.089 seconds
----------------------------------------------------------------------------
/* filter,indexOf 를 이용해서 김이 들어가있는 값을 출력 */
{
const arr = ['강호동','유재석','이수근','김희철','이효리','김다미']
const txt = '김';
//
const result = arr.filter(item=>item.indexOf(txt)!=-1)
console.log(result);
}
=>결과값
[Running] node "/workspaces/codespaces-blank/index.js"
[ '김희철', '김다미' ]
[Done] exited with code=0 in 0.053 seconds2): filter 활용
/* 영희 삭제하고 나머지만 출력 */
{
const data = [
{name:'철수',age:22,city:'제주'},
{name:'영희',age:25,city:'서울'},
{name:'훈이',age:27,city:'대전'},
{name:'짱구',age:26,city:'대구'},
{name:'맹구',age:22,city:'부산'},
];
const data4 = data.filter((item)=>{
return item.name != '영희'
});
for(let item of data4){
console.log(item.name,item.age,item.city)
};
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
철수 22 제주
훈이 27 대전
짱구 26 대구
맹구 22 부산
[Done] exited with code=0 in 0.056 seconds
----------------------------------------------------------------------------
/* 이름이 '구'가 들어간 데이터만 출력 */
{
const data = [
{name:'철수',age:22,city:'제주'},
{name:'영희',age:25,city:'서울'},
{name:'훈이',age:27,city:'대전'},
{name:'짱구',age:26,city:'대구'},
{name:'맹구',age:22,city:'부산'},
];
const txt = '구';
// includes,forEach 활용
const data1 = data.filter(item=>item.name.includes(txt));
// console.log(data1);
data1.forEach(item=>console.log(item))
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
{ name: '짱구', age: 26, city: '대구' }
{ name: '맹구', age: 22, city: '부산' }
[Done] exited with code=0 in 0.064 seconds
3. find,findIndex
1). find : 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
Array.prototype.find() - JavaScript | MDN
2). findIndex: 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환
Array.prototype.findIndex() - JavaScript | MDN
/* 40인 데이터 한개만 출력 */
{
const arr = [10,20,30,40,50];
const arr3 = arr.find((item)=>{
return item==40;
})
console.log(arr3);
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
40
[Done] exited with code=0 in 0.054 seconds
----------------------------------------------------------------------------
/* 30인 인덱스번호 출력 */
{
const arr = [10,20,30,40,50];
const arr5 =arr.findIndex(item=>item==30);
console.log(arr5); // 해당 데이터의 인덱스 번호를 출력
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
2
[Done] exited with code=0 in 0.129 seconds
4. map
배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다
반환값: 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.
callback: 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
(1): currentValue: 처리할 현재 요소.
(2): index Optional: 처리할 현재 요소의 인덱스.
(3): array Optional: map()을 호출한 배열.
(4): thisArg Optional: callback을 실행할 때 this로 사용되는 값.
Array.prototype.map() - JavaScript | MDN
/* map으로 callback 함수 출력 */
{
const arr = [10,20,30,40,50,60];
//map => react에서 화면에 반복(for문)처럼 출력하기 위해 사용. (새로운 배열 생성)
const arr1 = arr.map(function(current,index,array){
console.log('current:',current,'index:',index,'array:',array);
return current
})
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
current: 10 index: 0 array: [ 10, 20, 30, 40, 50, 60 ]
current: 20 index: 1 array: [ 10, 20, 30, 40, 50, 60 ]
current: 30 index: 2 array: [ 10, 20, 30, 40, 50, 60 ]
current: 40 index: 3 array: [ 10, 20, 30, 40, 50, 60 ]
current: 50 index: 4 array: [ 10, 20, 30, 40, 50, 60 ]
current: 60 index: 5 array: [ 10, 20, 30, 40, 50, 60 ]
[Done] exited with code=0 in 0.079 seconds
----------------------------------------------------------------------------
/* map 데이터 출력 */
{
const arr = [10,20,30,40,50];
//arr을 map으로 처리 템플릿 리터널
const arr1 = arr.map(function(item){
return (`${item}`)
})
console.log(arr1.join(''))
}
=>결과값
[Running] node "/workspaces/codespaces-blank/index.js"
1020304050
[Done] exited with code=0 in 0.054 seconds5. forEach
주어진 함수를 배열 요소 각각에 대해 실행
반환값: undefined
callback: 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
(1): currentValue: 처리할 현재 요소.
(2): index Optional: 처리할 현재 요소의 인덱스.
(3): array Optional: forEach()을 호출한 배열.
(4): thisArg Optional: callback을 실행할 때 this로 사용되는 값.
Array.prototype.forEach() - JavaScript | MDN
/* forEach 데이터 출력 */
{
const arr = [0,1,2,3,4,5,6,7,8,9,10];
arr.forEach(function (element,index,array){
console.log(`${array}의 ${index}번째의 요소는 ${element}`);
});
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
0,1,2,3,4,5,6,7,8,9,10의 0번째의 요소는 0
0,1,2,3,4,5,6,7,8,9,10의 1번째의 요소는 1
0,1,2,3,4,5,6,7,8,9,10의 2번째의 요소는 2
0,1,2,3,4,5,6,7,8,9,10의 3번째의 요소는 3
0,1,2,3,4,5,6,7,8,9,10의 4번째의 요소는 4
0,1,2,3,4,5,6,7,8,9,10의 5번째의 요소는 5
0,1,2,3,4,5,6,7,8,9,10의 6번째의 요소는 6
0,1,2,3,4,5,6,7,8,9,10의 7번째의 요소는 7
0,1,2,3,4,5,6,7,8,9,10의 8번째의 요소는 8
0,1,2,3,4,5,6,7,8,9,10의 9번째의 요소는 9
0,1,2,3,4,5,6,7,8,9,10의 10번째의 요소는 10
[Done] exited with code=0 in 0.057 seconds
----------------------------------------------------------------------------
/* forEach 데이터 출력 */
{
const arr = [0,1,2,3,4,5,6,7,8,9,10];
arr.forEach((item,i)=>{
if(i==4){
console.log("반복문 중단")
// break
// continue
/* break,continue문은 forEach문에서 사용할 수 없다 */
}
console.log(`${[i]}번째 요소 =>${arr[i]}`)
})
}
=>결과값
[Running] node "/workspaces/codespaces-blank/index.js"
0번째 요소 =>0
1번째 요소 =>1
2번째 요소 =>2
3번째 요소 =>3
반복문 중단
4번째 요소 =>4
5번째 요소 =>5
6번째 요소 =>6
7번째 요소 =>7
8번째 요소 =>8
9번째 요소 =>9
10번째 요소 =>10
[Done] exited with code=0 in 0.055 seconds5. reduce
배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환.
반환 값: 누적 계산의 결과 값.
Array.prototype.reduce() - JavaScript | MDN
1): 리듀서 함수는 네 개의 인자를 가집니다.
(1): 누산기 (acc)
(2): 현재 값 (cur)
(3): 현재 인덱스 (idx)
(4): 원본 배열 (src)
2): callback: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.
(1): accumulator:누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
(2): currentValue: 처리할 현재 요소.
(3): currentIndex Optional: 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
(4): array Optional: reduce()를 호출한 배열.
(5): initialValue Optional: callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.
/* reduce 데이터 출력 */
{
let arr = [10,20,30,40];
let total = arr.reduce(function(acc,cur,idx,src){
console.log(acc);
console.log("--------------------")
console.log(cur);
console.log("--------------------")
console.log(idx);
console.log("--------------------")
console.log(src);
return acc+cur
})
console.log(`합:${total}`);
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
accumulator: 10 콜백반환값
--------------------
currentValue: 20 현재요소
--------------------
currentIndex: 1 인덱스
--------------------
array: [ 10, 20, 30, 40 ] 배열
accumulator: 30 콜백반환
--------------------
currentValue: 30 현재요소
--------------------
currentIndex: 2 인덱스
--------------------
array: [ 10, 20, 30, 40 ] 배열
accumulator: 60
--------------------
currentValue: 40 현재요소
--------------------
currentIndex: 3 인덱스값
--------------------
array: [ 10, 20, 30, 40 ] 배열
합:100
[Done] exited with code=0 in 0.061 seconds