1. [Array 선언]
Array 선언은 기본적으로 2가지 방법이 있다.
1.
new키워드를 이용하는법
2.
[ ] 를 이용한 선언
아래 예시를 확인해보자
1. Array선언의 종류
1-1 new 키워드
const arr = new Array();
1-2 []를 이용한 선언
const arr2 = ['1','2'];
JavaScript
복사
2.[Index]
배열은 index를 기준으로 Data가 저장된다.
const fruits = ['🍔','🍗','🥡'];
console.log(fruits);
console.log(fruits.length);
//1번쨰 음식의 출력할려면 배열에서의 []이용해 데이터에 접근가능,
//Object에서는 'key'라는 string을 이용하면('name'.age)받아올수있었다
//그것처럼 배열은 숫자 index 를 전달하면 그 index에 해당하는 value를 받아올수 있다.
console.log(fruits[0]);
console.log(fruits[1]);
//배열의 마지막 index를 찾고 싶을 때
// 배열은 index가 0부터 시작하므로 전체 길이의 -1를하면 마지막 index의 정보를 가지고 올 수 있다.
console.log(fruits[fruits.length - 1]);
JavaScript
복사
3.[ Looping over an Array]
•
배열은 반복문을 이용하여 Data를 추출할 수 있다.
•
JavaScript에서는 총 3가지의 방법으로 Data를 추출
ㅁ 배열 예시 설정
const fruits = ['🍔','🍗','🥡'];
JavaScript
복사
1.
for
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}
JavaScript
복사
2.
for of
for of 사용법 :
for(for (const iterator of object) {
console.log(iterator)
}
for(let fruit of fruits) {
console.log(fruit)
}
JavaScript
복사
3.
for Each(Callback함수를 받아온다)
/**
* Performs the specified action for each element in an array.
* @param callbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.
* @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
*/
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
//3. forEach(callback함수를 받아온다)
fruits.forEach(function(fruit, index){
console.log(fruit,index);
});
console.log('익명함수는 arrow함수로 변경가능')
fruits.forEach((fruit,index) => {
console.log(fruit,index);
});
console.log('한줄만 있는경우 () 생략가능')
fruits.forEach((fruit,index) => console.log(fruit,index
JavaScript
복사
4. [ Addition, Deletion, Copy]
•
배열에서 값을 어떻게 add하고 ,delete하고 copy하는지 알아보자
1.
push : add an item to the end (뒤에서 부터 값을 넣는다)
const fruits = ['🍔','🍗','🥡'];
fruits.push('🍿');
JavaScript
복사
2.
pop : remove an item from the end ( 뒤에서 부터 값을 뺀다)
fruits.pop();
JavaScript
복사
1.
unshift : add an item to the beginning(앞에서 부터 값을 추가)
fruits.unshift('🥖','🥞');
JavaScript
복사
4.
shift : remove an item from the beginning(앞에서 부터 값을 삭제)
fruits.shift();
JavaScript
복사
**[Note]**
shift, unshift는 pop, push보다 속도가 느리다.
why ? 왜그럴까!!
pop과 push처럼 뒤에서부터 공간을 넣었다 빼는거는 빈공간에 추가햇다 지웠다가 하는거라 기존에 들어있는 데이터들을 움직이지 않아도되어서 한 공간에 index를 이용해서 넣고 뺴고 넣고뺴고 되서 빠르게 진행됨.
반대로 shift나 unshift는 앞에서 데이터를 넣을려면 원래있던 데이터를 뒤로하나씩 밀어서 맨앞을 비워놓고 집어넣어야하기떄문에이런일을 반복적으로해야되서 즉 배열의 길이가 길수록 shift, unshift 할려면 반복적으로 해야하기때문에 시간이 오래걸린다.
그래서 pop, push로하는게 속도면에서 좋다.
그리고 한가지 더 중요한 포인트는 제일 뒤에서 아이템에 접근하는것은 정말빠르고 중간에 데이터를 넣고 뺴는것도 인덱스를 활용해서하므로 빠르다
하지만 무언가 배열의 전체 데이터를 움직여야한다. shift, unshift처럼 느릴수밖에 없다,
길이가 길수록 더 느리다.
5. [splice - remove an item by index position]
◦
splice : item을 지정된 포지션에서 삭제하는것
fruits.push('🧁','🥗','🍻');
console.log(fruits);
// splice()는 만약 시작인덱스만쓰고 뒤에 몇개지울지 지정을 안해주면
// 시작인덱스부터 그 뒤에있는 인덱스에 data들을 다 삭제
// splice()는 시작인덱스, 시작인덱스부터 몇개지울지 count를 param으로 넘겨줘야한다
// ex : 1번쨰 인덱스부터 2개를 지우고싶다
fruits.splice(1,1);
console.log('splice적용')
console.log(fruits);
//fruits.splice(1,1,'','') -> 지워진 자리에 뒤에 데이터를 넣어준다
fruits.splice(1,1,'🍷','🍾');
JavaScript
복사
6. [concat - combine two arrays]
◦
concat : 배열들을 합쳐 준다.
const fruits2 = ['🍒','🍫'];
//frutis뒤에 fruits2를 묶는다.
const newFruits = fruits.concat(fruits2);
console.log(newFruits);
JavaScript
복사
7. [Searching - find the Index]
◦
JavaScript에서는 배열에서의 해당 index를 찾기위해서 indexOf와 lncludes를 쓴다.
//indexOf => 해당 배열이 몇번째에 있는지( 만약 해당하는 값이 없으면 -1이 출력!!)
console.log(fruits.indexOf('🍷')) ;
//includes => 해당 index가 포함이 되어있는지(true or false 반환)
console.log(fruits.includes('🍷'));
JavaScript
복사
8. [lastIndexOf]
◦
lastIndexOf : 배열의 index를 앞에서 찾지 않고 뒤에서부터 찾아들어가서 index를 반환해준다
console.log(fruits);
fruits.push('🥞');
console.log(fruits);
//indexOf는 앞에서 부터 찾기 시작
console.log(fruits.indexOf('🥞'));
//lastIndexOf는 뒤에서부터 찾기 시작
console.log(fruits.lastIndexOf('🥞'));
JavaScript
복사
