slice, concat, forEach + 원본을 바꾸는 매서드, 바꾸지 않는 매서드

*출처 : https://ko.javascript.info/array-methods

배열과 메서드

 

* arr.slice([start], [end])

- start 인덱스부터 end 인덱스까지의 요소를 복사한 새로운 배열 반환

- start, end가 둘 다 음수 일때 배열 끝에서 요소 개수 의미

- str.slice와 유사한데 차이점 : 서브 배열(subarray) 배열 반환

- arr.slice()는 인수를 하나도 넘기지 않고 호출하여 arr의 복사본을 만들 수 있음

 

let arr = ['t', 'o', 'p', 'g', 'u', 'n'];

console.log(arr.slice(1, 3)); //['o', 'p']
console.log(arr.slice(-2)); //['u', 'n']

 

* arr.concat(arg1, arg2...);

- 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가할 때 사용

- concat 메서드는 배열의 모든 요소를 복사하고 item을 추가해 새로운 배열을 만든 후 이를 반환

- arg1, arg2가 배열이면 이 배열의 인수를 기존 배열에 더함

 

let arr = [1, 2];

console.log(arr.concat([3, 4])); //[,1, 2, 3, 4];
console.log(arr.concat([3, 4], [5, 6]); //[,1, 2, 3, 4, 5, 6];
console.log(arr.concat([3, 4], 5, 6)); //[,1, 2, 3, 4, 5, 6];

 

 

* arr.forEach()

- 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌(반복문 같음)

- arr.forEach(function(item, index, arr) {}

 

const arr = ['topgun', 'navy', 'captin', 'maverick'];

arr.forEach((item, index, array) => {
    console.log(`item : ${item} / index: ${index} / array : ${array[index]}`);
});

//결과
item : topgun / index: 0 / array : topgun
item : navy / index: 1 / array : navy
item : captin / index: 2 / array : captin
item : maverick / index: 3 / array : maverick

 

* arr.includes(item, from)

- 인덱스 from 부터 시작해 item이 있는지 검색하는데 해당 요소를 발견하면 숫자로 반환

- 요소의 위치를 정확히 알고 싶은 게 아니라 요소가 배열 내에 존재하는 지 여부만 확인

let topGun1 = ['maverick', 'goose', 'iceman'];
let topGun2 = ['maverick', 'iceman'];

console.log(topGun1.indexOf('maverick')); //0 (true)
console.log(topGun2.indexOf('goose')); //-1 (false)

 

 

* 원본을 바꾸지 않는 배열 매서드

= concat, slice, every, map, find, findIndex, includes

 

* 원본을 바꾸는 배열 매서드

= push, pop, unshift, shift, splice, sort

 

 

* 카드 뒤집기에서 slice, concat, forEach 사용

//concat
const total = 12;
const colors = ['red', 'orange', 'yellow', 'green', 'white', 'pink'];
let colorCopy = colors.concat(colors);

console.log(colorCopy); //2개씩 뒤집기 위해 colors는 6가지지만 colorCopy는 12개

//concat & splice
const shuffled = [];
const colors = ['red', 'orange', 'yellow', 'green', 'white', 'pink'];
let colorCopy = colors.concat(colors);

for(let i=0; colorCopy.length > 0; i+= 1) {
	const randomIndex = Math.floor(Math.random() * colorCopy.length);
    shuffled = shuffled.concat(colorCopy.splice(randomIndex, 1));
}

console.log(shuffled); //12개의 색상값들이 랜덤하게 섞임


//forEach
document.querySelectorAll('.card').forEach((card, index) => {
	setTimeout(() => {
    	card.classList.add('flipped'); //flipped 부분은 css 부분
    }, 1000 + 100 * index); //1초 -> 1.1초 -> 1.2초 ...
})

setTimeout(() => {
	document.querySelectorAll('.card').forEach((card) => {
    	card.classList.remove('flipped');
    })
}, 5000);