티스토리 뷰

책/자바스크립트 완벽 가이드

7장 배열

안양사람 2020. 11. 8. 21:30
728x90
SMALL

배열은 정렬된 값의 집합이다. 배열 안의 각 값은 원소라고 한다. 각 원소는 배열에서 위치를 가리키는 번호를 배정받는데, 이를 인덱스라고 한다.자스 배열은 타입이 고정되지 않는다. 그리고 배열은 밀집도가 높지 않다. 각 원소의 인덱스가 연속적이지 않아도 되고, 각 원소들 사이에 빈자리가 있어도 된다.

배열 만들기

배열을 만드는 가장 쉬운 방법은 배열 리터럴을 사용하는 것이다.

ex) var empty=[]; var misc=[1.1, true, "a"];

배열 리터럴의 값으로는 상수뿐만 아니라 임의의 표현식도 사용할 수 있다.

ex) var a=1; var b=[a, a+1];

배열 리터럴은 객체 리터럴 또는 다른 배열 리터럴을 포함할 수 있다.

배열 리터럴에서 빠진 부분이 존재할 경우, 해당 부분의 원소 값은 undefined가 된다.

또한 Array() 생성자를 사용해서 배열을 만들 수 있다.

1. 인자 없이 호출(빈 배열 생성, 배열 리터럴[]과 동일)

var a=new Array();

2. 배열의 길이를 의미하는 숫자 값을 인자로 주어 호출하는 방법

var a=new Array(10);

3. 두개 이상의 원소 값 또는 숫자가 아닌 원소 값 하나를 명시적으로 지정

var a=new Array(5,4,3,2,1,"tresting, tersting");

배열의 원소 알고 쓰기

배열의 각 원소에 접근할 때에는 [] 연산자를 사용한다. []연산자의 왼쪽에는 배열 참조 변수가 와야 하며, []안에는 음이 아닌 정수 값으로 평가되는 임의의 표현식이 위치할 수 있다. 배열의 인덱스와 객체의 속성 이름을 올바르게 구별하는 것은 매우 유용하다. 모든 인덱스의 값은 속성 이름이지만 ,오직 0과 2^32-1 사이의 정수 값 속성 이름만 인덱스다. 모든 배열은 객체이고, 속성 이름을 자유롭게 지정할 수 있다. 객체의 속성 이름으로 배열의 인덱스를 사용할 수도 있다. 하지만 배열은 객체와는 달리, 필요한 경우에 length 속성 값을 자동으로 갱신하는 특별한 기능을 가지고 있다.

희소배열

희소배열은 배열에 속한 원소의 위치가 연속적이지 않은 배열을 말한다. 희소배열은 Array() 생성자를 통해 배열을 만들거나, 단순히 배열의 크기보다 큰 인덱스에 값을 할당하여 만들 수 있다. 희소배열은 보통 배열보다 일반적으로 느리고, 메모리를 많이 사용할 뿐 아니라, 원소를 찾는 데 걸리는 시간이 일반 객체의 속성 값을 찾는 시간만큼 오래 걸린다.

배열의 길이

모든 배열에는 length 속성이 있다. 이는 객체와 배열을 구분하는 중요한 특징이다. 밀집도 가 높은 배열의 경우, length 속성 값은 배열의 원소 개수를 의미하며, 이는 배열에서 가장 큰 인덱스 값보다 하나 더 큰 값이다. 희소배열의 경우 length 속성은 항상 원소의 개수보다 크다. 이러한 점을 유지하기 위해 배열은 두 가지 독특한 작동을 한다.

1. 만약 배열에 배열의 크기와 같거나 큰 값으로 인덱스 i를 설정해 값을 할당하는 경우, 배열의 length 값은 자동으로 i+1로 설정된다.

2. 배열은 항상 length 값과 크기가 같도록 구현되어 있다. 만약 음이아닌정수이고 기존 length 값보다 작은 숫자 n을 length 값으로 할당할 경우, n번째 인덱스보다 크거나 같은 위치에 있는 원소는 배열에서 삭제된다.

배열의 length를 기존 값보다 크게 설정하면 끝부분에 빈 공간을 생성한다.

