728x90
반응형
document.getElementById("btn1").addEventListener("click",function(){
//배열 선언 방법
const arr1 = new Array(3);//3칸짜리 배열 생성
const arr2 = new Array(); //0칸짜리 배열 생성
// console.log(arr1);
// console.log(arr2);
// 다른 자료형 대입
arr1[0]= "크로칸슈";
arr1[1]= 4500;
arr1[2] = true;
console.log(arr1);
//0칸 배열에 대입 -> 자동으로 길이 증가
arr2[0] = "피자";
arr2[1] = 7800;
arr2[2] = false;
console.log(arr2);
//배열 선언 방법
const arr3 = [] ; //비어있는 배열(0칸)
const arr4 = ["메론", "딸기", "수박"]; // 선언 및 초기화
//for문으로 배열 요소 반복 접근하기
//1. 일반 for문
//2. 향상된 for문(for ...of) : 배열용 향상된 for문
for(let fruit of arr4){// arr4 배열에서 요소를 하나씩 얻어와 fruit에 대입
console.log(fruit);
}
})
document.getElementById("btn2").addEventListener("click",function(){
//비어있는 배열 생성
const arr = [];
// push() : 배열의 마지막 요소로 추가
arr.push("삼계탕");
arr.push("삼겹살");
arr.push("치킨");
arr.push("마라탕");
arr.push("곱창")
console.log(arr);
// pop() : 배열의 마지막 요소 꺼내오기
console.log("꺼내온 요소 :" + arr.pop());
console.log(arr);
// 배열.indexof("값") : 일치하는 값을 가진 요소의 index를 반환,없으면 -1 반환
console.log("치킨 인덱스 : " +arr.indexOf("치킨"));
console.log("엽떡 인덱스 : " +arr.indexOf("엽떡"));
// 배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순 정렬(문자열)
// 단, [정렬기준 함수]가 작성되면 정렬 결과가 달라짐
const arr2 =[5,3,7,10,1]; //숫자 -> 정상 절렬 X
// 왜? 문자열로 변환되서 정렬되기 때문에
// (문자열 정렬 기준이 기본값)
console.log(arr.sort());
console.log(arr2.sort());
//숫자 오른차수 정렬
console.log(arr2.sort(function(a,b){return a-b}));
//문자열로 출력
console.log(arr.toString());
console.log(arr.join("/"));
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09_배열</title>
</head>
<body>
<h1>배열(Array)</h1>
<pre>
배열 : 변수를 묶음으로 다루는 것(변수가 연속적으로 나열됨)
* JS 변수 : 값이 저장되기 전까지 자료형이 지정되지 않음
JS 배열의 특징
1. 자료형 제한 X
2. 길이 제한 X
</pre>
<button id="btn1">배열확인1(콘솔)</button>
<hr>
<h3>배열 관련 함수</h3>
<pre>
(Stack 구조 관련 함수)
push() : 배열의 마지막 요소로 추가
pop() : 배열의 마지막 요소를 꺼내옴
배열.indexof("값") : 일치하는 값을 가진 요소의 index를 반환
없으면 -1 반환
배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순 정렬(문자열)
단, [정렬기준 함수]가 작성되면 정렬 결과가 달라짐
배열.toString() : 배열 요소를 하나의 문자열로 출력
-> 요소 사이에 "," 추가
배열.join("구분자") : 배열 요소를 하나의 문자열로 출력
-> 요소 사이에 "구분자"로 추가
</pre>
<button id="btn2">배열 확인2(콘솔 확인)</button>
<script src="js/09_배열.js"></script>
</body>
</html>
728x90
반응형
'괴발개발 > js' 카테고리의 다른 글
| 객체 (0) | 2024.06.19 |
|---|---|
| window 내장객체 (0) | 2024.06.19 |
| 문자열 숫자형 변환 (0) | 2024.06.18 |
| 정규표현식 (0) | 2024.06.17 |
| 자바스크립트 js 이벤트 (0) | 2024.06.14 |