SMALL
1. 배열(Array)
- 이름과 인덱스로 참조되는 정렬된 값의 집합(자료 구조)
- 배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함
- 배열선언
 |
- 배열 초기화
- 배열명 = [요소1, 요소2, 요소3, 요소4 ...]
 |
 |
- 배열의 접근
 |
| 리스트와 동일 |
- 자바스크립트 배열의 특징
1. 배열 요소의 타입이 고정되어 있지 않음
2. 배열 요소의 인덱스가 연속적이지 않아도 됨
|
<body>
<h2> 배열1 </h2> <script>
const user =[1,'apple','김사과', 20, '서울서초구'];
console.log(user);
console.log(`=====================`); console.log(user[0]); // 1
console.log(user[1]); // apple
console.log(user[2]); // 김사과
console.log(user[3]); // 20
console.log(user[4]); // 서울 서초구
console.log(user[5]); //undifined
console.log(`=====================`);
user[4] = '서울 강남구'
console.log(user[4]); // 서울 강남구
console.log(`=====================`);
console.log(user.length); // 5
console.log(`=====================`);
for(let i=0; i<user.length; i++) {
console.log(user[i])
}
// 1 // apple // 김사과 // 20 // 서울 강남구 </script>
</body>
|
 |
- Array 객체의 매서드
- push(): 배열의 요소를 추가
- pop(): 배열의 마지막 인덱스 번호에 있는 값을 제거
- shift(): 배열의 첫번째 인덱스 번호에 있는 값을 제거
- concat(): 배열을 합침
- join(): 배열 요소 사이에 원하는 문자를 삽입
- sort(): 배열을 오름차순으로 정렬
- reverse(): 배열을 역순으로 재배치
|
<body>
<h2> 배열2 </h2> <script>
const user = [1, 'apple', '김사과', 20, '서울서초구'];
//push(): 배열의 요소를 추가
user.push('여자');
console.log(user);
//1
//apple
//김사과
//20
//서울 서초구
//여자 console.log(`------------------`);
//pop():배열의 마지막 인덱스 번호에 있는 값을 제거
let temp = user.pop();
console.log(user);
console.log(temp);
//1
//apple
//김사과
//20
//서울 서초구
//여자 console.log(`------------------`);
//shift():배열의 첫번째 인덱스 번호에 있는 값을 제거
console.log(user);
temp = user.shift();
console.log(user);
console.log(temp);
//apple
//김사과
//20
//서울 서초구
//1 console.log(`------------------`);
//concat(): 두 배열의 요소를 합침
const profile = ['여자', 'A형','istp'];
result = user.concat(profile);
console.log(result);
console.log(`------------------`);
//apple
//김사과
//20
//서울 서초구
//여자 //A형 //istp //join(): 배열 요소 사이에 원하는 문자를 삽입
result = user.join(`😁`);
console.log(result);
console.log(typeof(user)); //object
console.log(typeof(result)); //string
console.log(`------------------`);
//apple😁김사과😁20😁서울 서초구
const arr = ['a','z','c','f','r'];
//sort(): 배열을 오름차순으로 재배치
arr.sort();
console.log(arr);
//a //c //f //r //z //reverse(): 배열을 역순으로 재배치
arr.reverse();
console.log(arr);
//z
//r //f //c //a </script>
</body>
|
 ------------------------------------------------------------------------------------------------------  ------------------------------------------------------------------------------------------------------  ------------------------------------------------------------------------------------------------------  ------------------------------------------------------------------------------------------------------  ------------------------------------------------------------------------------------------------------  -------------------------------------------------------------------------------------------------------  |
- 배열을 이용한 반복
- for in 문
변수의 배열의 인덱스 또는 객체의 key가 저장되면 반복
- for in 문
 |
| 예) 1. i에는 인덱스 번호가 저장 2. i에는 키가 저장 |
|
<body>
<h2> for in 문 </h2> <script>
const userArr = [1, 'apple', '김사과', 20, '서울 서초구']
const userObj = {userid:'apple', name:'김사과', age:20}
//for in 배열
for(let i in userArr){
console.log(`i:${i}, userArr[${i}]: ${userArr[i]}`);
}
// ${i} => 0, 1, 2, 3, 4 // ${userArr[i]} => 1, apple, 김사과, 20, 서울 서초구 console.log(`------------------`);
//for in 객체
for(let i in userObj){
console.log(`i:${i}, userObj[${i}]: ${userObj[i]}`);
}
// ${i} => userid, name, age // ${userObj[i]} = apple, 김사과, 20 //i:userid, userObj[userid]:apple
//i:name, userObj[name]: 김사과 //i:age userObj[age]: 20 </script>
</body>
|
 |
- for of 문
변수의 배열의value 또는 객체의value가 저장되며 반복
 |
| v에 값이 저장 (객체는 오류) |
|
<body>
<h2> for of 문 </h2> <script>
const userArr = [1, 'apple', '김사과', 20, '서울 서초구']
const userObj = {userid:'apple', name:'김사과', age:20}
//for of 배열
for(let v of userArr){
console.log(`v:${v}`);
}
console.log(`------------------`);
// ${v} => 1, apple, 김사과, 20, 서울 서초구 //for of 객체 //에러
for(let v of userObj){
console.log(`v:${v}`);
}
</script>
</body>
|
 |
- forEach 문
: 배열에서만 사용 가능하며, 요소의 개수만큼 반복
   |
|
<body>
<h2> forEach문 </h2> <script>
const userArr = [1, 'apple', '김사과', 20, '서울 서초구']
const userObj = {userid:'apple', name:'김사과', age:20}
//forEach문
userArr.forEach(function(v, i, arr){
console.log(`v:${v}, i:${i}, arr:${arr}`);
});
// ${v} : 1, apple, 김사과, 20, 서울 서초구 (하나씩) // ${i} : 0, 1, 2, 3, 4 // ${arr} : arr: 1, apple, 김사과, 20, 서울 서초구 (전체) // v:1, i=0, arr: 1, apple, 김사과, 20, 서울 서초구 (전체) // v:apple, i=1, arr: 1, apple, 김사과, 20, 서울 서초구 (전체) // v:김사과, i=2, arr: 1, apple, 김사과, 20, 서울 서초구 (전체) // v:20, i=3, arr: 1, apple, 김사과, 20, 서울 서초구 (전체) // v:서울 서초구, i=4, arr: 1, apple, 김사과, 20, 서울 서초구 (전체) </script>
</body>
|
 |
'Web > JavaScript' 카테고리의 다른 글
| 07. 객체(Object) (0) | 2024.04.16 |
|---|---|
| 06. 함수(Function) (0) | 2024.04.16 |
| 04. 연산자, 제어문, 반복문 (0) | 2024.04.16 |
| 03. 데이터타입, 대화상자 (0) | 2024.04.16 |
| 02. 변수(let), 상수(const) (0) | 2024.04.16 |
