[JS] Array

박영준·2020년 9월 22일
1

Javascript 기초

목록 보기
6/7

Array

자료구조
index로 구성되어져 있음 0부터 시작
한배열안에는 동일한 타입을 넣을것
배열의 포인트 index
index로 접근해서 삽입,삭제가 편안함

1. Declaration

const arr1 = new Array(); //object을 만드는것 처럼 배열을 만들 수 있음
const arr2 = [1,2]; // 더 흔하게 쓰이는 방법

2. Index position

const fruits = ['apple', 'banana'];
console.log(fruits); // apple, banana
console.log(fruit.length); // 2 fruits라는 배열의 길이는 2개다.
// 첫번째 사과를 출력하려면
console.log(fruits[0]); // apple
console.log(fruits[2]); // undefined

배열의 첫번째 아이템을 찾으려면 fruits[0]
배열의 마지막 아이템을 찾으려면 fruits[fruits.length-1]

3. looping over an array

fruits안에 있는 모든 과일을 출력하기

const fruits = ['apple', 'banana'];

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

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

// 3. forEach 
// 배열안에 들어있는 value들마다 전달한 함수를 출력한다.
// forEach(callbackfn: value, index, array)
fruits.forEach(function (fruit, index, array){
  console.log(fruit, index, array); //일반적으로 array는 받아오지 않는다.
});

fruits.forEach((fruit, index) => {
  console.log(fruit, index); // 한줄만 있는 경우는 괄호,세미콜론 다 생략가능
});

fruits.forEach((fruit, index) => console.log(fruit, index));
// 이렇게 한줄로 표현가능

4. Addition, deletion, copy

1. push & pop

push: 배열 마지막에 추가, pop: 배열 마지막 아이템 삭제

const fruits = ['apple', 'banana'];

// push: add an item to the end
fruits.push('melon', 'grape'); 
console.log(fruits); // apple, banana, melon, grape
// pop: remove an item from the end
fruits.pop(); // 뒤에서부터 하나씩 지워진다.
console.log(fruits); // apple, banana, melon

2. unshift & shift

unshift가 추가 shift가 삭제이다. 주의!!!

const fruits = ['apple', 'banana'];

//unshift: add an item to the beginning 추가
fruits.unshift('melon', 'grape');
console.log(fruits); // melon, grape, apple, banana
//shift: remove an item from the beginning 삭제
fruits.shift();
console.log(fruits); // grape, apple, banana

unshift,shift는 push와 pop보다 훨씬 느리다.
unshift와 shift는 추가하고 삭제할때 배열 전체를 움직이기 때문에 동작이 더 느리다.
unshit,shift보다는 push와 pop을 사용하는것이 더 낫다.

3. splice

지정된 포지션에서 배열 아이템을 삭제및 추가가 가능하다.

fruits.splice(start: number, deleteCount?: number)

const fruits = ['apple', 'banana'];
fruits.push ('melon','grape');
console.log(fruits); // apple, banana, melon, grape

fruits.splice(1); // deleteCount를 쓰지 않으면 index1부터 다 지워진다.
console.log(fruits); // apple 

fruits.splice(1,1); // 원하는 개수만 지우고 싶다면 몇개나 지우고 싶은지 지정을 해줘야한다.
console.log(fruits); // apple, melon, grape

fruits.splice(1, 1, 'peach', 'watermelon')
// splice를 사용하여 원하는 곳에 데이터를 더 추가할 수도 있다.
console.log(fruits); // apple, peach, watermelon, melon, grape, 

4. concat

두가지의 배열을 묶어서 만들 수 있다.

const fruits = ['apple', 'banana'];
const fruits2 = ['mango', 'melon'];
const newFruits = fruit.concat(fruits2);
console.log(newFruits); // apple, banana, mango, melon
// concat 앞에 값이 먼저 나온다.

5. searching (indexOf, includes, lastIndexOf)

const fruits = ['apple', 'banana'];
fruits.push ('melon','grape');

//indexof -> fruits라는 배열안에 아이템이 몇번째 인지 알 수 있다.
console.log(indexOf ('apple')); 0
console.log(indexOf ('grape')); 3
console.log(indexOf ('peach')) //배열안에 없는 아이템을 넣으면 -1이 출력된다.

//includes -> fruits라는 배열에 아이템이 포함되어 있는지 확인한다. true/false
console.log(includes ('apple')); //true
console.log(includes ('peach')); // false

//lastIndexOf
fruits.push('apple'); //apple이 두개가 되었다.
console.log(fruits.indexOf); //첫번째 apple이 출력됨.
console.log(fruits.lastIndexOf); // 마지막 apple이 출력됨.
profile
React, React-Native Developer

0개의 댓글