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