배열(array)이란?
자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의
배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.
자바스크립트에서 배열의 특징은 다음과 같다.
1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있다.
2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있다.
3. 자바스크립트에서 배열은 Array 객체로 다뤄진다.
<!DOCTYPE html>
<html lang="ko">
<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>2022.07.20. 배열01 : </title>
</head>
<body>
<h1>배열을 공부하겠다ㅏㅏㅏㅏㅏ_01</h1>
<script>
// 1. 배열을 만드는 옛날 방법
const 걍배열 = new Array();
걍배열[3] = 1;
걍배열.push('하하하'); // 배열의 마지막 요소로 추가
걍배열.unshift('호호호'); // 배열의 첫번째 요소로 삽입
걍배열.shift(); // 첫번째 배열을 삭제
걍배열.pop(); // 마지막 배열 삭제
console.log(걍배열);
console.log(걍배열[3])
// 2. 배열을 만드는 요즘 방법
const 배열 = [];
배열[0] = 1;
console.log(배열)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>2022.07.20. 배열02 : </title>
</head>
<body>
<h1>배열을 공부하겠다ㅏㅏㅏㅏㅏ_02</h1>
<ul id="UL"></ul>
<script>
// 1. 배열을 돌아서(순회) 배열 각각을 표현 - 일반 for.
const 걍배열 = ['한놈', '두식이', '석삼', '너구리', '오징어'];
console.log(걍배열);
// for문 = 초기값, 비교값, 증가값 --- 강사가 for문을 싫어함
for (i = 0; i < 걍배열.length; i++) {
console.log(걍배열[i])
}
for (i = 걍배열.length - 1; i >= 0; i--) {
console.log(걍배열[i]);
}
// for ... in문 : i는 index key를 반환_0,1,2,3,4
for (i in 걍배열) {
console.log(i);
}
// for ... of문 : i는 value(값) key를 반환_1,2,3,4,5
for (i of 걍배열) {
console.log(i);
}
// for문을 이용해서 html을 생성해보았다.
for (i of 걍배열) {
UL.innerHTML += '<li>' + i + '</li>';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>2022.07.20. 배열03 : </title>
</head>
<body>
<h1>배열을 공부하겠다ㅏㅏㅏㅏㅏ_03 forEach</h1>
<div id="tapMenu">
<ul class="tMenu">
<li>menu01</li>
<li>menu02</li>
<li>menu03</li>
</ul>
<div class="tContent">
<div>content01</div>
<div>content02</div>
<div>content03</div>
</div>
</div>
<script>
const 걍배열 = [
{ id: 1, content: '빙빙꼬였네 스크류바' },
{ id: 2, content: '거꾸로해도 바밤바' },
{ id: 3, content: '상어도 무서운 죠스바' },
{ id: 4, content: '간석기 빠삐코' },
{ id: 5, content: '설레임' },
{ id: 6, content: '구구81 구구콘' },
{ id: 7, content: '투게더와 쿠앤크' },
];
// 배열을 도와주는 함수 01. forEach
// 걍배열의 메소드로 들어온 forEach이고 el하나하나를 매개변수로 가지고 들어옴
걍배열.forEach((el, idx, arry) => console.log(el.content, idx, arry)); // 매개변수로 가지고 오는 거라서 el대신에 다른 단어로도 사용가능
// 번호반환으로 tap메뉴 만들 수 있음
const TUL = document.querySelectorAll('.tMenu>li'); //유사배열는 forEach로 다룰 수 있음
const TCON = document.querySelectorAll('.tContent>div');
console.log(TUL);
TUL.forEach((el, idx) => {
el.addEventListener('click', () => {
TUL.forEach(el => el.classList.remove('on'))
el.classList.add('on');
// console.log(idx);
TCON.forEach(el => el.classList.remove('on'))
TCON[idx].classList.add('on');
})
});
const 스프레드 = [...TUL]; //배열이고 나열해뒀다~
console.log(스프레드)
const UL = document.querySelector('.tMenu');
const LI = [...UL.children]; //html덩어리를 반환하고 배열이 아님
console.log(LI);
// indexOf() 배열의 번호(index)를 받아옴
UL.addEventListener('click', e => {
// console.log(e.target, e.currentTarget)
let idx = LI.indexOf(e.target)
console.log(idx)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>2022.07.20. 배열04 : </title>
</head>
<body>
<h1>배열을 공부하겠다ㅏㅏㅏㅏㅏ_04</h1>
<ul id="UL"></ul>
<script>
// indexOf으로 index 반환하기
const 걍배열 = ['한놈', '두식이', '석삼', '너구리', '오징어'];
const 숫자배열 = [10, 28, 4, 38, 6, 45]
const idx = 걍배열.indexOf('석삼');
console.log(idx)
// includes 포함하고 있는가를 판별해서 참/거짓으로 반환
const 있는가 = 걍배열.includes('너구리');
console.log(있는가)
const 찾기 = 걍배열.find(el => el === '오징어')
console.log(찾기);
// find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환
const 찾기2 = 숫자배열.find(el => el > 12);
console.log(찾기2);
// filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
const 찾기3 = 숫자배열.filter(el => el > 12);
console.log(찾기3);
// slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않음.
const 배열자르기 = 걍배열.slice(0, 3);
console.log(배열자르기)
// reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다. = 배열자체의 순서를 바꿈
const 배열순서바꾸기 = [...걍배열].reverse(); // [...걍배열].reverse();은 배열을 삭제하는 방법
console.log(배열순서바꾸기)
console.log(걍배열)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>2022.07.21. 배열05 :</title>
</head>
<body>
<ul id="UL"></ul>
<script>
const DATA = [
{ id: 1, content: "나는 메로나다.", date: "2022.07.21." },
{ id: 1, content: "나는 바밤바다.", date: "2022.07.21." },
{ id: 1, content: "나는 티코다.", date: "2022.07.21." },
{ id: 1, content: "나는 쿠앤크다.", date: "2022.07.21." },
{ id: 1, content: "나는 투게더다.", date: "2022.07.21." }
]
const RESULT = DATA.map(el => `<li>${el.content}</li>`).join(''); //join('')은 배열의 원소들을 연결하여 하나의 값으로 만듭니다. 여기서는 ,를 없애려고 join('')을 사용
console.log(RESULT);
document.querySelector('#UL').innerHTML = RESULT;
// <ul ul id="UL" >
// {
// DATA.map (
//<li>{data.content}</li>
// )
// }</ul>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>25022.07.21. 배열06 :</title>
</head>
<body>
<figure></figure>
<ul id="UL"></ul>
<script>
const DATA = [
{ id: 1, content: "나는 메로나다.", date: "2022.07.21." },
{ id: 2, content: "나는 바밤바다.", date: "2022.07.20." },
{ id: 3, content: "나는 티코다.", date: "2022.07.19." },
{ id: 4, content: "나는 쿠앤크다.", date: "2022.07.18." },
{ id: 5, content: "나는 메로나다.", date: "2022.07.17." }
]
const RESULT = DATA.filter(el => el.id !== 3);
const NEWLIST = RESULT.map(data => `<li>${data.content} <small>${data.date}</small><button>삭제</button></li>`).join('')
console.log(NEWLIST);
UL.innerHTML = NEWLIST;
// const BTN = document.querySelectorAll('button')
// console.log(BTN)
// BTN.forEach((button, idx) => {
// button.addEventListener('click', () => { console.log(idx) })
// })
</script>
</body>
</html>