Java Script 배열 2

 

---

l 스택

- 모든 데이터의 삽입과 삭제가 배열의 한쪽 끝에서만 수행되는 자료 구조

- 살짝 데이터의 구조에 제한을 둔 거라고 생각하면 편하다.

• push 메소드: 배열의 마지막 위치에 데이터를 추가하고 배열의 길이를 반환

• pop 메소드: 배열의 마지막 위치에 있는 데이터를 삭제하고 삭제한 데이터를 반환

 

 

push(추가), pop(삭제? 들어내기)

데이터n - top

...

데이터2

데이터1 - bottom

```bottom 데이터를 가져올려면 위의 데이터를 다 꺼내야 한다. (끄집어 내야함;;;)```

 

 

pop & push 메소드

 

<script>
    var kdata = ['서울','부산','연산','동래','대구','인천'];
    var p1 = kdata.push('청주','세종');
    document.write("데이터 : " + p1 + "<br>");
    document.write("배열 데이터 : " + kdata + "<p/>");
    var p2 = kdata.pop();
    document.write("데이터 : " + p2 + "<br>");
    document.write("배열 데이터 : " + kdata + "<p/>");
</script>

---

l shift & unshift

- shift 메소드: 배열의 맨 처음 위치에 데이터를 삭제하고 배열의 길이 반환

- unshift 메소드: 배열의 맨 처음 위치에 데이터를 삽입하고 배열의 길이 반환

- 맨앞의 데이터를 먼저 빼는 것 "Queue" 

 

<script>
    var kdata = ['서울','부산'];
    var p1 = kdata.unshift('울산','대전');
    document.write("데이터 : " + p1 + "<br>");
    document.write("배열 데이터 : " + kdata + "<p/>");
    var p2 = kdata.shift();
    document.write("데이터 : " + p2 + "<br>");
    document.write("배열 데이터 : " + kdata + "<br>");
</script>

---

l forEach

• - 배열을 반복하며 저장된 데이터를 조회
• for 과 기능은 같으나 배열이나 컨테이너 값을 조진다.
• printArr 의 위치는 callback 함수다.
• item , index 의 이름은 바꿔도 되지만 안의 기능은 그대로기 때문에 지켜줘야한다.
• 기본 뼈대  ::: function 메서드네임 (원소 값 , 인덱스 번호) { }

<script>
    var kdata = ['서울','부산','인천','대구'];
    function printArr(item, index) {
        document.write("배열 데이터 [" + index + "] : " + item + "<br>");
    }
    kdata.forEach(printArr);
</script>

---

forEach 문 활용 2

여기서는 인덱스 자리에 정의를 안해줘서 원소 값만 나온다.

 

<script>
    var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var sum = 0;
    function addArr(value) {
        sum+=value;
    }
    data.forEach(addArr); // 배열 객체에 메소드를 사용가능하다. ㅈㄴ 문법 파괴자;
    document.write("배열 데이터 합 : " + sum + "<p/>");
</script>

---

l map

- 배열의 데이터를 함수의 인자로 전달하고 함수의 수행 결과를 반환 받아 새로운 배열 생성

여기서의 mapArr은 callback 함수

 

<script>
    var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    function mapArr(value) {
        return value*value;
    }
    var mapdata = data.map(mapArr);
    document.write("원래 배열 : " + data + "<br>");
    document.write("map 메소드 적용 배열 : " + mapdata + "<br>");
</script>

---

l filter

- 배열의 데이터 중에 조건이 참인 데이터만 반환하여 새로운 배열 생성

 

<script>
    var data = [21, 42, 33, 14, 25, 12, 37, 28, 16, 11];
    function filterArr(value) {
        return value >= 18;
    }
    var fdata = data.filter(filterArr);
    document.write("필터 전 배열: " + data + "<br>");
    document.write("필터 후 배열: " + fdata + "<br>");
</script>

---

l indexOf & lastIndexOf

• - 배열의 데이터를 검색하여 인덱스 위치를 반환
• • indexOf 메소드: 검색 시작 위치를 지정할 수 있음
• • lastIndexOf 메소드: 배열의 맨 마지막 원소부터 검색 시작
•  제일 앞에 있는 인덱스의 값을 가져온다.

 

<script>
    var data = [10, 20, 30, 40, 30, 60, 70, 30, 90, 100];
    document.write("배열 데이터 : [" + data + "]<p/>");
    document.write("처음부터 검색한 30의 index : " + data.indexOf(30) + "<p/>");
    document.write("마지막에서 검색한 30의 index : " + data.lastIndexOf(30) + "<p/>");
    //lastIndexof 는 마지막에서 검색하고 마지막에서 제일 끝의 값을 호출
    document.write("세 번째 부터 검색한 30의 index : " + data.indexOf(30, 3) + "<p/>");
    document.write("처음부터 검색한 300의 index : " + data.indexOf(300) + "<p/>");
</script>

---

l 연관 배열 생성 방법

 

• 기본키 :: {a: a1, b:b1, c:c1};
• 속성:속성값.
• Key 값은 중복이 되면 안된다.  = unique
• arr = {key_1 : value1, key_2 : value2, ... , key_n : value_n};

 

<script>
    var data = {'f0' : 100, 
                'f1' : 200, 
                'f2' : 300
               };
    data['f3'] = 400;   // 배열 데이터 저장
    data.f4 = 500;      // 배열 데이터 저장
    document.write(data.f0 + "<br>"); // 'f0'키 데이터 조회
    document.write(data.f1 + "<br>");
    document.write(data['f2'] + "<br>");    // ['f2'] 키 데이터 조회
    document.write(data['f3'] + "<br>");
    document.write(data['f4'] + "<br>");
</script>

---

2차원 배열

 

3행row→ //// 3열↓colun

[0,0]	[0,1]	[0,2]
[1,0]	[1,1]	[1,2]
[2,0]	[2,1]	[2,1]

<script>
    var d2data = [[10, 20, 30, 40, 0],
                  [60, 70, 80, 90, 0]];
    d2data[0][4] = 50;
    d2data[1][4] = 100;
    document.write("2차원 배열 첫 번째 데이터 [0][0] : " + d2data[0][0] + "<br>");
    document.write("2차원 배열 마지막 데이터 [1][4] : " + d2data[1][4] + "<br>");
    document.write("2차원 배열 행 길이 : " + d2data.length + "<br>");
    document.write("2차원 배열 열 길이 : " + d2data[0].length + "<br>");
</script>

---

1차원 배열로 2차원 배열 생성하고 조회

 

값을 다 꺼내려면 이중 for 문을 써야한다.

전체 배열 데이터 버튼 클릭

홀수 배열 데이터 버튼 클릭

---

반복문을 이용하여 2차원 배열 만들기

 

 

new 생략 , 스트링이  그냥 배열안에 들어가고 난리났다 JS!!!

<script>
    var data = [];
    for(var i=0; i<10; i++) {
        data[i] = [String(i+"-"+0), String(i+"-"+1), String(i+"-"+2)];
    }
    function printData() {
        for(var x=0; x<data.length; x++) {
            for(var y=0; y<data[x].length; y++) {
                document.write(data[x][y] + " ");
            }
            document.write("<p/>");
        }
        document.write("<a href = 'ex10_40.html'>돌아가거라...</a>");
    }
</script>
<button type="button" onclick="printData()">전체 배열 데이터 보기</button>