0%

Javascript 배열

자바스크립트 배열 정리

배열 요소 조작

배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하기

push : 마지막요소 추가하기
pop : 마지막요소 제거하기
unshift : 첫번째요소 추가하기
shift : 첫번째요소 제거하기

1
2
3
4
5
const arr = [2,3,4];
arr.push(5); // [2,3,4,5]
arr.pop(); // [2,3,4]
arr.unshift(1); // [1,2,3,4]
arr.unshift(); // [2,3,4]

배열의 끝에 여러요소 추가하기

concat은 배열 끝에 요소를 추가한 사본 반환을합니다.

1
2
3
4
const arr = [1,2,3];
arr.concat(4,5,6); // [1,2,3,4,5,6] arr은 바뀌지 않습니다.
arr.concat([4,5,6]); // [1,2,3,4,5,6] arr은 바뀌지 않습니다.
arr.concat([4,[5,6]]); // [1,2,3,4,[5,6]] arr은 바뀌지 않습니다.

concat은 제공받은 배열은 한번만 분해하며, 배열 안에 있는 배열을 다시 분해하지 않습니다.

배열 일부 가져오기

slice는 배열의 일부를 가져올때 사용합니다. 매개변수는 두개를 받으며, 첫번째 매개변수는 어디서부터 가져올지를, 두번째 매개변수는 어디까지 가져올지를(바로 앞 인덱스까지 가져옵니다) 지정합니다.

1
2
3
4
5
6
const arr = [1,2,3,4,5];
arr.slice(3); // [4,5] arr은 바뀌지 않습니다.
arr.slice(2,4); // [3,4] arr은 바뀌지 않습니다.
arr.slice(-2); // [4,5] arr은 바뀌지 않습니다.
arr.slice(1,-2); // [2,3] arr은 바뀌지 않습니다.
arr.slince(-2,-1); // [4] arr은 바뀌지 않습니다.

임의의 위치에 요소 추가하거나 제거하기

splice는 배열을 자유롭게 수정할 수 있습니다. 첫번째 매개변수는 수정시작 인덱스, 두번째 매개변수는 제거할 요소 숫자입니다. 아무 요소를 제거하지 않을 때는 0을 넘깁니다. 나머지 매개변수는 배열에 추가될 요소입니다.

1
2
3
4
5
const arr = [1,5,7];
arr.splice(1,0,2,3,4); // [1,2,3,4,5,7] arr은 변경됩니다.
arr.splice(5,0,6); // [1,2,3,4,5,6,7] arr은 변경됩니다.
arr.splice(1,2); // [1,4,5,6,7] arr은 변경됩니다.
arr.splice(2,1,'a','b'); // [1,4,'a','b',6,7] arr은 변경됩니다.

배열 안에서 요소 교체하기

copyWithin은 배열요소를 복사해 다른위치에붙여놓고, 기존의 요소를 덮어씁니다. 첫 번째 매개변수는 복사한 요소를 붙여넣을 위치이고, 두번째 매개변수는 복사를 시작할 위치이고, 세번 쨰 매개변수는 복사를 끝낼 위치입니다.

1
2
3
4
const arr = [1,2,3,4];
arr.copyWithin(1,2); // [1,3,4,4]
arr.copyWithin(2,0,2); // [1,3,1,3]
arr.copyWithin(0,-3,-1); // [3,1,1,3] ?? 받아지지가 않는다...

특정 값으로 배열 채우기

fill은 정해진 값으로 배열을 채웁니다. Array생성자와 잘 어울립니다. 일부만 채울경우, 시작 끝 인덱스를 지정하면됩니다.

1
2
3
4
const arr = new Array(5).fill(1); // [1,1,1,1,1];
arr.fill("a"); // ["a","a","a","a","a"]
arr.fill("b",1); // ["a","b","b","b","b"]
arr.fill("c",2,4); // ["a","b","c","c","b"]

배열 정렬과 역순 정렬

reverse는 요소 순서를 반대로 바꿉니다.

1
2
const arr = [1,2,3,4,5];
arr.reverse(); // [5,4,3,2,1]

sort는 배열 요소의 순서를 정렬합니다.

1
2
const arr = [5,4,3,2,1];
arr.sort(); // [1,2,3,4,5]

map과 filter

map과 filter는 모두 사본을 반환합니다.

map

일정한 형식의 배열을 다른 형식으로 바꾸고 싶을때 사용합니다.

1
2
3
4
const cart = [{name:"MAC", price:100}, {name:"PC", price:200}];
const names = cart.map(x => x.name);
const prices = cart.map(x => x.price);
const discountPrice = cart.map(x => x*0.8);

filter

배열이 필요한 것들만 남길 목적으로 만들어졌습니다.

1
2
const arr = [1,2,3,4,5];
arr.filter(x % 2 === 0); // [2,4]

join

배열의 문자열 요소들을 몇몇 구분자로 합치려할때 사용합니다.

1
2
3
4
const arr = [1, null, "hello", "world", true, undefined];
arr.join(); // "1,,hello,world,true,"
arr.join(''); // "1helloworldtrue"
arr.join('-'); // "1-hello-world-true"