Web/HTML CSS JS

Java Script - Array

dev_sr 2020. 9. 25. 13:35

배열은 같은 타입의 데이트를 담아두는 자료구조

자바스크립트는 동적 타입 언어이므로 다양한 타입을 한번에 담을 수 있음

ex) 토끼 배열 : 토끼, 검정 토끼, 하얀 토끼.. -> 내가 알던 배열

잡다한 배열 : 토끼, 당근, 자동차, 사자.. -> 자바스크립트에서 가능한 배열

 

가능하지만 안 쓰는 게 좋다고 함

 

 

1. 배열 만들기

int[] arr = new int[5]; 처럼 길이 안정해줌

'use strict';

//1.Declaration
const arr1 = new Array();
const arr2 = [1,2];

 

 

2. 인덱스 접근

이건 똑같다

//2. Index position
const fruits = ["사과","바나나"];
console.log(fruits);
console.log(fruits[fruits.length-1]);
console.log(fruits[0]);

배열에 없는 아이템에 접근할 경우 ex) fruits[2];

오류는 안나고 그냥 undefined 출력

 

 

 

3. 배열 전체 출력하기

for문으로 i++ 하면서 출력해도 되고

//3.배열 출력하기
for(let value of fruits)    //use strict를 쓰면 let을 써줘야함
{
    console.log(value);
}

for value of arr 이렇게 써도 됨

 

foreach를 쓸수도 있음

값과 인덱스, 배열을 매개변수로 받는 콜백함수를 정의해서 사용함

인자들은 생략 가능함

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

 

위랑 같은 내용

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

 

 

3. 추가, 제거

 

1) push

//push : 가장 뒤에 값을 추가함
fruits.push('망고','딸기');
console.log(fruits);    //사과 , 바나나, 망고, 딸기

 

2) pop

//pop : 제일 뒤에 있는 값을 빼고 반환해줌
let fruit = fruits.pop();   //여기선 확인해보려고 변수에 할당
console.log(fruit);     //딸기
console.log(fruits);    //사과, 바나나, 망고

 

3) unshift

//unshift : 가장 앞에 값을 추가
fruits.unshift("레몬");
console.log(fruits);    //레몬, 사과, 바나나, 망고

 

 

4) shift

//shift : 가장 앞의 데이터를 제거
fruits.shift();
console.log(fruits);    //사과, 바나나, 망고

 

unshift와 shift는 가장 앞의 데이터를 조작하는 만큼 가장 느리다

항목들을 전체적으로 밀고 당기면서 이동 시키기 때문

 

 

 

4. 특정 항목만 지우기(지우고 추가하기)

splice : 지정된 인덱스의 아이템 제거 (갯수는 옵션)

실행 전 fruits : 사과, 바나나, 망고

fruits.splice(1);   
console.log(fruits);    //사과
//몇개 지울건지 지정 안하면 그 인덱스부터 다 지워버림

인덱스 1부터 다 지워버림

 

 

갯수를 지정

실행 전 fruits : 사과, 바나나, 망고

fruits.splice(1,1); //인덱스 1부터 한개만 지울거야
console.log(fruits);    //사과 망고*/

 

 

지우고 그자리에 채워넣기

실행 전 fruits : 사과, 바나나, 망고

//인덱스 1 한개 지울건데 그 자리에 멜론이랑 코코넛 넣어놔
fruits.splice(1,1,'멜론','코코넛');
console.log(fruits);    //사과, 멜론, 코코넛, 망고

바나나를 없애고 그 자리에 멜론, 코코넛을 넣어둠

 

 

 

5. 배열 합치기

배열을 서로 합칠 수 있음

실행 전 fruit : 사과, 멜론, 코코넛, 망고

const fruit2 = ['포도', '복숭아'];
const newFruits = fruits.concat(fruit2);
console.log(newFruits); //사과, 멜론, 코코넛, 망고, 포도, 복숭아

 

 

6. 검색

1)indexOf : 해당 항목이 있는 곳의 인덱스를 출력

-1은 없는 항목을 나타냄

console.log(fruits); //사과 멜론 코코넛 망고
console.log(fruits.indexOf('사과'));    //0
console.log(fruits.indexOf('코코넛'));  //2 
console.log(fruits.indexOf('수박'));    //-1

 

 

2) includes 배열에 해당 아이템이 있는지 없는지 true/false로 반환

console.log(fruits.includes('수박'));   //F
console.log(fruits.includes('망고'));   //T

 

 

3) lastIndexOf 가장 뒤에서부터 항목을 찾아서 인덱스 반환

fruits.push('사과');
console.log(fruits);    //사과, 멜론, 코코넛, 망고, 사과
console.log(fruits.indexOf('사과'));    //0
console.log(fruits.lastIndexOf('사과')); //4

 

 

 

'Web > HTML CSS JS' 카테고리의 다른 글

Java Script - JSON  (0) 2020.09.25
JavaScript - array api  (0) 2020.09.25
Java Script - Object  (0) 2020.09.24
Java Script - Class  (0) 2020.09.24
Java Script - function  (2) 2020.09.23