[javascript] 배열 정렬 / forEach() / map() / filter()

[javascript] 배열 정렬 / forEach() / map() / filter()

---

✔️ 배열 정렬하기

: sort() : 기본적으로 문자의 유니코드 코드 포인터값에 따라 사전식 배열

var a = ["BBA", "BC", "CC", "ABC"];
a.sort(); //유니코드 값의 사전식 정렬
console.log(a.join()); // ABC BBA BC CC

 

- but! 숫자는 sort() 배열시, 아래와 같이 잘못 배열될 수 있다.

var b = [55,7,10,35,40];
//숫자는 이렇게 하면 xx
b.sort(); // 각 요소를 문자열로 변환하여 유니코드 값의 사전식 배열
console.log(b.join()); //10,35,40,55,7 유니코드 포인터값에 따라!!

💡 숫자를 sort 하면, 각 요소를 문자열로 변환해서 사전식 배열하기 때문이다.

 

📓 sort 안에 정렬의 기준을 넣은 것!! 보다 정확하게 배열할 수 있다.

- 오름차순

var c = ["BBA", "BC", "CC", "ABC"];
c.sort(function(a,b) {
	if( a > b) return 1;
	else if(a < b) return -1;
	else return 0;
})
console.log(c.join()); // ABC BBA BC CC

💡 sort ()  가로 안에 함수 만들어서 정렬 기준을 줄 수 있다.
그리고, 자바스크립트는 문자열도 부등호 비교가 가능하다.!!!!!!!!!!!!!!!!

 

- 내림차순

var d = ["BBA", "BC", "CC", "ABC"];
//내림차순
d.sort(function(x,y) {
	if( x > y) return -1;
	else if(x < y) return 1;
	else return 0;
})
console.log(d.join()); // CC,BC,BBA,ABC

 

 

📓 숫자 오름차순과 숫자 내림차순

//숫자오름차순
var e = [55,7,10,35,40];
/* e.sort(function(x,y){
	return x-y;
}); */

e.sort((x,y)=> x-y);
console.log(e.join()); //7,10,35,40,55

//숫자내림차순
var f = [55,7,10,35,40];

f.sort((x,y)=> -(x-y));
console.log(f.join()); //55,40,35,10,7

 

 

✔️ forEach

: 배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백 함수를 실행한다.

: 반환값은 undefined 이다.

: 콜백 함수의 매개변수를 통해 배열 요소의 값, 요소 인덱스, forEach 메소드를 호출한 배열 즉 this 를 전달 받을 수 있다.

: 해당 메소드는 원본 배열을 변경하지 않지만, 콜백 함수는 원본 배열을 변경할 수 있다.

: for 문과 달리 break 문 사용불가 ❌  즉, 중간에 순회 중단 불가! 

 

📓 특징

- IE는 IE 9이상부터 사용 가능하다.

- 성능은 for 문보다 느리지만 가독성이 높다.

var a = [1,2,3,4,5];
var s = 0;


//forEach 는 인자 값 만큼 실행한다.
a.forEach( function(item) {
	s += item;
});
console.log(s);

var b = [10,20,30,40,50];
b.forEach(function(item, index){ //item: 각각의요소값, index: 첨자
	console.log(item, index); // 10 0  20 1  30 2  40 3  50 4
});

💡 모~든 배열 순회하기 때문에, 인자가 있는 만큼 실행한다.
item : 각각의 요소
index : 첨자

 

 

✔️ map

: 배열을 순회하며, 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값으로 새로운 배열을 생성하여 반환한다.

: 이때, 원본 배열은 변경되지 않음 ❌❌ 

: map 메소드는 배열을 순회하며 요소 값을 다른 값으로 매핑하기 위한 함수이다.

: 실행한 callback 의 결과를 모은 새로운 배열을 반환한다.

 

📓 특징

- IE는 IE 9 이상부터 사용 가능하다.

var a = [1,2,3,4,5];
var b = [];

b = [];
a.forEach((item, index) => {return b[index] = item*2});
//b.push(item*2);
console.log(b);
console.log('-------------c 시작');

//배열의 각각의 요소에 대하여 순차적으로 주어진 함수를 실행한 반환값을 모아 새로운 배열을 반환
/* var c = a.map(function(item){
	return item*2;
}); */
//화살표
var c = a.map((item)=> item*2);
console.log(c.join());
console.log('-------------');

//원래 배열 a는 건들지 않는다.
var d = a.map((item,index)=> index%2===0 ? item : item *2);
console.log(d.join());

💡 배열의 각각의 요소에 대하여 순차적으로 주어진 함수를 실행한 반환값을 모아 새로운 배열을 반환

 

 

✔️ filter

: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환한다.

: IF 문을 대채할 수 있다~

: 배열을 순화하며 각 요소에 대하여 인자로 주어진 콜백 함수의 실행 결과가 true 인 배열 요소의 값만을 추출한 새로운 배열을 반환한다.

 

📓 특징

- IE는 IE 9 이상부터 사용 가능하다.

 

- a 배열 요소의 값 중 홀수만 가지고 새로운 배열 만들기

- for 문 이용하기

for(let i=0; i<a.length; i++){
	//a[i]%2 0이 아니면 참이니까 그냥 씀!
	if( a[i]%2 ) {
		b.push(a[i]);
	}
}

 

- forEach 이용하기

a.forEach(function(item) {
	if(item%2){
		b.push(item);
	}
});

 

- 조건에 만족하는 요소만으로 새로운 배열 작성 - filter();

b = a.filter(function(item,index){
	 return item%2;
	 //어차피 결과는 0 아니면 1인데 참은 1값이므로 item%2 만으로 실행된다.
 });