배열 - kimchunyong/basic_javascript GitHub Wiki

배열이란?

정렬된 값의 집합,javascript에서는 어떤값이든 넣을수 있으며 크기가 동적이다. C와는 다르게 크기가 변경되어도 배열의 크기를 다시 선언할 필요가없다. 배열은 객체이다.

원소

배열 안의 값 ("사과","배","오렌지")

var arr = ["사과", "배", "오렌지"];

index

배열의 위치번호 첫번째 값은 인덱스 ‘0’으로 읽을 수 있다

배열 생성 방법

1.Array()생성자 사용하여 만들수있음

var a = new Array(5,4,3,2,1,"test")

2 리터럴 방식

var arr = [];

배열의 메소드와 프로퍼티

.length

length프로퍼티.문자열처럼 배열의 길이를 알려줍니다. 배열의 길이는 배열에 요소가 추가되고 제거됨에 따라 자동으로 바뀝니다.

var array = [1, 2, 3, 4];
array.length //4

.join(구분자)

배열의 항목들을 구분자를 기준으로 합친 새 문자열을 반환합니다. 구분자를 입력하지 않으면 자동으로 쉼표입니다.

var array = [1, 2, 3];
array.join(); // "1,2,3"
array.join(':'); // "1:2:3"

.concat(합칠 것)

배열을 합친 새 배열을 반환합니다.

var array = [1,2,3];
array = array.concat(4,5); // [1,2,3,4,5]
array.concat([6,7]); // [1,2,3,4,5,6,7]

.reverse()

원래의 배열을 뒤집어버립니다.

var array = [1, 2, 3, 4];
array.reverse(); // [4, 3, 2, 1]

.push(항목), 배열.pop()

배열의 뒤에 추가하거나 뺍니다. 기존의 배열이 변합니다. push는 push한 후 변한 배열의 길이를 반환하고, pop은 마지막 요소를 제거한 후 그 요소를 반환합니다.

var array = [1,2,3];
array.push(4); // 4
array; // [1,2,3,4]
array.pop(); // [4]

.unshift(항목), 배열.shift()

배열의 앞에 추가하거나 뺍니다. 기존의 배열이 변합니다. 마찬가지로 unshift는 변한 배열의 길이를, shift는 shift된 항목을 반환합니다.

var array = [1,2,3];
array.unshift(0); // 4
array; // [0,1,2,3]
array.shift(); // [0]

.splice(시작점, 지울 개수, 넣을 것)

pop, shift 같은 것은 배열의 처음 또는 끝만을 뺄 수 있지만, splice는 중간도 뺄 수 있습니다. 그러면서 동시에 그 자리에 무언가를 넣을 수도 있습니다. 예시를 보면 2번째 자리부터 한 개를 지우고 그 대신에 숫자 5를 넣으라고 되어있습니다. 그래서 2번째 자리(3)가 없어지고 5가 들어갑니다. 없애지는 않고 추가만 하고 싶으면 splice(시작점, 0, 넣을 것) 하면 아무것도 없어지진 않고 추가만 됩니다.

var array = [1,2,3,4];
array.splice(2, 1, 5); // 3
array; // [1,2,5,4];

.map(function(값, 자릿수) { 조건 }), 배열.forEach(function(값, 자릿수) { 조건 })

배열의 항목들을 반복하면서 조작하는 함수입니다. map과 forEach의 매개변수로 함수가 들어가는데 함수 안에 배열의 항목들을 어떻게 조작할 지 적어주면 됩니다. 예시에서는 각각 1을 더하는 것과 alert하는 조작을 했습니다. map과 forEach의 차이점은 map은 바뀐 새 배열을 반환하지만, forEach는 반환하지 않습니다. 따라서 forEach보다는 map이 활용성이 더 높습니다.

var array = [1,2,3];
array.map(function(x) {
  return x+1;
}); // [2,3,4]
array.forEach(function(x, i) {
  alert(x + ':' + i);
});

.reduce(function(이전값, 현재) { 조건 }), 배열.reduceRight

배열을 왼쪽부터 조건을 적용해 하나의 값으로 만듭니다. 위의 코드의 조건은 이전 값과 현재 값을 더한 값을 반환하는 거죠? 왼쪽 두 개부터 시작합니다. 이전 값은 1이고 현재 값은 2라서 더하면 3이 됩니다. 그 값이 다시 이전 값이 됩니다. 이제 이전 값은 3이고 현재 값은 3이라서 더하면 6이되고, 다음에는 이전 값이 6이고, 현재 값은 4가 되어서 더하면 10, 마지막으로 이전 값이 10이고 현재 값이 5라서 더하면 15가 됩니다. 최종 결과를 반환합니다. 간단히 말하면 조건에 따라, 1 + 2 + 3 + 4 + 5를 한 겁니다. 오른쪽부터 줄여가고 싶으면 자매품, reduceRight 함수를 사용하시면 됩니다.

var array = [1, 2, 3, 4, 5];
array.reduce(function(prev, cur) {
  return prev + cur;
}); // 15

.filter(function(항목) { 조건 })

필터링한다는 말을 들어보셨죠? 특정 조건에 해당하는 배열만을 걸러내 새 배열로 만듭니다. 역시 매개변수로 있는 함수 안에 조건을 적으면 됩니다. 여기서는 조건이 항목을 2로 나눈 나머지가 0인 것(짝수)만 걸러내라고 되어있네요.

var array = [1,2,3,4,5];
array.filter(function(x) {
  return x % 2 === 0;
}); // [2,4]

.sort(function(이전 값, 다음 값) { 조건 })

배열을 특정 조건에 따라 정렬합니다. 조금 복잡합니다.

var array = [5,2,3,4,1];
array.sort(function(x,y) {
  return x - y;
}); // [1,2,3,4,5]

.indexOf(찾을 것), 배열.lastIndexOf(찾을 것)

문자열처럼 배열에서 찾습니다. 여러 개가 있더라도 처음으로 찾은 위치만을 알려줍니다. lastIndexOf는 뒤에서부터 찾습니다.

var a = [2, 9, 9]; 
a.indexOf(2); // 0 
a.indexOf(7); // -1

if (a.indexOf(7) === -1) {
  // 요소가 배열에 존재하지 않습니다.
  alert(요소가 배열에 없습니다.)
}

Array.isArray(값)

Array 객체 자체의 static 메소드입니다. 배열인지 아닌지 확인해주는 역할을 합니다. 생각보다 자주 쓰이니 기억해둡시다.

Array.isArray('array?'); // false
Array.isArray(['array?']); // true