자바스크립트 배열 개념과 APIs 총정리
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는 제일 뒤의 데이터를 출력