배열(Array) - 이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조) - 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가르키는 숫자를 인덱스라고 함
1.배열 선언
let 배열명; 2.배열 초기화 배열명 = [요소1,요소2,요소3..] 예) let arr; arr = [100,200,300] let arr = [100,200,300]
두 방법 모두 동일
3.배열 객체로 생성 const 배열명 = nuw Array(요소1,요소2,...); 4.배열의 접근 let arr; arr = [100,200,300] console.log(arr[0]); // "100" console.log(arr[1]); // "200" console.log(arr[3]); // "300" 5.자바스크립트 배열의 특징
● 배열 요소의 타입이 고정되어 있지 않음 let arr = [1, 1.5, '김사과', true]
● 배열 요소의 인덱스가 연속적이지 않아도 됨 let arr; arr[0] =1; arr[1] =20; arr[4] =5;
✔index 2,3은 undefined 7.Array 객체의 메소드 ●push() : 배열의 요소를 추가 ●pop() : 배열의 마지막 주소에 있는 값을 제거 ●shift() : 배열의 첫번째 주소에 있는 값을 제거 ●concat() : 두개의 배열을 합침 ●join() : 배열 요소 사이에 원하는 문자를 삽입 ●reverse() : 배열을 역순으로 재배치 ●sort() : 배열을 오름차순으로 정렬
8.배열을 이용한 반복
●for in 문 변수에 배열의 인덱스 또는 객체의 key 가 저장되며 반복 const arr = [10,20,30]; const user = {'userid': 'apple', 'name': '김사과', 'age':20};
●for(변수 in 배열 또는 객체){ 배열의 요소 개수 또는 객체의 프로퍼티 개수만큼 반복할 문장; ..... } in 이후에 arr, 즉 배열을 넣었을때 변수는 인덱스값이 리턴 in 이후에 user,즉 객체를 넣었을때 변수는 key 값을 리턴 ●for of 문 -변수에 배열의 value 또는 객체의 value 가 저장되며 반복 - iterator 속성을 가지는 컬렉션 전용 for(변수 of 배열 또는 객체){ 배열의 요소 개수 또는 객체의 프로퍼티 개수만큼 반복할 문장 } in 이후에 arr, 즉 배열을 넣었을때 변수는 value이 리턴 in 이후에 user,즉 객체를 넣었을때 변수는 value 값을 리턴받음 ●forEach문 배열에서만 사용 가능하며, 요소의 개수만큼 반복 const arr = [10,20,30]; 배열명.forEach(function(변수1,변수2,변수3){ 배열의 요소 개수만큼 반복할 문장 }) 변수1 : 배열의 요솟값 10 -> 20 -> 30 변수2 : 배열의 인덱스 0 -> 1 -> 2 변수3 : 생략가능, 배열객체 자체 [10,20,30] -> [10,20,30] -> [10,20,30]
HTML 예제 코드1
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 배열1 </ title >
</ head >
< body >
< h2 > 배열1 </ h2 >
< script >
const user =[ 1 , 'apple' , '김사과' , '20' , '서울 서초구 ' ]
console . log ( user );
console . log ( user [ 0 ]);
console . log ( user [ 1 ]);
console . log ( user [ 2 ]);
console . log ( user [ 3 ]);
console . log ( user [ 4 ]);
console . log ( user [ 5 ]);
user [ 4 ] = '서울 강남구'
console . log ( user [ 4 ]);
console . log ( user . length ); // 5 undefined 포함 x
user [ 6 ] = 'A형' ;
console . log ( user [ 6 ]); // A형
console . log ( user [ 5 ]); // undefined
console . log ( user . length ); //7 사이에 undefined있어도 포함
console . log ( '====================' )
for ( let i = 0 ; i < user . length ; i ++){
console . log ( user [ i ]);
}
</ script >
</ body >
</ html >
결과1
HTML 예제 코드2
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 배열2 </ title >
</ head >
< body >
< h2 > 배열2 </ h2 >
< script >
const user =[ 1 , 'apple' , '김사과' , '20' , '서울 서초구 ' ]
user . push ( '여자' );
console . log ( user );
console . log ( '================' )
let result = user . pop ();
console . log ( user );
console . log ( result );
console . log ( '================' )
result = user . shift ()
console . log ( user );
console . log ( result );
console . log ( '================' )
//shift 와 pop 모두 삭제하고 그값을 리턴받음
const sub = [ '여자' , 'ISFP' ];
const concat_user = user . concat ( sub );
console . log ( concat_user );
console . log ( '================' )
const user_join = user . join ( '😊' )
console . log ( user_join );
console . log ( typeof user )
console . log ( typeof user_join )
console . log ( '================' )
const arr = [ 'a' , 'z' , 'c' , 'f' , 'r' ];
arr . sort ()
console . log ( arr ); //오름차순
arr . reverse ()
console . log ( arr ); // 자바스크립트는 역순이 없어서 오름차순후 reverse를 사용한다
console . log ( '================' )
</ script >
</ body >
</ html >
결과2
HTML 예제 코드3
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 배열3 </ title >
</ head >
< body >
< h2 > 배열3 </ h2 >
< script >
const user =[ 1 , 'apple' , '김사과' , '20' , '서울 서초구 ' ]
//for in 문 배열 사용
for ( let i in user ){
console . log ( `i: ${ i } , user[ ${ i } ]: ${ user [ i ] } ` )
}
console . log ( '-----------------' );
//for in 문 객체 사용
const member = { 'userid' : 'apple' , 'name' : '김사과' , 'age' : 20 };
for ( let i in member ){
console . log ( `i: ${ i } , member[ ${ i } ]: ${ member [ i ] } ` );
}
console . log ( '-----------------' );
//for of 문 배열 사용하기
for ( let i of user ){
console . log ( `i: ${ i } ` )
}
console . log ( '-----------------' );
user . forEach ( function ( v , i , arr ){
console . log ( `v: ${ v } , i: ${ i } , arr: ${ arr } ` );
})
</ script >
</ script >
</ body >
</ html >
결과3
