배열은 같은 타입의 데이트를 담아두는 자료구조
자바스크립트는 동적 타입 언어이므로 다양한 타입을 한번에 담을 수 있음
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 |