javascript 배열

다양한 데이터를 다루는데 있어 배열은 가장 기본적인 기술로 꼭 체득해야 한다.

배열 기초

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

배열 요소 조작(추가, 삭제, 정렬)

단순히 끝이나 처음의 요소 하나를 추가 삭제 하고 싶을 때

• push: 마지막 요소에 추가(수정)
• unshift: 첫 요소에 추가(수정)
• pop: 마지막 요소를 제거(수정)
• shift: 마지막 요소를 제거(수정)

여러 요소를 수정 추가하고 싶을 때

• concat: 배열 끝에 여러 요소를 추가(사본 반환), 배열을 인자로 넘기면 분해해서 추가. 단, 한번만 분해 한다.

[0].concat([1,2,[3,4]]) // [0,1,2,[3,4]]

• slice: 배열의 일부를 가져옴(사본 반환), 음수를 넘길시 끝에서 부터 카운트.
• splice: 배열을 수정(수정)
• copyWithin: 배열 요소를 복사해서 기존 요소에 덮어씀(수정)
• fill: 정해진 값으로 모든 배열을 채움(수정). 모든 요소나 일부 특정 요소들을 같은 값으로 설정할 때 유용.

배열을 정렬하고 싶을 때

• reverse: 배열의 순서를 역정렬 시킨다.(수정)
• sort: 함수를 통해서 정렬시킨다.(수정)

배열 검색

요소의 인덱스를 검색

• indexOf: 첫 요소부터 검색해서 일치하는 첫 요소의 인덱스를 반환
• lastIndexOf: 마지막 요소부터 검색해서 일치하는 첫 요소의 인덱스를 반환
• findIndexOf: 첫 요소부터 함수를 통해서 일치하는 첫 요소의 인덱스를 반환

요소 자체를 검색

• find: 첫 요소부터 함수를 통해서 일치하는 첫 요소를 반환. 두번째 매개변수로 컨텍스트를 줄수도 있다.

const arr = [jamie, juliet, peter, jay]; // object 요소들

arr.find(function (p) {

    return p.id === this.id

}, juliet);

존재 유무를 검색

• some: 함수에 만족하는 요소를 찾는 즉시 true를 반환
• every: 함수에 만족하는 모든 요소가 true일 경우에만 true를 반환

배열 변형

• map: 배열 요소를 변형시킨다.(사본 반환)

const cart = [ { name: "Widget", price: 9.95 }, { name: "Gadget", price: 22.95 } ];

const names = cart.map(x => x.name); // ["Widget", Gadget"]

const prices = cart.map(x => x.price); // [9.95, 22.95]

const items = ["Widget", "Gadget"];

const prices = [9.95, 22.95];

const cart = itemsmap((x, i) => ({ name: x, price: prices[i]}));

// cart: [{ name: "Widget", price: 9.95 }, { name: "Gadget", price 22.95}]

• filter: 함수에 만족하는 요소들을 배열로 반환합니다(사본 반환)

function cardToString(c) {

    const suits = { 'H': '\u2665', 'C': '\u2663', 'D': '\u2666', 'S': '\u2660' };

    const values = { 1: 'A', 11: 'J', 12: 'Q', 13: 'K' };

    for(let i=2; i<=10; i++) values[i] = i;

    return values[c.value] + suits[c.suit];

}

cards.filter(c => c.value === 2).map(cardToString);

• reduce: 함수를 통해서 배열 자체를 변형시킨다.(사본 반환) map은 요소를 변형시켰다.

arr.reduce(callback, [callback 첫번째 호출시 적용될 첫번째 인자])

콜백 함수는 배열의 요소 갯수만큼 반복된다.

콜백 함수의 첫번째 인자는 함수의 반환된 요소, 두번째 인자는 현재 배열 요소, 현재 인덱스, 배열자체.

reduce의 두번째 인자를 통해서 첫번째 콜백 함수의 첫번째 인자를 설정할 수 있다. 생략한다면 배열의 첫번째 요소가 적용된다. 이럴 경우 두번째 인자는 배열의 두 번째 요소가 적용된다.

const arr = [5, 7, 2, 4];

const sum = arr.reduce((a, x) => a += x, 0);

• join: 배열의 문자열 요소들을 문자열로 반환(사본 반환)

arr.join(); 요소 사이사이 , 콤마가 붙어서 문자열로 반환된다.