[JS] 배열(Array)

2022. 5. 2. 09:29·Stack/JavaScript

배열선언

let arr = [];

let arr = new Array();

arr[0]

arr[1]

arr[2]

 

length 길이

배열에 담긴 요소의 갯수 arr.length

인덱스를 통해서 배열요소에 접근

 

배열요소의 값을 변경

arr[0] = '값';


배열에 배열요소를 추가

arr[arr.length] = '값'

arr[6] = '값'

 

배열 요소의 추가

arr[arr.length] = '값'

arr[6] = '값'

 

배열 요소를 삭제

delete arr[index]

 


 

01array.html

<!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>Document</title>
</head>
<body>
    <script>
        let fruits = ['🍉', '🍒', '🍓', '🍏', '🍊'];

        // for(let i=0; i <fruits.length; i++) {
        //     console.log(fruits[i])
        // }

        // console.log(fruits[0]);
        // console.log(fruits[1]);
        // console.log(fruits[2]);
        // console.log(fruits[3]);
        // console.log(fruits[4]);
        // console.log(fruits);

        // 마지막에 배열요소를 추가
        fruits.push('🍍');

        //제일 앞에 배열요소를 추가
        fruits.unshift('🥝');
        console.log(fruits);

        // 마지막 배열요소를 삭제
        fruits.pop();
        console.log(fruits);

        // 제일 앞 배열요소를 삭제
        fruits.shift();
        console.log(fruits);

        // fruits.forEach((fruit)=>{
        //     console.log(fruit)
        // })
        fruits.forEach(function(a, b, c){ // value, index, arr
            console.log(`첫번째 매개변수 자리에는 값 ${a}`);
            console.log(`두번째 매개변수 자리에는 index ${b}`);
            console.log(`세번째 매개변수 자리에는 배열 ${c}`);
        })
        fruits.forEach(value=>console.log(`첫번째 매개변수 자리에는 값 ${value}`));
        fruits.forEach(function(){
            console.log(list);
        })

        // 배열의 순회 (배열의 반복)
        for(let i =0; i<fruits.length; i++) {
            console.log(fruits[i]);
        }
        fruits.forEach(function(list){
            console.log(list);
        })
    </script>
</body>
</html>

 

02arrayfor.html

<!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>Document</title>
</head>
<body>
    <script>
        let arr= [1, 2, 3, 4, 5];
        console.log(arr);

        //배열의 반복문
        for(let i=0; i<arr.length; i++) {
            console.log(arr[i]);
        }
        arr.forEach(a=>{
            console.log(a);
        })
        for(let list of arr){
            console.log(list);
        }
        let fruits = ['🍒', '🍓', '🍎', '🍌'];
        for(let a of fruits){
            console.log(a)
        }
        fruits.push('🍋');
        console.log(fruits);
        fruits.pop();
        console.log(fruits);
        fruits.shift();    // 젤 앞 요소 삭제
        console.log(fruits);
        fruits.unshift('🍉');   // 젤 앞 요소 추가
        console.log(fruits);
    </script>
</body>
</html>

 

'Stack > JavaScript' 카테고리의 다른 글

[JS] 윤년 판별하기 / 소수 구하기  (0) 2022.05.04
[JS] 배열 메소드 / Number 메소드  (0) 2022.05.02
[JS] 반복문  (0) 2022.04.29
[JS] 조건문 2  (0) 2022.04.28
[JS] click 실습  (0) 2022.04.27
'Stack/JavaScript' 카테고리의 다른 글
  • [JS] 윤년 판별하기 / 소수 구하기
  • [JS] 배열 메소드 / Number 메소드
  • [JS] 반복문
  • [JS] 조건문 2
7ingout
7ingout
  • 7ingout
    Hello, 7ingout world!
    7ingout
  • 전체
    오늘
    어제
    • 분류 전체보기 (205)
      • Project (5)
      • Stack (173)
        • React (40)
        • JavaScript (50)
        • TypeScript (14)
        • HTML (11)
        • CSS (31)
        • Spring (9)
        • PHP (15)
        • SQL (3)
        • Python (0)
      • ETC (9)
      • Design (13)
        • Illustrator (6)
        • Photoshop (7)
      • Articloid (4)
        • 7ingout (4)
  • 공지사항

    • ☻
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
7ingout
[JS] 배열(Array)
상단으로

티스토리툴바