자바스크립트 array

JS
javascript, array, 배열

배열의 기초

  • 배열은 객체와 달리 순서가 있는 집합, 0으로 시작하는 숫자형 인덱스 사용
  • 한 배열의 요소가 모두 같은 타입일 필요는 없음
  • 배열 리터럴은 대괄호로 만들고 배열요소에 인덱스로 접근할 때도 대괄호를 사용
  • 배열에 요소가 몇개 있는지 나타내는 length프로퍼티가 있음
  • 배열 길이보다 큰 인덱스를 사용하여 요소를 할당하면 배열은 자동적으로 인덱스에 맞게 늘어남. 빈자리는 undefined로 채워짐
  • array생성자로 배열을 만들 수 있지만 그렇게 해야하는 경우는 별로 없음

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

push, pop, unshift, shift

1
2
3
4
5
6
const arr = ["b", "c", "d"];
undefined
arr.push("e");  // (4) ["b", "c", "d", "e"]
arr.pop();  //"e", (3) ["b", "c", "d"]
arr. unshift("a");  //(4) ["a", "b", "c", "d"]
arr.shift();    //"a", (3) ["b", "c", "d"]

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

concat
concat메서드는 배열 끝에 료소를 추가한 사본을 반환

1
2
3
const arr = [1, 2, 3];
arr.concat(4, 5, 6);    //(6) [1, 2, 3, 4, 5, 6]
//arr는 바뀌지 않음

배열 일부 가져오기

slice
slice는 두개의 매개변수를 받는다. 첫번째 매개변수는 어디서부터 가져올지, 두번째는 어디까지 가져올지. 매개 변수로 음수 인덱스를 쓸 수 있고 음수 인덱스를 쓰면 배열의 끝에서 부터 요소를 센다.
arr는 바뀌지 않는다

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

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

splice
첫번쨰 매개변수는 수정을 시작할 인덱스, 두번쩨 인덱스는 제어할 요소 갯수. 나머지 매개변수는 배열에 추가될 요소.

1
2
3
4
5
const arr = [1,5,7];
arr.splice(1,0,2,3,4);  //[], (6) [1, 2, 3, 4, 5, 7]
arr.splice(5,0,6);  //[], (7) [1, 2, 3, 4, 5, 6, 7]
arr.splice(1,2);    //[2,3], (5) [1, 4, 5, 6, 7]
arr.splice(2,1,'a','b');    //[5], (6) [1, 4, "a", "b", 6, 7]

배열 안에서 요소 교체하기

copyWithin
배열 요소를 복사해서 다른 위치에 붙여두고, 기존의 요소를 덮어씀
첫번째 매개변수는 복사한 요소를 붙여넣을 위치, 두번째 매개변수는 복사를 시작할 위치, 세번째는 복사를 끝낼 위치. 음수 인덱스를 사용하면 배열의 끝에서부터 셈

1
2
3
4
5
const arr = [1,2,3,4];
undefined
arr.copyWithin(1,2);    //(4) [1, 3, 4, 4]
arr.copyWithin(2,0,2);  //(4) [1, 3, 1, 3]
arr.copyWithin(0,-3,-1);    //(4) [3, 1, 1, 3]

특정 값으로 배열 채우기

fill

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

배열 정렬과 역순 정렬

reverce, sort

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

sort는 정렬 함수를 받을 수 있음. 일반적으로는 객체가 들어있는 배열을 정렬할 수 없지만 정렬함수를 사용하면 가능.

1
2
3
4
5
6
7
8
const arr = [{name:"shin"},{name:"hollo"},{name:"ha"},{name:"ahmad"}];
arr.sort(); //arr에 변화 없음
arr.sort((a,b)=> a.name > b.name);
//{name: "ahmad"},{name: "ha"},{name: "hollo"},{name: "shin"}
//name프로퍼티의 알파벳 순으로 정렬
arr.sort((a,b) => a.name[1] < b.name[1]);
// {name: "hollo"},{name: "ahmad"},{name: "shin"},{name: "ha"}
//name 프로퍼티 두번째 글자의 알파벳 역순으로 정렬

배열검색

indexOf, lastIndexOf
찾고자 하는 것과 정확히 일치(===)하는 첫번째 요소의 인덱스를 반환.
lastIndexOf는 배열의 끝에서 부터 검색.
일치하는 것을 찾지 못하면 -1을 반환한다.

1
2
3
4
5
const o = {name:"Jerry"};
const arr = [1,5,"a",o,true,5,[1,2],"9"];
arr.indexOf(5); //1
arr.lastIndexOf(5); //5
arr.indexOf({name:"Jerry"});    //-1

findIndex
indexOf와 비슷하지만 보조함수를 써서 검색조건을 지정할 수 있음

1
2
3
4
const arr=[{id:5, name:"shin"},{id:7, name:"hollol"}];
undefined
arr.findIndex(o => o.id ===5);  //0
arr.findIndex(o=>o.name==="hollol");    //1

find
조건에 맞는 요소의 인덱스가 아니라 요소 자체를 원할 때는 find를 사용
findIndex와 마찬가지로 검색 조건을 함수로 전달할 수 있음

1
2
const arr=[{id:5, name:"shin"},{id:7, name:"hollol"}];
arr.find(o => o.id ===5);   //{id: 5, name: "shin"}

some, every
some은 조건에 맞는 요소를 찾으면 즉시 true반환 찾지 못하면 false반환

1
2
3
const arr=[5,7,12,15,17];
arr.some(x=> x%2 === 0);    //true, 12가 짝수이기 때문
arr.every(x=> x%2 === 0);   //false

map, filter

map
map은 배열 요소를 변형

1
2
3
4
5
6
7
const cart = [{name:"book", price:123.5},{name:"tea", price:56.7}];
const names = cart.map(x=>x.name);  //(2) ["book", "tea"]
const items = ["candy","choco"];
const price = [2.25, 7.3];
const list = items.map((x, i) => ({name: x, price:price[i]}));
//list : [{name: "candy", price: 2.25},{name: "choco", price: 7.3}]

filter
배열에서 필요한 것들만 남김

reduce

map이 배열 각 요소를 변형한다면 reduce는 배열 자체를 변형. reduce라는 이름은 이 메서드가 보통 배열을 값 하나로 줄이는데 쓰이기 때문에 붙여짐. 

1
2
3
const arr = [5,7,2,4];
const sum = arr.reduce((a,x) => a += x, 0); //18
//0은 초기값, a의 초기값은 0이 된다.

문자열 병합

join
매개변수가 생략 될 때는 기본값 쉼표(,)
문자열 요소를 합칠 때 정의되지 않은 요소, 삭제된 요소, null, undefined는 모두 빈 문자열로 취급

1
2
3
4
5
6
const arr = [1, null, "hello", "world", true, undefined];
delete arr[3];
arr.join(); //"1,,hello,,true,"
arr.join("-");  //"1--hello--true-"
const html = '<ul><li>' + arr.join('</li><li>')+'</li><ul>';
// html : "<ul><li>1</li><li></li><li>hello</li><li></li><li>true</li><li></li><ul>"

공유하기 댓글