배열함수를 연습하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 자신이 좋아하는 것을 5가지 담은 배열을 생성
// 2. 배열 출력하기 (document.write)
// 제가 좋아하는 것은 ~,~,~,~,~ 입니다!
// 3. 배열의 마지막 요소를 제거하시오.
// 4. 배열 출력하기 (document.write)
// 제가 좋아하는 것은 ~,~,~,~ 입니다!
// 5. 배열의 마지막 요소에 '코딩' 추가
// 6. 배열 출력하기 (document.write)
// 제가 좋아하는 것은 ~,~,~,~,코딩 입니다!
// 7. 배열 속 코딩이 존재하는지 확인 => document.write
// "저는 코딩을 좋아합니다!" 출력
// 8. 기존 배열 속 인덱스 1번부터 3개의 데이터를 삭제
// 9. 최종 배열 출력하기 (document.write)
// 제가 좋아하는 것은 ~,코딩 입니다!
let likeList = ["휴식", "강아지", "게임", "음악", "걷기"] // 리스트 선언
document.write("제가 좋아하는 것은 " + likeList + "입니다");
document.write("<hr>") // 구분선
likeList.pop(); // 마지막 요소 제거
document.write("제가 좋아하는 것은 " + likeList + "입니다");
document.write("<hr>")
likeList.push("코딩") // 맨 뒤에 요소 추가
document.write("제가 좋아하는 것은 " + likeList + "입니다");
document.write("<hr>")
likeList.includes("코딩")?document.write("저는 코딩 좋아해요"):document.write("저는 코딩 싫어해요")
document.write("<hr>")
if (likeList.includes("코딩")) { // 코딩 요소 있는 지 확인
document.write(`저는 ${likeList[likeList.length - 1]}을 좋아합니다..?`) // 마지막 요소
}
document.write("<hr>")
likeList.splice(1, 3) // 인덱스 1번부터 3개 삭제
document.write("제가 좋아하는 것은 " + likeList + "입니다");
</script>
</body>
</html>1. 배열 생성
let likeList = ["휴식", "강아지", "게임", "음악", "걷기"] // 리스트 선언let을 사용해서 배열 선언하기.
2. 배열의 마지막 요소 제거
likeList.pop(); // 마지막 요소 제거pop함수를 사용해서 마지막 요소를 제거한다.
document.write(배열. pop())을 하면 마지막 요소가 출력된다.
→ pop함수는 제거하는 것도 맞지만 마지막 요소를 꺼낸다고 생각하면 도움이 된다. (파이썬과 같다.)
3. 배열의 마지막 요소에 "코딩" 추가
likeList.push("코딩") // 맨 뒤에 요소 추가push함수를 사용해서 마지막 요소에 넣고 싶은 요소를 밀어 넣는다.
4. 배열 속 "코딩"이 존재하는 지 확인
likeList.includes("코딩")?document.write("저는 코딩 좋아해요"):document.write("저는 코딩 싫어해요")
if (likeList.includes("코딩")) { // 코딩 요소 있는 지 확인
document.write(`저는 ${likeList[likeList.length - 1]}을 좋아합니다..?`) // 마지막 요소
}첫 번째는 삼항연산자 방법으로 푼 방법이다. 배열. includes("요소")의 결괏값은 boolean형이기 때문에 조건식이 들어간 방법으로 풀 수 있다.
두 번째 방법은 생각하기 쉽게 if문으로 접근한 방법이다. 조건식의 배열. includes("요소")가 true면 배열 안에 "코딩"이 존재한다는 의미이기 때문에 실행로직이 실행된다.
5. 기존 배열의 인덱스 1번부터 3개의 데이터 제거
likeList.splice(1, 3) // 인덱스 1번부터 3개 삭제
// 5. slice() - 추출(기존 배열에 영향 X) vs splice() - 제거(기존 배열에 영향 O)
// 5 - 1) 배열이름.slice() 마지막 인덱스 포함 X (파이썬과 같다.)
console.log("unit", lunch.slice(0,3));
console.log("기존", lunch);
// 5 - 2) 배열이름.splice(시작인덱스, 제거할개수, 대체값)
// 제거할 개수 0으로 하면 대체값만 추가됨
lunch.splice(1, 2, "냉면")
console.log("현재 배열", lunch)splice함수를 사용해서 기존 인덱스의 요소를 제거하는 방법이 있다.
spice함수의 사용 방법은 코드블럭의 5 - 2) 부분을 참고하면 된다.
'Front-End > 1. JavaScript 기초' 카테고리의 다른 글
| [JS] Ex22_버블정렬.html (0) | 2023.06.15 |
|---|---|
| [JS] Ex21_가위바위보_실습.html (0) | 2023.06.15 |
| [JS] Ex19_배열실습.html (0) | 2023.06.15 |
| [JS] Ex18_배열.html (0) | 2023.06.14 |
| [JS] Ex17_while문_실습2.html (0) | 2023.06.14 |
