관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 배열 본문

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

처럼도 넣을 수 있고,

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

위 처럼 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


그리고 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

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


그리고 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 = [40100152510];
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


위와 같이 말이다. 숫자, 문자로 정렬하는 방법 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

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

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


0 Comments
댓글쓰기 폼