배열에 원소를 추가하거나 삭제하기

배열의 인덱스에 값을 할당하면 배열에 원소가 추가된다.

push() 메서드를 사용해 배열의 끝에 원소를 추가할 수도 있다.

unshift() 메서드를 사용해 배열의 앞 쪽에 원소를 추가할 수 있다.

객체에서 속성 값을 지운는 것과 마찬가지로 delete 연산자로 배열의 원소를 지울 수 있다. 이 때 공백을 다른 원소가 대신하지 않는다. 즉 empty 값이 되고 희소 배열이 된다.

pop() 메서드는 배열의 length를 하나 줄이고, 삭제된 값을 반환한다.(끝에서부터 삭제)

shift() 메서드는 모든 원소의 인덱스 값을 하나씩 감소시킨다.(앞에서 삭제)

splice()는 배열에 원소를 추가, 삭제, 대치하는 범용 메서드다.

배열 순회하기

배열을 순회하는 가장 일반적인 방법은 for 루프를 사용하는 것이다.

알고리즘을 작성할 때 순회하는 순서가 중요하다면, for/in 루프보다 for 루프를 사용하자

forEac()메서드 : 사용자가 정의한 함수에 배열의 원소를 인덱스 순서대로 하나씩 넘겨 배열을 순회

다차원 배열

자바스크립트는 진정한 의미에서의 다차원 배열을 지원하지는 않는다. 그러나 배열의 배열을 사용해 다차원 배열을 흉내낼 수 있다. 배열 내의 배열에 있는 원소에 접근하기 위해서는 단순히 []연산자를 두 번 사용하면 된다.

배열 메서드

join()

배열의 모든 원소를 문자열로 변환하고, 변환한 문자열을 이어 붙인 결과를 반환. 구분자 문자열 사용(default ,)

reverse()

배열의 원소 순서를 반대로 정렬하여 반환한다.

sort()

배열안의 원소들을 정렬하여 반환한다.

ms3864.tistory.com/56

concat()

기존 배열의 모든 원소에 concat() 메서드의 전달인자들을 추가한 새로운 배열을 반환

slice()

부분 배열을 반환. 전달인자 2개(처음, 끝). 전달인자 1개라면 그 전달인자부터 끝까지 배열을 반환.

음수라면 배열의 마지막원소에서부터의 상대적인 위치

splice()

배열의 원소를 삽입하거나 제거하려 할 때 범용적으로 사용할 수 있는 메서드. 호출시 배열을 바로 수정

첫번째 전달인자는 배열 상에서 삽입 혹은 삭제 작업을 시작할 위치

두번째 전달인자는 배열에서 삭제할 원소의 개수를 지정. 지정하지 않으면 마지막 원소까지 삭제

세번째 전달이ㅣ니자부터는 배열에 새롭게 삽입할 원소들을 지정하는데 사용. 삽입 작업은 첫번째 전달인자 위치

push(), pop()

끝에 삽입

끝에 제거

스택 FILO(선입후출, First-in, Last-out)

unshift(), shift()

앞에 삽입

앞에 제거

toString(), toLocaleString()

배열의 toString() 메서드는 우선 배열의 모든 원소를 문자열로 변환하고 이 문자열들을 쉼표로 분리한 목록을 반환한다.

전달인자를 지정하지 않고 join()메서드를 호출한 것과 toString()은 동일

toLocaleString()은 toString()의 지역화 버전이다.

ECMAScript5 배열 메서드

forEach()

배열을 순회하는 메서드로, 각 원소에 대하여 지정한 함수를 각각 호출한다. 첫번째 인자에 함수를 전달하고 그 함수에 세 가지 인자를 넘기면서 호출한다. 배열의 원소 값, 원소의 인덱스 값, 배열 그 자체.

break문으로 종료할 수 없다. 중간에 종료시키려면 예외를 발생시키고 try 블록 안에서 forEach()를 호출해야 한다.

map()

배열의 각 원소를 메서드의 첫 번째 전달인자로 지정한 함수에 전달하고, 해당 함수의 반환 값을 배열로 반환한다.

