프로그래밍 언어/Javascript

자바스크립트 배열 개념과 APIs 총정리

김곰댕 2021. 8. 23. 17:00
728x90

1) 비슷한 데이터를 한곳에 모아놓는것 : 자료구조

2) 오브젝트와 자료구조의 차이점 : 오브젝트 (서로 연관된 특징과 행동을 묶어놓는 것), 자료구조(비슷한 타입의 오브젝트들을 묶어놓는것)

3) 보통 자료구조에 동일한 타입의 자료만 넣을 수 있지만, 자바스크립트에서는 다양한 종류의 데이터를 넣을 수 있음, 하지만 추천하지 않음


배열 

1) 인덱스는 0부터 시작

2) 한 배열에 동일한 타입의 자료를 넣는 것이 좋음

3) 인덱스로 접근하여 데이터 삭제가 가능 (삽입과 삭제가 편함)


<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" consent="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="array.js"></script>
    </head>
    <body></body>
</html>

1. 배열의 선언

const arr1 = new Array(); //선언
const arr2 = [1,2]; //총 길이가 2인 배열

2. Index position

const fruits = ['🍎', '🍌'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]); //인덱스에 해당하는 값을 가져올 수 있음
console.log(fruits[1]);
console.log(fruits[2]); //값이 지정되지 않았기 때문에 undefiend
console.log(fruits[fruits.length - 1]); //배열의 길이 -1을 하면 배열에 저장된 제일 마지막 값이 출력됨

출력 결과

3. Looping over an array

1) for

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

출력 결과

2) for of

for(const value of fruits)
{
    console.log(value);
}

출력 결과

3) forEach

- 배열안에 들어있는 value들 마다 내가 전달한 함수를 출력

- forEach에는 함수 전달이 가능

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

출력 결과

위의 코드를 arrow function을 통해 좀 더 간결하게 표현

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

출력 결과

4. Addtion, deletion, copy

1) push : 뒤에서부터 데이터를 추가

fruits.push('🍇','🍊');
console.log(fruits);

출력 결과

2) pop : 뒤에서부터 데이터를 제거

fruits.pop(fruits);
fruits.pop(fruits);
console.log(fruits);

출력 결과

3) unshift : 앞에서부터 데이터를 추가

fruits.unshift('🍇','🍊');
console.log(fruits);

출력 결과

4) shift : 앞에서부터 데이터를 제거

fruits.shift(fruits);
fruits.shift(fruits);
console.log(fruits);

출력 결과

- shift와 unshift는 pop과 push보다 많이 느림 : shift와 unshift는 제일 앞에 데이터를 넣고 빼는 것이기 때문에 나머지 데이터들을 이동시켜주어야 해서 (배열의 길이가 길어질수록 더 느려짐)
- 중간에 데이터를 넣고 빼는것은 index를 이용하기 때문에 빠름

5) splice(지우기 시작하고싶은 index, 지우고싶은 갯수) : 아이템을 지정된 position에서 지우는 것

fruits.push('🍍','🍋','🍉');
console.log(fruits);
fruits.splice(1,1);
console.log(fruits);
fruits.splice(1,1,'🍑','🍋'); //1번째 데이터로부터 1개만 지우고 그 자리에 복숭아와 레몬 삽입
console.log(fruits);
fruits.splice(1); //시작 데이터 하나만 남기고 모두 삭제
console.log(fruits);

출력 결과

6) combine two arrays : 두개의 배열이 합해져서 return

const fruits2 = ['🍐','🥥'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);

출력 결과

5. Searching

console.log(fruits);

출력 결과

1) indexof : 해당 데이터의 인덱스를 찾고 싶을 때

console.log(fruits.indexOf('🍎'));
console.log(fruits.indexOf('🍐')); //배열에 들어있지 않은 데이터이면 -1을 출력

출력 결과

2) includes : 배열에 해당 데이터가 있는지 없는지 검사 (있으면 true)

console.log(fruits.includes('🍎'));

출력 결과

3)lastIndexOf

fruits.push('🍎');
console.log(fruits);
//같은 데이터가 2개 이상 들어가 있는경우
console.log(fruits.indexOf('🍎')); //indexOf는 제일 앞의 데이터를 출력
console.log(fruits.lastIndexOf('🍎')); //lastIndexOf는 제일 뒤의 데이터를 출력

출력 결과

 

728x90