07. Array 객체
with 조나현
배열이란?
js에서 자주 사용되는 자료형이다.
자바스크립트 안에 프로토타입 객체로 이미 만들어져 있다
Array 객체의 인스턴스로 배열을 만들면 Array 객체 안의 함수를 사용할 수 있다.
배열 만들기
1.Array 객체를 사용한 배열
var myArray = new Array( );
빈 괄호 사용시 배열의 개수 고정 X
Only 선언
2. Array 객체를 사용한 배열 (선언 + 할당)
var numbers = new Array(“one’, “two”, “three”);
3. 리터럴(선언과 동시에 값을 지정해주는 표기법)
var numbers = [“one”, “two”, “three”];
선언 + 할당
배열의 갯수 가져오기
var numbers = new Array(“one’, “two”, “three”);
numbers.length
< 3
numbers 배열에는 3개의 요소가 있다
FOR 문 활용하기
for (var i = 0; i < numbers.length; i++) {
console.log(numbers[ i ]);
}
< one
< two
< three
배열의 인덱스를 통해 접근
Index는 0 부터 length-1
Array 객체의 함수 활용
둘 이상의 배열을 연결 -> concat()
배열의 요소 연결 -> join()
배열에 요소 추가 -> push(), unshift()
배열에 요소 추출 및 삭제 -> pop(), shift()
배열에 요소 추가 및 삭제 -> splice()
배열에 요소 추출 -> slice()
concat( ) : 둘 이상의 배열을 연결
var nums = [“1”, “2”, “3”];
var chars = [“a”, “b”, “c”];
nums.concat(chars)
< [“1”, “2”, “3”, “a”, “b”, “c”]
chars.concat(nums)
< [“a”, “b”, “c”, “1”, “2”, “3”]
순서가 영향을 준다
기존의 두 배열에는 영향 X
join( ) : 배열 요소를 연결
var nums = [“1”, “2”, “3”];
nums.join()
< “1, 2, 3”
nums.join(“-”) // 구분기호 O
< “1-2-3”
기존의 배열에는 영향 X
( ) 안에 구분기호X -> default ‘ , ’
push( ) : 배열의 맨 끝에 새로운 요소 추가
var nums = [“1”, “2”, “3”];
nums.push(“4”, “5”)
< 5 // push 후의 배열의 개수 반환
nums
< [“1”, “2”, “3”, “4”, “5”]
return 값 : push 후의 배열의 개수 반환
unshift( ) : 배열의 맨 앞에 새로운 요소 추가
var nums = [“1”, “2”, “3”];
nums.unshift(“0”) // nums[0] = “0”
< 4 // unshift 후의 배열의 개수 반환
nums
< [“0”, “1”, “2”, “3”]
return 값 : unshift 후의 배열의 개수 반환
pop( ) : 배열의 맨 뒤의 요소를 추출
var nums = [“1”, “2”, “3”];
nums.pop( ) // nums[length-1] 추출
< “3” // 추출되는 요소 반환
nums
< [ “1”, “2”]
return 값 : 추출되는 요소 반
shift( ) : 배열의 맨 앞의 요소를 추출
var nums = [“1”, “2”, “3”];
nums.shift( ) // nums[0] 추출
< “1” // 추출되는 요소 반환
nums
< [ “2”, “3”]
return 값 : 추출되는 요소 반환
splice( ) : 원하는 위치의 요소를 삭제/추
인수가 1개 일때 - only 삭제기능
var nums = [“0”, “1”, “2”, “3” , “4” , “5”];
nums.splice(3) // nums[3] 부터 nums[length-1]까지 삭제
< [“3” , “4” , “5”] //추출되는 요소 반환
nums
< [“0”, “1”, “2”]
2. 인수가 2개일 때 – only 삭제기능
var nums = [“0”, “1”, “2”, “3” , “4” , “5”];
nums.splice(3, 1) // nums[3] 부터 1개의 요소 삭제
< [“3”] // 추출되는 요소 반환
nums
< [“0”, “1”, “2”, “4” , “5”];
3. 인수가 3개일 때 – 삭제 + 추가 기능
var nums = [“0”, “1”, “2”, “3” , “4” , “5”];
nums.splice(3, 1, “7”) // nums[3] 부터 1개의 요소 삭제 및 “7” 추가
< [“3”] //추출되는 요소 반환
nums
< [“0”, “1”, “2”, “7” , “4” , “5”]
4. 인수가 3개일 때 – only 추가 기능만 고자 할때
var nums = [“0”, “1”, “2”, “3” , “4” , “5”];
nums.splice(3, 0, “7”) //nums[3] 에 “7” 추가
< [ ] //추출되는 요소 반환-only추가이니 추출요소 없
nums < [“0”, “1”, “2”, “7” , “3”, “4” , “5”]
5. 인수가 3개일 때 – only 추가 기능(여러 개)
var nums = [“0”, “1”, “2”, “3” , “4” , “5”];
nums.splice(3, 0, “7”, “8”) //nums[3] 에 “7” “8” 추가
< [ ] //추출되는 요소 반환
nums
< [“0”, “1”, “2”, “7” , “8”, “3”, “4” , “5”]
slice( ) : 원하는 위치의 요소들을 추출
1. slice(n) => n부터 마지막 요소까지 추출
var nums = [“0”, “1”, “2”, “3” , “4” , “5”];
nums.slice(3) //nums[3] 부터 nums[length-1]까지 추출
< [“3” , “4” , “5”] //추출되는 요소 반환
nums
< [“0”, “1”, “2”, “3” , “4” , “5”] //기존 배열은 변경 X
2. slice(n) => n부터 마지막 요소까지 추출
var nums = [“0”, “1”, “2”, “3” , “4” , “5”];
nums.slice(3, 5) //nums[3] 부터 nums[4]까지 추출
< [ “3” , “4” ] //추출되는 요소 반환
nums
< [“0”, “1”, “2”, “3” , “4” , “5”] //기존 배열은 변경 X
배열 활용하여 여행 준비물 점검 프로그램 만들기
1. 배열 만들기
2. 챙길 물건 배열에 추가하기(push())
3. 추가한 내용 화면에 표시하기(생략)
4. 챙긴 물건 목록에서 삭제하기(splice())
Last updated
