자바스크립트 스터디 - Array 편

1. Javascript
Array

2. [1, 2, 3, 4 ]
배열
요소
0 1 2 3
인덱스

3. 배열이란?
배열의 크기는 커질 수도 있고, 작을 수도 있다.
요소사이에 빈자리가 있어도 된다.
Array객체의 prototype의 속성들을 상속받는다.

4. 배열 생성-1
var a = [];
var b = [1, 2, 3, 4, 5];
var c = [1.1, true, 'a', ];
var d = [a, b, c];
var e = new Array();
var f = [{x: 1}, {x: 2}];
var g = [1,,3];

5. 배열 생성-2
//배열 생성자로 저장될 요소의 크기를 미리 할당
var a = new Array(10);
!
//배열 생성자로 요소들을 할당
var b = new Array(5, 4, 3, 2, 1, 'a');

6. 배열요소 읽고/쓰기
var a = ['world'];
var b = a[0];
a[1] = 3.14;
!
var i = 2;
a[i] = 3;
a[i + 1] = '안녕';
a[a[i]] = a[0];

7. 특별한 인덱스
var a = {};
a[-1.11] = 'string';
//{ -1.11 : 'string' }
!
var b = [];
b[-1.0000] = 'string';
b['hello'] = 'world';

8. 희소배열-1
희소배열은 요소의 위치가 연속적이지 않다.
보통 배열보다 느린 편이다.
메모리를 많이 사용한다.
요소를 찾는데 시간이 걸린다.

9. 희소배열-2
//모든 요소에 undefined 값을 반환
var a = [,,,,];
!
//요소가 존재하지 않는 배열
var b = new Array(4);
!
//희소배열 검사방법
//0 in a :true
//0 in b :false

10. 희소배열 검사
var a = [배열꾸러미];
for (var i = 0; i < a.length; i++) {
//null이나 undefined건너뛰기
if (a[i] === undefined) continue;
!
//희소배열 요소 건너뛰기
if (!(i in a)) continue;
}

11. 배열 길이
[].length; //0
['a'].length; //1
[1,2,3].length; //3
!
var a = [1,2,3,4,5];
a.length; //5
!
a.length = 4;
//[1,2,3,4]

12. 배열요소 추가/삭제
a = [];
a[0] = 'a';
a.push('b');
!
//['a', 'b'];
a = [1,2,3];
delete a[1];
!
//[1,undefined,3];
//희소배열
//length는 줄지 않는다.

13. 다차원 배열
var a = [1, 2, 3, ['a', 'b', 'c'], 5];
!
a[3]; //['a', 'b', 'c']
a[3][1]; //'b';

14. 배열 메소드
Array객체의 prototype의 속성들을 상속받은 것.
https://developer.mozilla.org/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array#Methods

15. join()
배열의 모든 요소를 문자열로 변환.
toString()
배열의 모든 요소들을 쉼표(,)로 분리 후 문자열로 반환.
join() 메서드를 써도 동일한 결과 반환.
var a = [1, 2, 3];
!
a.toString();
//'1,2,3'
!
a.join();
//'1,2,3'
!
a.join('-');
//'1-2-3'

16. reverse()
배열의 요소를 반대로 변환
var a = [1,2,3];
!
a.reverse();
//[3,2,1]
!
a.reverse().join();
//"3,2,1"

17. sort()
배열의 요소들을 전달인자 없이 반환하면 알파벳순으로 정렬 후 반환.
var a = ['c', 'b', 'a'];
!
a.sort();
//알파벳순 정렬
//['a', 'b', 'c']
!
a.sort().join('-');
//"a-b-c"
추가로 전달인자 두개를 받아서 다른 순서로 반환할 수 있다.
a.sort(function(a, b){
//code
});

