배열편
리터럴 방식이란:
값을 직접 입력하는 방식
*리터럴은 문자자체라는 의미다.
var a = ["a","b","c"];
// 이렇게 대괄호만들어서 직접 작성한걸 리터럴 방식으로 작성한거다.
var t = [ ];
그리고
저 배열안에 a b c 를
보통 데이터라고 부른다
(떄에따라 엘리먼트, 요소 이렇게 부르기도 한다.)
그리고
저 데이터의 위치는
0번째 a
1번째 b
2번째 c
이렇게 있는거다.
이렇게 저 위치 정보를 담고있는 걸
Index 라고 부른다.
배열을
에레이 생성자함수를 이용해 배열을 작성하는 것도있다
var a = new Array(); // 이게 어레이 생성자로 배열만드는 방법이다.
모질라홈페이지에 가보면,
자바스크립트 레퍼런스가 있는데 거기서보면,
Array (배열) 는
프로퍼티가 있고,
메서드가 있다.
함수도
프로퍼티랑
메소드가 있다.
Math 도
프로퍼티랑
메소드가 있다.
일단 생성자 함수라는게 어떤거냐면,
스트링이 될수도있고,
배열이 될수도있고,
오브젝트가 될수도있다.
var a = new String(); 이렇게 하면 야는 문자생성자 함수다.
var a = new Number(); 이렇게 하면 야는 숫자생성자 함수다.
var a = new Object(); 이렇게 하면 야는 오브젝트(객체)생성자 함수다.
다시 자바스크립트 레퍼런스 홈페이지로 가서보면,
*생성자는 어떤 행위를 보다 수원하게 도와주는 기능들이 담겨져있는 공간이 생성자라고한다.
즉, 모든 데이터는 타입이 있고(함수 객체 배열 문자 숫자 ,,,,,),
타입에는 생성자가 있는거고(함수객체생성자 오브젝트객체생성자 배열객체생성자 문자생성자 숫자생성자 ,,,,,)
그 생성자 안에는
프로퍼티
메소드가 라는 기능들이 들어있다.
var a = new Array(5,4,3,2,1,"apple");
console.log(a); // 5,4,3,2,1,"apple"
배열이 만들어진다.
결론은 배열을 만드는 2가지 방법이 있다는거고ㅡㅡ
인덱스는
이제
배열에서 특정 데이터를 접근하던지 가져오려면,
인덱스를 이용하면된다
a[0]; 이런식으로!
a.length 하면 배열의 길이,갯수를 확인할때 사용되는 프로퍼티이다.
그리고
프로퍼티와
메소드를
구분하는 거는
프로퍼티는 괄호가 없다.
메소드는 뒤에 괄호가 있다.
보통 배열은 모두 출력을 하는게 포인트인데
그럼
보통 for문을 이용해서 데이터를 다 꺼낸다.
for(var i = 0 ; i < a.length ; i ++){
}
그리고
for(var i = 0 ; i < 5 ; i ++){
console.log(i);
}
console.log(i);
이렇게 for문 안에서 찍는거랑
바깥에서 찍는거랑
결과가 다르다.
안은 포문 조건이 맞는데까지만 실행되고 종료하고
바깥은 그저 i 의값만 가지고 오는거다.
즉, i의 최종값은 5이고,
그렇지만
for문 안에서는 5 < 5 가되면 조건이 충족 안되니까,
밑의 내용을 실행시키지않고 for문이 끝나는거라서 고까지만 출력이 될뿐이다.
for문은
다른방식의 for문이 있는데,
for .... in 이 있다
var a = ["1" , "2" , "3"];
for(var index in a){
index + a
}
여기서 저 인덱스변수의 자리는 카운트가 되는 기능이고, 그럼 자동으로 0부터 루프가 도는거로 설정이되어있다.
그리고
a 는 진짜 배열을 넣는 자리이다.
즉, 변수 a 에는 저 배열의 인덱스값이 저장이 되는거다.
var arr = ["1" , "2" , "3"];
for (var a in arr){
console.log(a);
}
이렇게 하면,
저 변수 a 는 인덱스 기능이니까
a를 찍어보면 진짜 0 1 2 이렇게 배열수만큼 인덱스가 찍혀 나온다.(인덱스값이 저장된다.)
그리고
for (var a in arr){
console.log(arr[a]);
}
요러면
arr[a]
이렇게 하면
배열의 진짜 데이터내용이 출력이 되는거고,
1 , 2 , 3 이렇게
비교를 해보자면
기존포문
for(var i = 0 ; i < arr.length ; i ++){
console.log(i + arr[i]); // i 는 인덱스 값이 저장됨
}
포인문
for (var i in arr){
console.log( i + arr[i]); // i 는 인덱스 값이 저장됨
}
이렇게 된다
결국 같은 값이 나온다.
그리고
포이치문이 있다.
forEach 문
var arr = [" a "," b "," c "];
var result = '';
arr.forEach(function (data , index , arr ) { // 여기 순서대로 적어야한다. result += index + data + arr; });
console.log(result);
이거는 forEach 라는 메소드를 통해서 배열에 접근을 하는 방식이다.
순서는
첫번째 들어가는건 data (데이터값)
두번째 index값 (좌표값)
세번째 arr(배열전체)
결과는
0 a a,b,c
1 b a,b,c
2 c a,b,c
이렇게 나온다.
result 에 인덱스값 먼저 , 데이터값, 배열전체값 이렇게 넣었으니까.
루프를 돌면서, 저렇게 나오는거다.
뭐 사실 저 뒤에 arr(배열) 빼도된다
arr.forEach(function (data , index ) { result += index + data ; });
console.log(result);
0 a
1 b
2 c
이렇게 잘 나온다.
즉 ,배열 데이터에 접근을 할수 있다
즉, for문
for in 문
forEach문
셋다 데이터에 접근 가능하다.
forEach문은 함수가 호출되는 형태가 콜백함수의 형태로 호출된다.
콜백함수는 인자매개변수,
즉, 파라미터로 함수를 받는 함수를 콜백함수이라고 한다.
그리고
forEach문의 파라미터로는 최대 3개의 인수를 받을수있다.
배열로 다시 설명을 이어가자면,
var a = ["a" , "b" , "c"];
a.push('d','f');
이렇게 a배열에
푸쉬를 해서 데이터를 추가한다.
그럼
a배열에 a,b,c,d,f 이렇게 나온다 (뒤쪽에 추가(삽입이)가된거다.)
push 메서드를 사용하면,
push 를 사용하면, 데이터를 추가할수있고, 추가된 데이터의 위치는 원본배열의 뒤쪽에 이어서 추가가된다.
즉, 맨 뒤에서 부터 삽입이 된다는 소리다.
var a = ["a" , "b" , "c"];
a.unshift('d','f');
하면
// d , f , a , b , c
배열 앞쪽에 추가가된다.
언쉬프트 매서드를 이용하면,
맨앞에 삽입이 된다.
그리고
배열에서 데이터를 삭제하는방법은
삭제하는 메서드를 사용하면 되는데,
pop()
이라는 메서드이다.
var a = ["a" , "b" , "c"];
a.pop();
// a , b
pop메서드 사용하면, 원래배열데이터의 맨뒤에 즉, 맨 마지막 데이터가 사라진다.
그리고
shift()메서드도 있는데
이건 맨앞 데이터가 사라지게 한다.
var a = ["a" , "b" , "c"];
a.shift();
// b , c
지금까지
데이터를 삽입 삭제 방법을 알아봤고,
다른 메서드들도 보자
join() 메서드
var a = ["a" , "b" , "c"];
var v = a.join('-');
// a-b-c
이렇게 나온다
조인메서드는 변수를 따로하나만들어서 변수안에 저장해서 사용해야된다.
뭐 저기괄호안에
var v = a.join();
아무것도 안넣고하면
//abc
이렇게 붙어서 출력된다.
특히 join 메서드를 사용하게되면,
일단 arr 의 데이터타입이 지금 배열인데,
join 사용하면 arr 데이터타입이 문자열로 변한다.
득, 배열이 -> 문자열로 수정된다.
콘솔로그로 찍어보면 알수있다.
console.log(typeof v);
해보면
//string
이렇게 나온다.
즉, join쓰면 string 즉 문자열로 타입이 바뀐다.
그리고
concat 이라는 메서드도 있는데,
var a = ['a', 'b', 'c'];
var b = [1,2,3];
var c = a.concat(b);
console.log(c);
// ['a' , 'b' , 'c' , 1 , 2 , 3]
이렇게 붙여서 나온다.
합해진다
var a = ['a', 'b', 'c'];
var b = 1;
var c = a.concat(b);
console.log(c);
// ["a", "b", "c", 1]
이렇게해도
a쩜 콘캣 했으니까
a는 배열이니까
a배열 안에 b데이터가 추가되는거다.
var a = ['a', 'b', 'c'];
var b = {
v:1
};
var c = a.concat(b);
console.log(c);
이거는
a는 배열이고
b는 객체인데
콘켓 하니까
a 배열 안에 b 객체가 들어간거다.
그리고
var a = ['a', 'b', 'c'];
var b = function(){return 1;}
var c = a.concat(b);
console.log(c);
// ["a", "b", "c", ƒ]
* 0: "a"
1: "b"
2: "c"
3: ƒ ()
length: 4
proto: Array(0)
이렇게 함수도 된다.
근데
var a = ['a', 'b', 'c'];
var b = {
v:1
};
var c = b.concat(a);
console.log(c);
Uncaught TypeError: b.concat is not a function
at :6:11
이렇게는 안된다.
객체 안에는 들어가지 못한다.
- 즉 concat 매서드는 배열끼리 이어붙일때, 뭐 그럴때 쓰는거다. 타입에 상관없이 이어붙일수있다.
- 그 결과값또한 배열로 저장된다.
- join 메서드는 스트링으로 변환되어 출력되는데 콘켓은 배열 그대로 출력됨다.
sort 메서드는
리턴값이 배열Array 이다.
sort 는 배열안에있는 데이터들을 정렬을 해준다.
보통 문자열이 있으면 문자열앞자리를 기준으로 ,알파벳 순서대로 정렬된다.
숫자는 앞자리를 기준으로 정렬된다.
// 1, 10 ,2 , 20 이런식
sort는
함수를 만들어서 쓰곤한다.
var num = [4,2,5,1,3];
num.sort(function(a ,b){
return a - b; // 이부분이 정렬 알고리즘 부분이다. a - b 는 숫자가 작은것부터 큰것으로 정렬되고, b - a 하면 큰것부터 작은것으로~
});
console.log(num);
*배열안에 배열 선언
다차원배열이라고 부름
var a = [[1,2,3],[4,5,6],[7,8,9]];
데이터에 접근하는 방법
console.log(a[0]); // 1,2,3 이렇게 선택된다.
그럼 0번째 안에 3을 접근하려면?
console.log(a[0][2]); // 첫번째 칸은 외부배열 인덱스, 두번째칸은 내부배열 인덱스
이렇게~
*배열안에 객체 삽입
var a = [
{
name : 'one';
},
{
name : 'two';
},
{
name : 'three';
}
];
