Stack/JavaScript

[JS] 배열(Array)

7ingout 2022. 5. 2. 09:29

배열선언

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>