배열 개념과 APIs

ME2DESIGNER.COM·2022년 3월 10일
0

JavaScript

목록 보기
13/16
post-thumbnail

배열 선언 방법

배열을 만드는 방법은 new Array()[] 이렇게 두 가지 방식이 있다.

const arr1 = new Array(1, 2);
console.log(arr1); // [1, 2]

const arr2 = [1, 2];
console.log(arr2); // [1, 2]



인덱스 접근 방법

  • 대괄호 [] 를 이용해서 데이터에 접근할 수 있다.
  • [] 숫자인덱스를 전달하게 되면, 그 인덱스에 해당하는 value들을 받을 수 있다.
  • 배열은 index가 0부터 시작하기 때문에, 총길이의 -1 을 하면 마지막 인덱스를 불러올 수 있다.
    const fruits = ["🍎", "🍌"];
    console.log(fruits); // ["🍎", "🍌"];
    console.log(fruits.length); // 2
    console.log(fruits[0]); // 🍎
    console.log(fruits[1]); // 🍌
    console.log(fruits[fruits.length - 1]); // 🍌



배열 반복

const fruits = ["🍎", "🍌"];

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

for (fruit of fruits) {
  console.log(fruit);
}

fruits.forEach((fruit) => console.log(fruit));

// fruits.forEach(function (fruit, index, array) {
//   console.log(fruit, index, array);
// });



배열 추가, 삭제, 복사

push, pop, shift, unshift

  • 배열 끝에 pushpop으로 인자를 추가하거나 뺄 수 있다.

  • unshiftshift로 아이템을 맨 첫 번째에 추가하거나 뺄 수 있다.

  • unshiftshift에 경우 데이터들이 재배열 과정이 수행되므로 데이터가 많을 수록 느려진다.

    const fruits = ["🍎", "🍌"];
    
    // push: add an item to the end
    fruits.push("🍓", "🍑");
    console.log(fruits);
    
    // pop: remove an item from the end
    fruits.pop();
    fruits.pop();
    console.log(fruits);
    
    // unshift: add an item to the begining
    fruits.unshift("🍓", "🍋");
    console.log(fruits);
    
    // shift: remove an item from the begining
    fruits.shift();
    fruits.shift();
    console.log(fruits);

splice

  • 시작하는 index와 함게 몇 개나 지우고 싶은지 써줘야 한다

    • arr.splice(2, 3) arr의 3번 index의 데이터를 포함한 총 3개(3번, 4번, 5번) 데이터를 삭제.
    • arr.splice(2, 1) arr의 3번 index의 데이터만 삭제.
    • arr.splice(2) arr의 3번 index부터 모든 데이터 삭제.
  • 원하는 데이터를 지우고 나서 또 데이터를 '그 자리에' 넣을 수도 있다.

    const fruits = [0, 1, 2, 3, 4, 5];
    
    fruits.splice(3, 1);
    console.log(fruits); // [0, 1, 2, 4, 5]
    
    fruits.splice(3);
    console.log(fruits); // [0, 1, 2]
    
    fruits.splice(1, 1, "가", "나", "다");
    console.log(fruits); // [0, '가', '나', '다', 2]

concat

  • 2가지의 배열을 묶어서 새로운 배열로 반환 한다.

    const fruits = [0, 1];
    const fruits2 = [2, 3];
    const newFruits = fruits.concat(fruits2);
    
    console.log(newFruits); // [0, 1, 2, 3]



검색

indexOf

  • 인자가 몇 번째에 위치해 있는지 검색이 가능하다.

  • 중복된 인자가 있는 경우 첫 번째로 나온 데이터를 출력한다.

  • 배열 안에 없다면 -1이 출력된다.

    const arr = ["가", "나", "다", "가"];
    
    console.log(arr.indexOf("다")); // 2
    console.log(arr.indexOf("라")); // -1

lastIndexOf

  • 중복된 인자가 있는 경우 맨 마지막 데이터를 출력한다.

    const arr = ["가", "나", "다", "가"];
    
    console.log(arr.lastIndexOf("가")); // 3

includes

  • 배열에 아이템이 있는지 없는지 true, false로 반환한다.

    const arr = ["가", "나", "다"];
    
    console.log(arr.includes("가")); // true
    console.log(arr.includes("라")); // flase
profile
UI 마크업 개발자 장지훈입니다.

0개의 댓글