array개념과 활용방법
Array
자료구조
어떤 방식으로 어떤 형식으로 자료를 담느냐에 따라서 -
object와 자료구조의 차이점
비슷한 타입의 오브젝트들을 묶어 놓는 것을 자료구조라고 함
다른 언어에서는 동일한 타입의 오브젝트만 담을 수 있지만,
자바스크립트는 dynamically typed language 이기 때문에
한 바구니 안에 다양한 종류의 데이터를 담을 수 있음 하지만 이렇게 프로그래밍하는 것은 좋지 않음.
한 배열 안에는 동일한 타입의 데이터를 넣는 것이 좋음 !
배열의 포인트는 인덱스 ! - 인덱스를 사용하면 삽입과 삭제가 편함 !
1. 배열 선언 방법
const arr1 = new Array();
const arr2 = [1,2];2. 인덱스 통해서 배열에 접근하는 방법
const fruits = ['사과', '바나나'];
console.log(fruits); // ["사과","바나나"]
console.log(fruits.length); // 2
console.log(fruits[0]); // 사과
console.log(fruits[1]); // 바나나
console.log(fruits[2]); // undefined
//배열 마지막 데이터 접근 하는 방법
console.log(fruits[fruits.length-1]);
3. 배열안에 들어있는 전체적인 데이터를 돌리며 출력하기
과일 안에 들어있는 모든 과일 출력하기
1) for loop
for (let i = 0; i<fruits.length; i++){
console.log(fruits[i]);
}
//fruits.length =2
//i가 0부터 시작 프룻의 0번째인 사과 출력
//1증가 프룻의 1번째인 바나나 출력
//1증가 2가 되면 멈춤 2) for of
for(let fruit of fruits){
console.log(fruit);
}
//fruit이라는 변수에 fruits안에 있는 데이터를 순차적으로 할당하면서 실행3) forEach (콜백함수를 받아옴)
fruits.forEach(function(fruit, index, array){
console.log(fruit, index, array);
});
//arrow 함수 형태로 표현
fruits.forEach((fruit)=>console.log(fruit));배열안에 들어있는 값마다 정해진 콜백함수 수행
forEach(callbackfn:(value:T, index:number, array:T[])=>void, thisArg?:any) : void;
//우리가 정해놓은 함수를 밸류 하나하나마다 호출,
//?로 되어있으면 파라미터를 전달해도 되고 전달하지 않아도 되는 것.
//우리가 전달한 콜백함수를 밸류마다 호출해주고, 콜백함수에는 총 세가지의 인자가 들어오는구나 (밸류, 그 값이 들어있는 인덱스, 전체적인 배열)4. 배열에 데이터 넣기, 삭제하기, 복사하기
push : 아이템을 배열 제일 뒤에 넣기
fruits.push('딸기','복숭아');
console.log(fruits); // (4) ["사과","바나나","딸기","복숭아"]
pop: 배열에서 제일 뒤에서부터 아이템을 지우기
fruits.pop();
fruits.pop();
console.log(fruits);// (3) ["사과","바나나"]unshift : 앞에서부터 데이터 넣기
fruits.unshift('딸기','레몬');
console.log(fruits); //(4)["딸기","레몬","사과","바나나"]shift : 앞에서부터 데이터 빼기
fruits.shift();
fruits.shift();
console.log(fruits); // (3)["사과","바나나"]
shift와 unshift는 pop과 push보다 훨씬 느림
splice : 아이템을 지정된 포지션에서 지우는 것도 가능
fruits.push('딸기','복숭아','레몬');
console.log(fruits); // (5) ["사과","바나나","딸기","복숭아","레몬]
fruits.splice(1);
console.log(fruits);//["사과"] 몇개 지울지 지정하지 않으면 인덱스 번호부터 다 지움
fruits.splice(1,1); ```
console.log(fruits) // (4) ["사과","딸기","복숭아","레몬"]
//지우기 시작할 인덱스 번호, 몇개나 지울건지
//splice로 원하는 데이터 추가도 가능
fruits.splice(1,1,'청사과','수박');
// 인덱스 1번부터 1개만 지우고 나서 그 자리에 청사과와 수박 추가
console.log(fruits); // (5) ["사과","청사과","수박","복숭아","레몬"]
두가지 배열 묶어서 만들기
```js
const fruits2 = ['배','코코넛'];
const newFruits = fruits.concat(fruits2)
console.log(newFruits); // (7) ["사과","청사과","수박","복숭아","레몬","배","코코넛"]5. searching
//indexOf
console.clear();
console.log(fruits); // (5) ["사과","청사과","수박","복숭아","레몬"]
console.log(fruits.indexOf('사과')); // 0
console.log(fruits.indexOf('수박')); // 2
console.log(fruits.indexOf('코코넛')); //-1 배열안에 없기 때문에 -1 나옴
//includes (배열에 있는지 없는지)
console.log(fruits.includes('수박')); // true
console.log(fruits.includes('코코넛')); // false
//lastIndexOf
console.clear();
fruits.push('사과');
console.log(fruits); // (5) ["사과","청사과","수박","복숭아","레몬"]
