javascript - array

30
Javascript Array

Upload: wonmin-lee

Post on 29-Nov-2014

328 views

Category:

Education


11 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Javascript - Array

JavascriptArray

Page 2: Javascript - Array

[1, 2, 3, 4 ]배열

요소

0 1 2 3

인덱스

Page 3: Javascript - Array

배열이란?배열의 크기는 커질 수도 있고, 작을 수도 있다.

요소사이에 빈자리가 있어도 된다.Array객체의 prototype의 속성들을 상속받는다.

Page 4: Javascript - Array

배열 생성-1var 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];

Page 5: Javascript - Array

배열 생성-2//배열 생성자로 저장될 요소의 크기를 미리 할당var a = new Array(10);!

//배열 생성자로 요소들을 할당var b = new Array(5, 4, 3, 2, 1, 'a');

Page 6: Javascript - Array

배열요소 읽고/쓰기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];

Page 7: Javascript - Array

특별한 인덱스var a = {};a[-1.11] = 'string';//{ -1.11 : 'string' }!

var b = [];b[-1.0000] = 'string';b['hello'] = 'world';

Page 8: Javascript - Array

희소배열-1희소배열은 요소의 위치가 연속적이지 않다.

보통 배열보다 느린 편이다.메모리를 많이 사용한다.

요소를 찾는데 시간이 걸린다.

Page 9: Javascript - Array

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

Page 10: Javascript - Array

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

Page 11: Javascript - Array

배열 길이[].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]

Page 12: Javascript - Array

배열요소 추가/삭제a = [];a[0] = 'a';a.push('b');!

//['a', 'b'];

a = [1,2,3];delete a[1];!

//[1,undefined,3];//희소배열//length는 줄지 않는다.

Page 13: Javascript - Array

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

Page 14: Javascript - Array

배열 메소드Array객체의 prototype의 속성들을 상속받은 것.

https://developer.mozilla.org/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array#Methods

Page 15: Javascript - Array

join()배열의 모든 요소를 문자열로 변환.

toString()배열의 모든 요소들을 쉼표(,)로 분리 후 문자열로 반환.join() 메서드를 써도 동일한 결과 반환.

var a = [1, 2, 3];!a.toString();//'1,2,3'!a.join();//'1,2,3'!a.join('-');//'1-2-3'

Page 16: Javascript - Array

reverse()배열의 요소를 반대로 변환

var a = [1,2,3];!a.reverse();//[3,2,1]!a.reverse().join();//"3,2,1"

Page 17: Javascript - Array

sort()배열의 요소들을 전달인자 없이 반환하면 알파벳순으로 정렬 후 반환.

var a = ['c', 'b', 'a'];!a.sort();//알파벳순 정렬//['a', 'b', 'c']!a.sort().join('-');//"a-b-c"

추가로 전달인자 두개를 받아서 다른 순서로 반환할 수 있다.

a.sort(function(a, b){ //code});

Page 18: Javascript - Array

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 추가.

Page 19: Javascript - Array

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]

Page 20: Javascript - Array

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];

Page 21: Javascript - Array

push()한개 이상의 요소들을 배열 마지막에 이어 붙인 후 length 값으로 반환.

pop()배열의 마지막 요소를 제거 후 length 값 감소. 제거한 요소로 반환.

var a = [];!a.push('a', 'b');//2//['a', 'b']!a.pop();//'b'//['a']

Page 22: Javascript - Array

unshift()한개 이상의 요소들을 배열 앞부분에 이어 붙인 후 length 값으로 반환.

shift()배열의 첫번째 요소를 제거 후 length 값 감소. 제거한 요소로 반환.

var a = [];!a.unshift('a', 'b');//2//['a', 'b']!a.shift();//'a'//['b']

Page 23: Javascript - Array

ECMAScript5 브라우저 호환 그래프http://kangax.github.io/es5-compat-table/

forEach()배열을 순회하는 메소드.세개의 전달인자(값, 인덱스, 배열)로 넘기고 호출한다.

data.forEach(value, index, array) { //code}

Page 24: Javascript - Array

map()배열의 각 요소들을 첫 번째 전달인자로 함수에 전달하고 반환.

var a = [1, 2, 3];!a.map(function(x){ return x * x; //[1, 4, 9]});

Page 25: Javascript - Array

filter()배열의 모든 요소중 조건에 해당하는 요소들만 골라 반환.

var a = [5, 4, 3, 2, 1];!a.filter(function(x){ return x < 3; //[2, 1]});

Page 26: Javascript - Array

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 반환.

Page 27: Javascript - Array

some()every() 메소드와 반대로 배열의 요소들 중한개라도 조건자에 해당되면 true 반환.

var a = [5, 4, 3, 2, 1];!a.some(function(x){ return x < 3; //false});

Page 28: Javascript - Array

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});

Page 29: Javascript - Array

indexOf() / lastIndexOf()배열의 요소들 중에서 특정한 값을 찾는다.값이 존재하면 인덱스로 반환.존재하지 않으면 -1로 반환한다.!indexOf()는 배열의 처음부터 검색.lastIndexOf()는 배열의 끝에서부터 검색.

var a = [1, 'e2goon', 3, 4, 5];!a.indexOf('e2goon'); //1

Page 30: Javascript - Array