[JS] 배열 활용 map, - 혼자만의 사랑

JavaScript를 만들 때 자주 사용하는 배열 조작 방법을 소개하겠습니다.

알고 보면 쓸 일이 많다.

아래 링크에서 더 자세한 내용과 내용을 보실 수 있습니다.

배열 – JavaScript | MDN

JavaScript 배열 클래스는 목록 형식의 상위 수준 개체인 배열을 만드는 데 사용되는 전역 개체입니다.

developer.mozilla.org

* 아래 나열된 모든 친구는 원래 편곡을 변형하지 않습니다.

쉬운 목차

#1 카드

arr.map(callback(currentValue(, index(, array)))(, thisArg))

공식 문서에는 그렇게 설명되어 있습니다.

이것을 보고 이해하는 사람은 아마 이 글을 읽지 않고도 할 수 있을 것입니다.

Map 메서드는 배열을 반복하고 현재 값, 현재 값의 인덱스 및 회전된 배열을 콜백으로 반환합니다.

그리고 콜백에서 반환된 값으로 새로운 배열을 생성합니다.

const temp = (
	{ id: 1, name: '홍길동', age: 20 },
    { id: 2, name: '고길동', age: 30 },
    { id: 3, name: '둘리', age: 10 },
    { id: 4, name: '햄토리', age: 40 },
    { id: 5, name: '루피', age: 50 }
);

const newArr = temp.map((item, index) => {
	return item.id;
});

console.log(newArr);
//출력
// (1,2,3,4,5)

console.log(temp);
//출력
//(
	{ id: 1, name: '홍길동', age: 20 },
    { id: 2, name: '고길동', age: 30 },
    { id: 3, name: '둘리', age: 10 },
    { id: 4, name: '햄토리', age: 40 },
    { id: 5, name: '루피', age: 50 }
)

#2 필터

arr.filter(callback(element(, index(, array)))(, thisArg))

필터는 크게 다르지 않습니다.

똑같은 것 현재 값, 현재 값의 인덱스 및 콜백으로 회전되는 배열을 반환합니다.

true인 콜백의 반환 값을 수집하여 배열로 만듭니다.

const temp = (
	{ id: 1, name: '홍길동', age: 20 },
    { id: 2, name: '고길동', age: 30 },
    { id: 3, name: '둘리', age: 10 },
    { id: 4, name: '햄토리', age: 40 },
    { id: 5, name: '루피', age: 50 }
);

const newArr = temp.filter((item, index) => {
	return item.age <= 20;	// item의 age가 20보다 작거나 같으면 true 리턴
});

console.log(newArr);
//출력
// (
	{ id: 1, name: '홍길동', age: 20 },
	{ id: 3, name: '둘리', age: 10 }
)

console.log(temp);
//출력
//(
	{ id: 1, name: '홍길동', age: 20 },
    { id: 2, name: '고길동', age: 30 },
    { id: 3, name: '둘리', age: 10 },
    { id: 4, name: '햄토리', age: 40 },
    { id: 5, name: '루피', age: 50 }
)

#3 감소

arr.reduce(callback(, initialValue))

솔직히 공식 문서를 보면 좀 이상해 보인다.

어큐뮬레이터, 현재 값, 현재 값의 인덱스 및 콜백으로 회전되는 배열을 반환합니다.

일반적으로 숫자의 모든 행을 더할 때 B열에 중복 값을 제거할 때 사용할 수 있습니다.

const temp1 = (1, 2, 3, 4, 5);

const temp2 = (
	{ id: 1, name: '홍길동', age: 20, type: 'history' },
    { id: 2, name: '고길동', age: 30, type: 'babyDooly' },
    { id: 3, name: '둘리', age: 10, type: 'babyDooly' },
    { id: 4, name: '햄토리', age: 40, type: 'hemtaro' },
    { id: 5, name: '루피', age: 50, type: 'onepiece' }
);

const newArr1 = temp1.reduce(reducer);

const newArr2 = temp1.reduce(reducer, 10);	//초기값을 지정해줄 수도 있다.



const newArr3 = temp.reduce((acc, current, index) => {
	if( acc.findIndex(type => type === current.type) === -1 ) {
    	// acc안에 같은 값이 없을때만 acc에 추가
    	acc.push(current.type);
    }
    return acc;
}, ());


console.log(newArr1);
//출력
// 15;

console.log(newArr2);
//출력
// 25;

console.log(newArr3);
//출력
// ('history', 'babyDooly', 'hemtaro', 'onepiece');

#4 모두를 위한

arr.forEach(callback(currentvalue(, index(, array)))(, thisArg))

배열을 생성하지 않는다는 점을 제외하면 map과 동일합니다.

forEach 메서드는 배열을 반복하고 현재 값, 현재 값의 인덱스 및 회전된 배열을 콜백으로 반환합니다.

for 문 대신 멋지게 보이도록 사용할 수 있다고 생각합니다.

const temp = (
	{ id: 1, name: '홍길동', age: 20 },
    { id: 2, name: '고길동', age: 30 },
    { id: 3, name: '둘리', age: 10 },
    { id: 4, name: '햄토리', age: 40 },
    { id: 5, name: '루피', age: 50 }
);

const newArr1 = ();
const newArr2 = ();

for(const i = 0; i < temp.length; i++) {
	newArr1.push(temp(i).id);
}

temp.forEach((item, index) => {
	newArr2.push(item.id);
});

console.log(newArr1);
//출력
// (1,2,3,4,5)

console.log(newArr2);
//출력
// (1,2,3,4,5)

찾기 #5

arr.find(callback(, thisArg))

find는 현재 값이고, 현재 가치 색인, 미쳤다 콜백으로 배열을 반환합니다.

매우 고마운 친구입니다.

조건을 만족하는 배열의 첫 번째 요소를 반환합니다.

const temp = (
	{ id: 1, name: '홍길동', age: 20 },
    { id: 2, name: '고길동', age: 30 },
    { id: 3, name: '둘리', age: 10 },
    { id: 4, name: '햄토리', age: 40 },
    { id: 5, name: '루피', age: 50 }
);

const newElement = temp.find((item, index) => item.id === 2);


console.log(newElement);
// 출력
// { id: 2, name: '고길동', age: 30 }