18. concat()
기존 배열요소에 concat() 전달인자로 새로운 배열로 반환.
var a = [1, 2, 3];
!
a.concat(4, 5); //[1,2,3,4,5]
a.concat([4, 5]); //[1,2,3,4,5]
a.concat([4, 5], [6, 7]); //[1,2,3,4,5,6,7]
a.concat([4, 5, [1, 2]]); //[1,2,3,4,5,[1,2]];
!
* 주의
a.push(4, 5); //length 값이 반환되며, 배열객체에 4, 5 추가.
a.concat(4, 5); //length 값이 반환되지 않으며, 배열객체에 4, 5 추가.

19. slice()
두개의 전달인자로 처음과 끝을 명시하여 배열요소 중 일부분을 반환.
var a = [1,2,3,4,5,6,7,8];
!
a.slice(2, 4);
//[3, 4, 5]
!
a.slice(3);
//[4, 5, 6, 7, 8]
!
a.slice(-3, -2);
//음수는 요소의 마지막부터 시작
//[6]

20. splice()
처음 두개의 전달인자로 처음과 끝을 명시한 요소들을 반환 후 삭제.
var a = [1,2,3,4,5,6,7,8];
!
a.splice(4);
//[5, 6, 7, 8] 반환
//a = [1, 2, 3, 4]
!
a.splice(1, 2);
//[2, 3] 반환
//a = [1, 4];
!
a.splice(1, 1);
a.splice(1);
//[4] 반환
//a = [1];

21. push()
한개 이상의 요소들을 배열 마지막에 이어 붙인 후 length 값으로 반환.
pop()
배열의 마지막 요소를 제거 후 length 값 감소. 제거한 요소로 반환.
var a = [];
!
a.push('a', 'b');
//2
//['a', 'b']
!
a.pop();
//'b'
//['a']

22. unshift()
한개 이상의 요소들을 배열 앞부분에 이어 붙인 후 length 값으로 반환.
shift()
배열의 첫번째 요소를 제거 후 length 값 감소. 제거한 요소로 반환.
var a = [];
!
a.unshift('a', 'b');
//2
//['a', 'b']
!
a.shift();
//'a'
//['b']

23. ECMAScript5 브라우저 호환 그래프
http://kangax.github.io/es5-compat-table/
forEach()
배열을 순회하는 메소드.
세개의 전달인자(값, 인덱스, 배열)로 넘기고 호출한다.
data.forEach(value, index, array) {
//code
}

24. map()
배열의 각 요소들을 첫 번째 전달인자로 함수에 전달하고 반환.
var a = [1, 2, 3];
!
a.map(function(x){
return x * x; //[1, 4, 9]
});

25. filter()
배열의 모든 요소중 조건에 해당하는 요소들만 골라 반환.
var a = [5, 4, 3, 2, 1];
!
a.filter(function(x){
return x < 3; //[2, 1]
});

26. every()
var a = [5, 4, 3, 2, 1];
!
a.every(function(x){
return x < 3; //false
});
!
a.every(function(x){
return x < 6; //true
});
배열의 모든 요소가 조건자에 해당되면 true 반환.

27. some()
every() 메소드와 반대로 배열의 요소들 중
한개라도 조건자에 해당되면 true 반환.
var a = [5, 4, 3, 2, 1];
!
a.some(function(x){
return x < 3; //false
});

28. reduce()
배열에 두개의 전달인자를 함수에 전달하고 식에 맞는 결과값을 반환.
var a = [1, 2, 3, 4, 5];
!
a.reduce(function(x, y){
//1+2
//3+3
//6+4
//10+5
return x + y; //15
});

29. indexOf() / lastIndexOf()
배열의 요소들 중에서 특정한 값을 찾는다.
값이 존재하면 인덱스로 반환.
존재하지 않으면 -1로 반환한다.
!
indexOf()는 배열의 처음부터 검색.
lastIndexOf()는 배열의 끝에서부터 검색.
var a = [1, 'e2goon', 3, 4, 5];
!
a.indexOf('e2goon'); //1

30. 끝