728x90
반응형
SMALL
1. 배열(Array)이란❓
- 이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조)
- 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함
1-1. 배열 선언
let 배열명;
1-2. 배열 초기화
배열명 = [요소1, 요소2, ....]// 예)
let arr;
arr=[200, 300, 500];
let arr = [200, 300, 500];1-3. 배열 객체로 생성
const 배열명 = new Array(요소1, 요소2, ...);
1-4. 배열의 접근
let arr;
arr=[200, 300, 500];
console.log(arr[0]); // 100
console.log(arr[1]); // 200
console.log(arr[2]); // 300
2. 자바스크립트 배열의 특징
- 배열 요소의 타입이 고정되어 있지 않음
let arr = [1, 1.5, '김사과', true];- 배열 요소의 인덱스가 연속적이지 않아도 됨
let arr;
arr[0] = 1;
arr[1] = 20;
arr[4] = 5;
//index 2, 3은 undefined<!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>배열</title>
</head>
<body>
<h2>배열</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]) //크기가 정해지지 않은 array: undefined
user[4] = '서울 강남구' // 직접 값을 입력하여 변경할 수 있음
console.log(user[4])
console.log(user.length) // 5개
console.log('----------------')
user[6] = 'a형'
console.log(user[6]) // a형
console.log(user[5]) // undefined
console.log(user)
console.log(user.length) //7개
console.log('-------------')
for(let i=0; i<user.length; i++){
console.log(user[i])
}
</script>
</body>
</html>
3. Array 객체의 메소드
- push(): 배열의 요소를 추가
- pop(): 배열의 마지막 주소에 있는 값을 제거
- shift(): 배열의 첫번째 주소에 있는 값을 제거
- concat(): 두 개의 배열을 합침
- join(): 배열 요소 사이에 원하는 문자를 삽입
- reverse(): 배열을 역순으로 재배치
- sort(): 배열을 오름차순으로 정렬
<!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)
let result = user.pop() // 마지막값을 리턴하고 배열에서 삭제
console.log(user)
console.log(result)
console.log('-------------------')
result = user.shift()
console.log(user)
console.log(result)
console.log('-------------------') // 첫번째값을 리턴하고 배열에서 삭제
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))
const arr = ['a','z','c','f','r']
arr.sort() // 오름차순 정렬
console.log(arr)
arr.reverse() // 역순
console.log(arr)
console.log('-----------------')
</script>
</body>
</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>
<h3>배열3</h3>
<script>
const user = [1, 'apple', '김사과', 20, '서울 서초구']
const member = {'userid':'apple', 'name':'김사과','age':20}
//for in 문 배열 사용하기
for(let i in user){
console.log(`i: ${i}, user[i]: ${user[i]}`)
}
console.log('-----------')
// for in문 객체 사용하기
for(let i in user){
console.log(`i: ${i}, user[i]: ${user[i]}`)
}
console.log('-----------')
// for of문 배열 사용하기
// i에 value가 저장
for(let i of user){
console.log(`i: ${i}`)
}
console.log('-----------')
// forEach
// v: value값, i: index값, arr:배열 객체 전체
user.forEach(function(v, i, arr){
console.log(`v: ${v}, i: ${i}, arr: ${arr}`)
})
</script>
</body>
</html>
728x90
반응형
LIST
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 호이스팅(Hoisting)이란? & 함수 선언문과 함수 표현식에서의 호이스팅 (0) | 2023.04.11 |
|---|---|
| [JavaScript] 사용자 정의 함수(function) - 함수 선언과 함수 호출 (0) | 2023.04.11 |
| [JavaScript] 제어문 - 2️⃣ 반복문 (while문, for문, break, continue) (0) | 2023.04.10 |
| [JavaScript] 제어문 - 1️⃣ 조건문 (if문, swith문) (0) | 2023.04.07 |
| [JavaScript] 자바스크립트의 연산자(Operator) (0) | 2023.04.06 |
