HTML, CSS, JavaScript

[JavaScript] 자바스크립트의 객체④ Array 객체

망고고래 2023. 12. 5. 16:33

자바스크립트의 Array 객체는 배열을 다루는 객체이다.

1. 객체 생성

let subject = new Array(10,20,'javascript');
//또는
let subject2 = [10,20,'javascript'];

 

 

2. Array 객체 내장 프로퍼티

length: 문자열의 개수

 

3. Array 객체 메서드

1)slice(n,m): 인덱스 n번부터 m-1번까지 배열 반환

slice(n): 인덱스 n번부터 끝까지 반환

let alphabet = ['a','b','c','d','e'];
console.log(alphabet.slice(1,3));
//['b','c'] 출력

 

2)join(): 파라미터로 넣은 문자를 배열 요소에 삽입해서 반환

let alphabet = ['a','b','c','d','e'];
console.log(alphabet.join('-'));
//a-b-c-d-e 출력

 

3)concat(): 배열 연결

let alphabet = ['a','b','c']
let alphabet2 = ['d','e'];
console.log(alphabet.concat(alphabet2));
//['a', 'b', 'c', 'd', 'e'] 출력

 

4)toString(): 배열을 문자로 변환

let alphabet = ['a','b','c','d','e']
console.log(alphabet.toString());
//a,b,c,d,e 출력

 

5)shift(): 첫 번째 요소 삭제

let alphabet = ['a','b','c','d','e']
alphabet.shift();
console.log(alphabet);
//['b', 'c', 'd', 'e'] 출력
//+
let alphabet = ['a','b','c','d','e']
console.log(alphabet.shift());
//a 출력(['a']x)

 

6)unshift(): 첫 번째 요소 추가

let alphabet = ['a','b','c','d','e']
alphabet.unshift('z');
console.log(alphabet);
//['z', 'a', 'b', 'c', 'd', 'e'] 출력
let alphabet = ['a','b','c','d','e']
console.log(alphabet.unshift('z'));
//6 출력

 

7)pop(): 마지막 요소 삭제

let alphabet = ['a','b','c','d','e']
alphabet.pop();
console.log(alphabet);
//['a', 'b', 'c', 'd'] 출력
let alphabet = ['a','b','c','d','e']
console.log(alphabet.pop());
//e 출력

 

8)splice(n,m,'x'): 배열의 n번부터 m개 삭제, 'x' 추가

let alphabet = ['a','b','c','d','e']
alphabet.splice(1,0,'f'); //0개 삭제시 추가만 함
console.log(alphabet);
//['a', 'f', 'b', 'c', 'd', 'e'] 출력
let alphabet = ['a','b','c','d','e']
alphabet.splice(1,2,'x','y','z');
console.log(alphabet);
//['a', 'x', 'y', 'z', 'd', 'e'] 출력

 

9)reverse(): 배열의 순서를 뒤집음

let alphabet = ['a','b','c','d','e']
console.log(alphabet.reverse());
//['e', 'd', 'c', 'b', 'a'] 출력

 

10)sort(): 오름차순 정렬

let alphabet = ['pie','snail','cookie','puppy','kitten']
console.log(alphabet.sort());
//['cookie', 'kitten', 'pie', 'puppy', 'snail'] 출력

 

 

※문자열로 비교하기 때문에 숫자 배열을 정렬할 때는 다음과 같은 절차 필요

//오름차순 정렬
let num = [657,158,32,424];
num.sort(function(a,b){
    return a-b;
});
console.log(num.toString());
//32,158,424,657 출력

//내림차순 정렬
let num = [657,158,32,424];
num.sort(function(a,b){
    return b-a;
});
console.log(num.toString());
//657,424,158,32 출력

 

 

 

4. 배열 요소 접근

1)for...in: index 번호 출력

let array1 = ['레몬나무','바질','로즈마리'];
for(let i in array1){
    console.log(i);
}
//0 1 2 출력

 

2)for...of: 요소 출력

let array1 = ['레몬나무','바질','로즈마리'];
for(let i of array1){
    console.log(i);
}
//레몬나무 바질 로즈마리 출력

 

3)forEach(): 배열의 요소에 순차적으로 접근하여 출력

배열명.forEach(function(요소,인덱스,배열자체){
	//실행할 코드
);

function에 들어갈 매개변수의 이름은 임의로 주어도 각각 요소/인덱스/배열로 인식한다.

let array1 = ['레몬나무','바질','로즈마리'];
array1.forEach(function(a,b){
    console.log(a);
    console.log(b);
});
//레몬나무
//0
//바질
//1
//로즈마리
//2 출력

 

4)map(): 기존 배열을 이용해서 새로운 배열 생성

let array1 = [10, 20, 30];
array1.map(function(value){
    console.log(value);
});
//10 20 30 출력
let array2 = array1.map(function(value){
    return value*2;
});
console.log(array2.toString());
//20, 40, 60 출력

 

5)filter(): 조건에 맞는 배열 요소들로만 새로운 배열 생성

let array1 = [10, 20, '달팽이'];
array1.map(function(value){
    console.log(value);
});
//10 20 달팽이 출력
let numarray = array1.filter(function(value){
    return typeof value === 'number';
});
console.log(numarray.toString());
//10,20 출력