[자바스크립트] 심화2 - Array 다루기

자바스크립트

---

실행 환경 {

​ ‘IDE’ : ‘Eclipse’

​ ‘Java_Version’ : ‘JDK 1.8’

​ ‘Browser’ : ‘Chrome’

}

자바스크립트 array 타입 알아보기

var a1= new Array(10)
a1[0] = 0;
a1[1] = 1;
a1[20] = 20;
console.log('Array a1:'+a1);
console.log('Array a1 length:'+a1.length);
console.log('Array a1[20]:'+a1[20]);

//동적으로 크기가 변하는 배열(에러 안남)
//new Array(size) :
    // size를 주는 것은 의미가 없다. 어차피 동적으로 늘어나기 때문.


// 배열정의
// 2. literal
var a2 =[];
console.log('a2 length: ' + a2.length); // >> a2 length: 0


// 내부 저장 타입은 정해져 있지 않다.
a2[0] = 10;
a2[1] = 'hello world';
a2[5] = {
        name : '둘리',
}
console.log(a2)
// >> (6) [10, "hello world", empty × 3, {…}]
//        0: 10
//        1: "hello world"
//        5: {name: "둘리"}

// 초기화
var a3 = [1, 'abc', true];
console.log(a3); // >> (3) [1, "abc", true]0: 11: "abc"2: truelength: 3__proto__: Array(0)

var a4 = new Array(1, 'abc', true);
console.log(a4); // >> (3) [1, "abc", true]0: 11: "abc"2: truelength: 3__proto__: Array(0)

console.log('-----------------------------')
// 순회
for(var i = 0; i< a4.length; i++){
    console.log(a4[i]);
}
console.log('-----------------------------')


// 배열 함수 - concat 
var colors = ['black', 'white', 'yellow'];
var fruits = ['mango', 'banana', 'finew'];

var test = fruits.concat(colors);
console.log(test); // >> (6) ["mango", "banana", "finew", "black", "white", "yellow"]


// 배열함수 - join
var str = fruits.join(',');
console.log(str); // >> mango,banana,finew


// 배열함수 - pop(stack)
var color = colors.pop();
console.log(color); // >> yellow
console.log(colors); // >> (2) ["black", "white"]0: "black"1: "white"length: 2__proto__: Array(0)


// 배열함수 - pop(stack)
var color = colors.push('red');
console.log(colors); // >> ["black", "white", "red"]


// 배열함수 - reverse
fruits.reverse();
console.log(fruits); // >> ["finew", "banana", "mango"]


// 배열함수 - shift
var numbers = [100, 200, 300, 400]
numbers.shift();
console.log(numbers); // >> [200, 300, 400]


// 배열함수 - slice
var numbers2 = numbers.slice(1, 3);
console.log(numbers);  // >> [200, 300, 400]
console.log(numbers2); // >> [300, 400]


//배열함수 - sort
numbers.push(100);
numbers.sort()
console.log(numbers); // >> [100, 200, 300, 400]


//배열함수 - splice   index에서 count 갯수까지 잘라내기 
fruits.push('aaa');
console.log(fruits); // >> ["finew", "banana", "mango", "aaa"]
fruits2 = fruits.splice(1/*index*/, 1/*count*/);
console.log(fruits2); // >> ["banana"]
console.log(fruits); // >> ["finew", "mango", "aaa"]
fruits2 = fruits.splice(0/*index*/, 2/*count*/, 3);
console.log(fruits2); // >> ["finew", "mango"]

자바스크립트 prototype에 새로운 기능 넣기

파일명 : arrayex.js

// 배열 확장(remove, insert)
Array.prototype.insert = 
    function(index, value){
        // 가변값 this.splice(index, 0, v1, v2, v3, v4)
        this.splice(index, 0, value);
    }

Array.prototype.remove = 
    function(index, value){
        this.splice(index, 1);
    }

파일명 : ex07.html

// insert(index, val), remove(index)
a=[1,2,4];

a.insert(2, 3);
console.log(a); // >> [1, 2, 3, 4]
a.remove(3);
console.log(a); // >> [1, 2, 3]

a.insert(2, ['a','b','c']);
console.log(a); // >> [1, 2, Array(3), 3]
console.log(a[2]); // >> ["a", "b", "c"]

하지만 모든 배열이 풀어져서 값만 들어가길 원하니 arrayex.js 를 수정해보겠다.

파일명 : arrayex.js

// 배열 확장(remove, insert)
Array.prototype.insert = 
    function(index, value){
        if(value instanceof Array){
            // 가변값 this.splice(index, 0, v1, v2, v3, v4)
            value.forEach(function(element){
                this.splice(index, 0, element);
                console.log(this);
                index += 1;
            }.bind(this));
        } else {
            this.splice(index, 0, value);
        }
    }

Array.prototype.remove = 
    function(index, value){
        this.splice(index, 1);
    }

또 다른 방법으로는 클로저라는 방법이 있다.

//closure
Array.prototype.insert = 
    function(index, value){
        if(value instanceof Array){
            var _this = this;
            value.forEach(function(element){
                _this.splice(index, 0, element);
                index += 1;
            });
        } else {
            this.splice(index, 0, value);
        }
    } 

Array.prototype.remove = 
    function(index, value){
        this.splice(index, 1);
    }

a=[1,2,4];
a.insert(2, ['a','b','c']);
console.log(a); // >>  [1, 2, "a", "b", "c", 3]

이렇게 배열을 받으면 각 value값만 넣어줄 수 있게 되었다.

연관배열을 살펴보자

// 연관배열(Associted Array) 

var employee = {
        name : '홍길동',
        title : '과장',
        info : function(){
            console.log(this.name + ':' + this.title);
        },
}

console.log(employee.name);
console.log(employee['name'])

console.log(employee['info']) // 호출이 제대로 이루어지지 않음 
console.log(employee['info']()) // 호출이 제대로 이루어지지 않음
// 사용 예1
// 메소드 이름(문자열) 로 호출할 때
var s = 'info'
employee[s](); // >> 홍길동:과장

// 사용 예2
// map(java), dict(python)
var map = {}
map['one'] = 1;
map['two'] = 2;
map['three'] = 3;
console.log(map['one']) // >> 1
console.log(map) // >> {one: 1, two: 2, three: 3}

####