2024년 4월 16일 JavaScript-Array
배열(Array)
- 이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조)
- 배열을 구성하는 각각의 값을 배열요소하고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함
배열 선언
let 변수명
배열 초기화
변수명 = [요소1, 요소2, 요소3, ...]
let arr
arr = [100, 200, 300]
배열 생성 함수
let 변수명 = Array(요소1, 요소2, 요소3, ..)
배열의 접근
let arr = [100, 200, 300]
arr[0] // 100
arr[1] // 200
arr[2] // 300
자바스크립트 배열의 특징
1. 배열 요소의 타입이 고정되어 있지 않음
let arr = [1, 1.5, '김사과', true]
2. 배열 요소의 인덱스가 연속적이지 않아도 됨
let arr
arr[0] = 1
arr[1] = 100
arr[4] = 10
arr[2], arr[3] == undefind
배열을 이용한 반복
for in 문
변수에 배열의 인덱스 또는 객체의 kㄷy가 저장되며 반복
const arr = [10, 20, 30]
const user = {userid;'apple', name:'김사과', age:20}
예)
for(let i in arr){
...// i: 0, 1, 2 (i에는 인덱스 번호가 저장)
}
for(let i in user){
...// i: userid, name, age(i에는 키가 저장)
}
for of 문
변수에 배열의 value 저장되며 반복
예)
for(let v of arr){
... // v :10, 20, 30
}
forEach문
배열에서만 사용 가능하며 요소의 개수만큼 반복
변수명.forEach(function(변수1, 변수2, 변수3){
...
})
변수1: value
변수2: index
변수3: 모든 배열요소가 저장
* 변수2, 변수3은 생략 가능
예)
const arr = [10,20,30]
arr.forEach(function(v, i, a){
cnosole.log(v) // 10, 20, 30
cnosole.log(i) // 0, 1, 2
cnosole.log(a) // [10,20,30], [10,20,30], [10,20,30]
})
1. 배열
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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])
user[4] = '서울 강남구'
console.log(user[4])
console.log(user.length)
console.log('-------------')
for(let i=0; i<user.length; i++){
console.log(user[i])
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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, '서울 서초구']
// push(): 베열의 요소를 추가
user.push('여자')
console.log(user)
// pop(): 배열의 마지막 인덱스 번호에 있는 값을 제거
let temp = user.pop()
console.log(user)
console.log(temp)
console.log('---------------')
// shift(): 배열의 첫 번째 인덱스 번호에 있는 값을 제거
console.log(user)
temp = user.shift()
console.log(user)
console.log(temp)
console.log('---------------')
// concat(): 두 배열의 요소를 합침
const profile = ['여자', 'A형', 'istp']
result = user.concat(profile)
console.log(result)
console.log('---------------')
// join(): 배열 요소 사이에 원하는 문자를 삽입
result = user.join('😊')
console.log(result)
console.log(typeof(user))
console.log(typeof(result))
console.log('---------------')
const arr = ['a', 'z', 'c', 'f', 'r']
// sort(): 배열의 요소를 오름차순
arr.sort()
console.log(arr)
// reverse(): 배열을 역순으로 재배치
arr.reverse() // 역순 -> 내림차순
console.log(arr)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열3</title>
</head>
<body>
<h2>배열3</h2>
<script>
const userArr = [1, 'apple', '김사과', 20, '서울 서초구']
const userObj = {user:'apple', name:'김사과', age:20}
// for in 배열
for(let i in userArr){
console.log(`i:${i}, userArr[${i}], ${userArr[i]}`)
}
console.log('---------------')
//for in 객체
for(let i in userObj){
console.log(`i:${i}, userObj[${i}], ${userObj[i]}`)
}
console.log('---------------')
// for of 배열
for(let v of userArr){
console.log(`v:${v}`)
}
console.log('---------------')
//for of 객체
//TypeError: userObj is not iterable
// for(let v of userObj){
// console.log(`v:${v}`)
// }
console.log('---------------')
userArr.forEach(function(v, i, arr){
console.log(`v:${v}, i:${i}, arr:${arr}`)
})
</script>
</body>
</html>