세로형
Notice
Recent Posts
Recent Comments
Link
04-19 18:17
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 배열 본문

javascript

자바스크립트 배열

이수진의 블로그 2017. 8. 22. 08:57

자바스크립트의 배열은 객체이다. 무늬만 배열이다.

자바스크립트 배열은 2가지가 있다.
1. 일반적 배열 리터럴인 var a = ["aa", 123]; 
2. var points = new Array(40, 100)

2가지의 방법이 있고 내부적으로 동일하다.

근데 2번 방법에는 조심해야할 문법이 있다.
위에 써져 있는 2번과 같은 형태는 40, 100이라는 값이 배열에 들어가있다.
하지만 만약 var points = new Array(40); 을 하면 배열 크기가 40인 객체를 생성하는 것이다.

이것을 조금 조심해야 한다!


그리고 자바스크립트에서 배열은 좀 특이한게
자바에서 배열은 String이면 String, int면 int만 가능했다.
하지만 자바스크립트에선 배열 요소가 달라도 상관없다.
문자열, 숫자, 오브젝트 등 한꺼번에 들어갈 수 있다.
var a = ["aa", 123]; 
처럼 말이다.

그리고 두 배열다 push()와 pop()이 가능하다.
push()는 배열 맨 끝에 값을 넣고, pop()은 맨 마지막 요소를 반환한다.

그리고 일반적 배열은

1
2
3
4
5
6
7
8
<script>
var person = [];
person[0] ="John";
person[1] ="Doe";
person[2] =46; 
document.getElementById("demo").innerHTML =
person[0] +" "+ person.length;
</script>
Colored by Color Scripter
cs

처럼도 넣을 수 있고,

1
2
3
4
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
Colored by Color Scripter
cs

위 처럼 join을 통해 배열요소를 문자열로 만들 수 있다.

그리고 해당 변수가 배열인지 아닌지 확인하고 싶을땐 

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;             // returns object
 
타입을 보면 object가 나온다. 배열이라는 것이 없다!
근데 얘가 배열인지 아닌지 확인하고 싶을 땐
 
Array.isArray(fruits);     // returns true

이렇게 해야한다.

또한 pop()은 맨 뒤에꺼가 반환된다면 shift()는 맨 앞에것이 반환된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPEhtml>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>shift()</h2>
 
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   document.getElementById("demo1").innerHTML = fruits;
   document.getElementById("demo2").innerHTML = fruits.shift();
   document.getElementById("demo3").innerHTML = fruits;
</script>
</body>
</html>
 
Colored by Color Scripter
cs


그리고 slice라는 메소드가 존재하는데

1
2
3
4
5
6
7
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits +"<br><br>"+ citrus;
//1번 인덱스부터 3번 까지
</script>
 
Colored by Color Scripter
cs

시작 인덱스부터, 끝 인덱스 전 까지 짤라낸다.


그리고 sort()와 reverse 메소드가 존재한다.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 정렬
fruits.reverse();         // 거꾸로

그리고 정렬은 사용자 정의가 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPEhtml>
<html>
<body>
<h2>JavaScript Array Sort</h2>
 
<button onclick="myFunction1()">문자로 정렬</button>
<button onclick="myFunction2()">숫자로 정렬</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;    
function myFunction1() {
    points.sort();
    document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
    points.sort(function(a, b){return a - b});
    document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
Colored by Color Scripter
cs


위와 같이 말이다. 숫자, 문자로 정렬하는 방법 2개가 있다.

그럼 object 배열일땐 어떻게 정렬을 할까??? 아래와 같이 가능하다고 한다.

일단 숫자로 비교한 작업이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPEhtml>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on age.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]
displayCars();
function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}
function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type +" "+ cars[0].year +"<br>"+
  cars[1].type +" "+ cars[1].year +"<br>"+
  cars[2].type +" "+ cars[2].year;
}
</script>
</body>
</html>
 
Colored by Color Scripter
cs

그리고 밑에는 문자열을 비교하는 방법이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPEhtml>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on type.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]
displayCars();
function myFunction() {
    cars.sort(function(a, b){
        var x = a.type.toLowerCase();
        var y = b.type.toLowerCase();
        if (x < y) {return-1;}
        if (x > y) {return1;}
        return0;
    });
    displayCars();
}
function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type +" "+ cars[0].year +"<br>"+
  cars[1].type +" "+ cars[1].year +"<br>"+
  cars[2].type +" "+ cars[2].year;
}
</script>
</body>
</html>
Colored by Color Scripter
cs


반응형
그리드형
저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 보이기 감추기 기능, 클릭시 css 바꾸기  (0) 2017.08.24
자바스크립트 날짜, 유닉스  (0) 2017.08.22
자바스크립트 이미지 슬라이드(javascript image slide)  (0) 2017.08.22
자바스크립트 구구단 출력해보기  (0) 2017.08.22
자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경  (0) 2017.08.21
공유하기 링크
'javascript' Related Articles more
Comments