티스토리 뷰

웹/부스트코스

[WEB]JavaScript 배열

cll179 2018. 7. 6. 13:06

배열의 선언

 

배열 선언 형식

var a = [ ];

- 배열 안에는 모든 타입이 다 들어갈 수 있다.

- 함수도 배열안에, 배열도 배열안에 들어 갈 수 있다. 즉 못들어가는게 없다.

 

예제)

1
2
3
var a = [1,2,3,"hello",nulltrue, [[{1:0}]]];
 
console.log(a.length);
cs

- new Array() 문으로 선언 할 수도 있지만, 보통 간단히 '[]'를 사용한다. 현업에서도 거의 사용하지 않는다.

 

 

 

예제)

1
2
3
4
var a = [4];
a[10000= 10;
console.log(a.length);//10001
console.log(a[500]);//undefined
cs

- length 속성이 있어 길이를 쉽게 알 수 있다.

- index 번호와 함께 추가 할 수 있다.

 

 

 

1
2
3
4
//push 메서드
var b = [4];
b.push(5);
console.log(b.length);
cs

- push메서드를 통해서 뒤에 순차적으로 추가 할 수 있다.

 

 

배열의 유용한 메서드들

 

1
2
3
4
5
6
//배열의 원소에 특정 값이 들어 있는지 확인할 수 있다.
[1,2,3,4].indexOf(3//2 (index가 출력된다. 만약 존재하지 않는다면 -1을 반환한다.)
//배열의 문자열로 합칠 수 있다.
[1,2,3,4].join(); //"1,2,3,4" 
//배열을 합칠 수 있다.
[1,2,3,4].concat(2,3);  //[1,2,3,4,2,3]
cs

 

indexOf(찾을 값) : 찾을 값이 존재하는 인덱스를 반환한다. 존재하지 않는다면 -1

 

 

1
2
3
4
var origin = [1,2,3,4];
var result = origin.concat(2,3); //origin은 바뀌지 않는다!
 
console.log(origin,result);
cs

concat(합칠 배열) : 배열을 합칠 수 있다. 합치고나서 새로운 배열을 반환한다. 원래 배열은 바뀌지 않는다.

 

- 배열의 메서드 중에는 새로운 배열을 반환하는 메서드도 있다는 걸 주의하자

 

 

배열 탐색 - (forEach, map, filter)

- for문은 생략

 

forEach

- i++과 같은 증가시켜주는 코드 불필요

- 함수를 인자로 갖는다.

- 스프레드 오퍼레이터에 대해 알아보기

예제)

1
2
3
4
5
6
7
var origin = [1,2,3,4];
var changedArray = [...origin,2,3];
 
changedArray.forEach(function(v,i,o){ //forEach문은 함수를 인자로 받고있다.
  console.log(v);
});
 
cs

 

map

1
2
3
4
5
6
7
8
var origin = [1,2,3,4];
var changedArray = [...origin,2,3];
 
var mapped=changedArray.map(function(v){
  return v * 2// changedArray의 원소를 돌면서, 값을 변경시킨 후에 새로운 배열로 만들어서 반환한다!
});
 
console.log(mapped, changedArray);
cs

 

 

참고 사이트 : http://www.edwith.org/



본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

댓글