Java Script #6 객체(object) 2

1. 객체(object)

1) 내장객체 - Array 객체

 

a. 새로운 요소를 추가하는 push(), unshift() 메서드

• push( ) 메서드 : 배열 맨 끝에 요소 추가

• unshift( ) 메서드 : 배열 맨 앞에 요소 추가

• 배열의 길잇값 반환, 기존 배열이 바뀜

var nums = [1,2,3];
.......

var ret1 = nums.push(4,5); // 배열 맨 끝에 새로운 요소를 추가
document.write("length: ", ret1, " | 배열: ", nums);
document.write("<br>");
var ret2 = nums.unshift(0); // 배열 맨 앞에서 새로운 요소를 추가
document.wirte("length : ", ret2 , " | 배열: ",nums);

b. 배열에서 요소를 꺼내는 pop(), shift() 메서드

• pop( ) 메서드 : 배열 뒤쪽에서 요소를 꺼냄

• shift( ) 메서드 : 배열 앞쪽에서 요소를 꺼냄

• 꺼낸 요소를 반환, 기존 배열을 꺼낸 요소가 빠진 상태로 변경됨

 

var char = ["a", "b", "c" , "d"];
.....

var poped1 = chars.pop(); // 마지막 요소 꺼내기
document.write(" 꺼낸 요소: ", poped1, "| 배열 ", chars);
document.write("<br>");
var poped2 = chars.shift(); // 1번째 요소 꺼냄
document.write("꺼낸 요소: ", poped2 , "| 배열 ", chars);

c. 중간에 요소를 추가하거나 삭제하는 splice() 메서드

• 배열 중간에 2개 이상의 요소를 추가하거나 삭제할 수 있음

• 새로운 배열이 결괏값으로 반환됨

 

1) 괄호 안에 인수가 1개일 경우

• 인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제

2) 괄호 안에 인수가 2개일 경우

• 첫 번째 인수는 인덱스값이고 두 번째 인수는 삭제할 요소의 개수

• 메서드를 실행한 후에는 삭제한 요소를 반환하고, 기존 배열은 나머지 요소만 남음

3) 괄호 안에 인수가 3개일 경우

• 첫 번째 인수는 배열에서 삭제할 시작 위치, 두 번째 인수는 삭제할 개수, 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정

d. 기존 배열을 바꾸지 않으면서 삭제하는 slice() 메서드

• 요소를 여러 개 꺼낼 수 있음

• 요소를 삭제한 후에도 기존 배열이 바뀌지 않음

 

1) 괄호 안에 인수가 1개일 경우

• 인수가 지정한 인덱스의 요소부터 마지막 요소까지 거내서 반환

2) 괄호 안에 인수가 2개일 경우

• 첫 번째 인수는 시작 인덱스, 두 번째 인수는 끝 인덱스의 직전 인덱스

2. join 메소드

• 배열에 저장된 모든 원소를 문자열로 변환한 후 연결하여 출력

<script>
    var city=["서울", "부산", "대전"]; 
    var joindata1=city.join();
    var joindata2=city.join('-');
    var joindata3=city.join(' 그리고 ');
    document.write("조인 결과1 : " + joindata1 + "<p/>");
    document.write("조인 결과2 : " + joindata2 + "<p/>");
    document.write("조인 결과3 : " + joindata3 + "<p/>");
</script>

3. concat 메소드

• 지정된 배열에 두 개 이상의 데이터를 결합하거나 다른 배열 객체를 결합

<script>
    var city01=["서울", "부산", "대전"]; 
    var city02=["대구", "광주", "인천"]; 
    var city03=["전주", "부여", "세종"]; 
    var data1=city01.concat("수원", "오산");
    var data2=city01.concat(city02);
    var data3=city01.concat(city03, city02);
    document.write("결과1 : " + data1 + "<p/>");
    document.write("결과2 : " + data2 + "<p/>");
    document.write("결과3 : " + data3 + "<p/>");
</script>

4. reverse 메소드

• 배열 원소의 순서를 반대로 정렬

<script>
    var data=[9, 8, 7, 6, 5, 4, 3, 2, 1]; 
    document.write("배열 : " + data.join() + "<p/>");
    var rdata=data.reverse();    // 배열 원소를 반대로 정렬 
    document.write("결과 : " + rdata + "<p/>");
</script>

5. sort 메소드

• 배열 원소를 정렬

<script>
    var ndata1=[19, 38, 67, 26, 55, 24, 53, 12, 31]; 
    var ndata2=[132, 2, 41, 123, 45, 1234, 6, 29, 4567]; 
    var edata=['Apple', 'Html', 'Game', 'Computer', 'Java']; 
    var kdata=['서울', '부산', '구포', '대구', '인천']; 
    document.write("수치 정렬1 : " + ndata1.sort() + "<p/>");
    document.write("수치 정렬2 : " + ndata2.sort() + "<p/>");
    document.write("수치 정렬3 : " + ndata2.sort(function(a, b) {return a - b;}) + "<p/>");
    document.write("영문 정렬 : " + edata.sort() + "<p/>");
    document.write("한글 정렬 : " + kdata.sort() + "<p/>"); 
</script>

6. slice 메소드

• 배열의 특정 범위에 속하는 원소만 선택하여 배열 생성

<script>
    var kdata=['서울', '부산', '구포', '대구', '인천', '대전', '세종']; 
    var str1=kdata.slice(0, 4);
    var str2=kdata.slice(2, -1);
    var str3=kdata.slice(-4, -2);
    document.write("부분 배열1 : " + str1 + "<p/>");
    document.write("부분 배열2 : " + str2 + "<p/>");
    document.write("부분 배열3 : " + str3 + "<p/>");
</script>

7. splice 메소드

• 배열의 원소 추가 또는 제거

<script>
    var kdata=['서울', '부산', '구포', '대구', '대전']; 
    var str1=kdata.splice(1, 2);   
    document.write("삭제 데이터 : " + str1 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
    var str2=kdata.splice(1, 1, '강릉', '세종');   
    document.write("삭제 데이터 : " + str2 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
    var str3=kdata.splice(2, Number.MAX_VALUE);    
    document.write("삭제 데이터 : " + str3 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
</script>

8. pop & push 메소드

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

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

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

<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>

 

9. shift & unshift 메소드

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

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

<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 + "<p/>");
</script>

10. forEach 메소드

• 배열을 반복하며 저장된 데이터를 조회

 

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

 

<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>

11. map 메소드

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

<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 + "<p/>");
    document.write("map 메소드 적용 배열 :" + mapdata + "<p/>");
</script>

11. 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 + "<p/>");
    document.write("필터 후 배열 : " + fdata + "<p/>");
</script>

12. indexOf & lastIndexOf 메소드

• 배열의 데이터를 검색하여 인덱스 위치를 반환

• indexOf 메소드: 검색 시작 위치를 지정할 수 있음

• lastIndexOf 메소드: 배열의 맨 마지막 원소부터 검색 시작

<script>
    var data=[10, 20, 30, 40, 30, 60, 70, 30, 90,100]; 
    document.write("배열 데이터 : [" + data + "]<p/>");
    document.write("처음부터 검색한 30의 인덱스 : " + data.indexOf(30) + "<p/>");
    document.write("마지막에서 검색한 30의 인덱스 : " + data.lastIndexOf(30) + "<p/>");
    document.write("세 번째부터 검색한 30의 인덱스 : " + data.indexOf(30, 3) + "<p/>");
    document.write("처음부터 검색한 300의 인덱스 : " + data.indexOf(300) + "<p/>");
</script>