2022.09.13 JavaScript Array

배열이란?

• 배열이란 자료구조(비슷한 데이터를 모아 놓음)이다. 

 

• 토끼 : <귀 두개, 먹는다, 뛴다> 행동(메소드, 함수) 가 있다.
• 당근 : <주황색, 비타민c> 프로퍼티만 존재.

Object는 서로 연관된 것들을 뫃아놓은 존재이고 

Array는 Object를 묶어 놓은 것을 말한다. 

const arr1 = [토끼, 토끼, 토끼];
const arr2 = [당근, 당근, 당근];

 

 

1. 배열의 선언 방법

const arr1 = new Array();

const arr2 = [1,2];

 

2.  index를 통한 배열접근

const fruits ['사과', '바나나'];
console.log(fruist[0]); // 사과 
console.log(fruist[1]); // 바나나

 

 

3. 출력하기

for(let i = 0; i < fruits.lenght; i++){
console.log(fruist);
}


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

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

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

 

add , delete, copy 

 

//뒤에서 추가하기, 뒤에서 삭제하기
//push
fruits.push('딸기', '복숭아');
console.log(fruits); // 사과, 바나나, 딸기, 복숭아

//pop
fruits.pop();
console.log(fruits); // 사과, 바나나, 딸기

//pop는 지운 값이 리턴이 된다. 
// const a = fruits.pop(); 
//console.log(a); = 복숭아
//리턴 한다는 개념이 매우 중요하다. 

//앞에서 추가하기, 앞에서 삭제하기
//unshift
fruits.unshift('레몬', '포도');
console.log(fruits); // 레몬, 포도, 사과, 바나나, 딸기

//shift
fruits.shift(); //레몬이 제거된다. 
console.log(fruits); //  포도, 사과, 바나나, 딸기

//unshift와 shift는 push와 pop보다 느림 

!*배열에 item이 있을 경우 뒤에서 추가, 삭제를 할 경우 앞의 데이터는 움직일 필요가 없음

[0,1,2,3] //3을 지우거나 4를 추가해도 앞의 0,1,2는 움직이지 않음

[0,1,2,3] //0을 지우거나 -1을 추가한다고 하면 item이 전부 한 칸씩 밀리거나 당겨짐. *!


// 전체 데이터가 움직이기 때문에 작업 처리의 속도가 달라짐


//item을 지정된 포지션에서 삭제하고 추가하기. 
//splice 스플라이스 
fruits=['사과', '배', '바나나', '망고', '복숭아'];
fruits.splice(시작하는 index번호, 몇 개나 지울건지);
//몇 개나 지울건지는 생략이 가능하며, 생략하게 되면 시작 index번호 뒤에 있는 모든 값이 지워진다. 
!*
fruits.splice(1, 1); = 1번 index부터 1개 지우겠다. 

 0	1	2	3	4  
사과	배	바나나	망고	복숭아

배가 지워지고 바나나부터 index번호가 당겨진다. 

*!

//splice 스플라이스 를 이용한 데이터 삽입

!*
fruits.splice(1, 1, 'a','b'); //= 1번째 index부터 1개를 지우고,
그 자리에 a와b를 순서대로 삽입하겠다. 

 0	1	2	3	4  
사과	배	바나나	망고	복숭아

0	1	2	3	4	5
사과	a	바나나	b	망고	복숭아


배가 지워지고 바나나부터 index번호가 당겨진다. 

*!

//추가 : 두 배열을 합치기
//concat
const arr2 =['귤, 코코넛'];
const arr3 = fruist.concat(arr2);
console.log(arr3); // 사과, a, 바나나, b, 망고, 복숭아, 귤, 코코넛
//합쳐진 배열의 값이 뒤로 온다.

 

 

 

 

 

 

 

 

5. searching 스캐닝 find the index

 

console.log(fruist.indexOf('사과')); // 0번
console.log(fruist.includes('')); // 사과 =true,  초콜렛 = false

//indexOf는 배열에 없는 값을 출력하면 -1이 출력된다. 
//만약 같은 값이 복수로 존재한다면 ['배', '사과', '사과', '배'] =>1 : 가장 앞의 값 출력 
//listIndex 는 가장 나중의 값을 출력한다. => 2