map은 전달한 함수가 반드시 값을 반환해야 한다. 그리고 기존의 배열을 수정하지 않고 새 배열을 반환한다. 

ms3864.tistory.com/44

filter()

배열의 일부분을 반환한다. 이때, 메서드에 전달한 함수는 조건자 함수이어야 한다. 즉 항상 true, false를 반환.

조건함수는 forEach오 map과 동일한 형태로 호출.

반환 값이 true이거나, true인 조건식이면 조건자 함수를 통과해 메서드가 반환할 배열에 추가.

희소배열의 빈원소를 제거하고 싶다면 그냥 return true를 사용

every(), some()

이 두 메서든느 배열을 단정(predicate)한다.(단정 함수 : 배열의 각 원소에 대하여 true 또는 false를 반환하는 함수)

every : 전달인자로 넘긴 함수가 배열의 모든 원소에 대하여 true를 반환하는 경우에 true

some : 전달인자로 넘긴 함수가 배열의 일부 원소에 대해 true를 반환하는 경우에 some() 메서드는 true를 반환한다.

a=[1,2,3,4,5];
a.every(function(x){return x<10;})  //true
a.every(fuunction(x){return x%2===0;}); //false

a.some(function(x){return x%2===-;}); //true
a.some(isNaN) //false

reduce(), reduceRight()

조검 함수를 사용하여 배열의 원소들을 하나의 값으로 결합한다. 이들 메서드에서 사용하는 결합 방식은 함수형 프로그래밍에서 일반적인 연산으로, inject와 fold로 알려져 있다.

reduce() 메서드는 두 개의 인자를 갖는다. 첫 번째 인자는 배열 원소의 감소 작업을 하는 함수다. 이 감소 함수는 어떻게든 배열 원소 중 두 값을 하나로 결합하면서 크기를 줄이고, 마지막 남은 값을 반환한다. 두번째(생략가능) 인자는 감소 함수에 전달할 시작 값이다.

빈 배열에 reduce를 초기 값 인자 없이 호출할 경우, TypeError

만약 초기 값 인자 없이 원소가 하나인 배열을 사용하거나 빈 배열에 초기값 인자를 사용할 경우, 메서드는 감소 함수를 호출하지 않고 배열의 원소 값 또는 초기 값 인자를 반환한다.

reduceRight는 배열의 끝 인덱스에서 시작해 내림차순으로 처리한다.

리듀서 함수는 네 개의 인자를 가집니다.

  1. 누산기accumulator (acc)
  2. 현재 값 (cur)
  3. 현재 인덱스 (idx)
  4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

indexOf(), lastIndexOf()

배열의 원소 중에서 특정한 값을 찾는다. 만약 값이 존재하면 해당 값의 인덱스를 반환하고, 존재하지 않을 경우에는 -1을 반환한다. indexOf()는 배열의 처음부터 검색하고, lastIndexOf()는 배열의 끝에서부터 검색한다.

첫번째 인자는 배열에서 찾고자 하는 값.

두번째 인자는 검색을 시작할 배열 인덱스를 지정할 수 있다. lastIndexOf는 음수를 사용

배열 타입

임의의 객체가 배열인지 확인하는 작업 : Array.isArray();  //true or false

유사 배열 객체

자스 배열에는 다른 객체에 없는 몇 가지 특징이 있다.

1. length 속성은 배열에 새 원소가 추가될 때마다 자동으로 갱신된다.

2. length 값을 임의로 설정함으로써 배열의 크기를 줄일 수 있다.

3. 배열은 Array.prototype에 정으된 유용한 메서드들을 사용할 수 있다.

4. 배열은 Array에 정의된 클래스 속성을 갖는다.

문자열을 배열처럼 사용하기

 

728x90
LIST

' > 자바스크립트 완벽 가이드' 카테고리의 다른 글

9장 클래스와 모듈  (0) 2020.11.12
8장 함수  (0) 2020.11.09
6장 객체  (0) 2020.11.07
5장 구문  (0) 2020.11.06
4장 표현식과 연산자  (0) 2020.11.05
댓글
공지사항