TIL)12 JS 자바스크립트 기초 이론 Array 배열

이명진·2021년 3월 3일
0
post-thumbnail

들어가기 앞서..

자바스크립트의 기초에는 순서가 있지만 오늘은 array 배열에 대해서 배웁니다.

오늘은 무엇을 배울까 ?

array , 배열 , 선언, 접근 , 순환 , 값 넣기, 찾기, 삭제하기

배열의 선언

배열은 두가지로 선언 및 생성할수 있습니다.
1. const arr1 = new Array();
2. const arr2= [1,2];
배열은 [ ] 이 괄호를 이용합니다.

배열의 접근

배열은 인덱스를 활용하여 접근할수 있습니다.
const cars = ['audi','benz']; // 배열을 생성합니다.
console.log(cars);
console.log(cars.length);// 배열의 갯수를 확인합니다.
console.log(fruits[0]);// 0부터 시작함으로 0은 audi입니다.
console.log(fruits[fruits.length - 1]);// 마지막 인덱스 구하는 방법입니다.

배열 순환

배열의 값을 순환 할수 있습니다.
1. for
for(let i = 0; i< cars.length; i++) {
console.log(cars[i]);
}
for 을 이용하여 cars의 길이 까지 순환 하여 결과값을 반환합니다.

  1. for of
    for(let cars of cars) {
    console.log(cars);
    }

for of 를 이용하여 cars의 길이 까지 순환 하여 결과값을 반환합니다.

3.forEach
콜백함수를 받아오는 forEach를 활용합니다.
cars.forEach((car) => console.log(car) );

배열 값 추가, 삭제 , 합치기

각각의 프로퍼티를 사용하여 값을 추가 삭제 복제 할수 있습니다.

push

값을 끝에 추가합니다.
cars.push('volvo','zeep')
기존 값의 끝에 추가 됩니다.

pop

값을 끝부터 삭제합니다.
cars.pop();
두개를 삭제하려면 두번 작성합니다. 삭제 값을 반환하려면 변수에 할당하고 호출해줍니다.

unshift

값을 앞에 추가합니다.
cars.unshift('marseraty');

shift

값을 앞에서 삭제합니다.
cars.shift();

shift,unshift 와 pop,push의 차이점

단순히 앞에서 부터 뒤에서 부터 삭제한다는 차이점이 있지만
shift,unshift는 pop과 push 보다 느립니다.
왜냐하면 앞에 추가하기 위해서는 기존 값 전체를 뒤로 옮겨야 하기 때문입니다.
하지만 뒤에서 추가하면 추가하는 값만 새로 할당만 해주기 때문에 기존값을 건들지 않아 빠르게 실행할수 있습니다.

값 수정하기

splice

splice 는 원하는 인덱스에서 원하는 값들을 지우거나 변경할수 있습니다.
splice(처음시작인덱스, 지울갯수 , 추가할 값) 이런 형식으로 사용됩니다.
splice(1) : 처음시작 인덱스만 작성하면 시작 인덱스부터 뒤의 값들을 모두 제거합니다.

splice(1,1) : 인덱스 1부터 1개의 값을 제거합니다.

splice(1,1,'b') : 인덱스 1의 값의 내용을 'b'로 변경합니다.

concat

concat 을 사용하면 두개의 배열을 병합할수 있습니다.
const car2= ['bumblebi']
const newcar = cars.concat(car2);
car2를 새로 만들고 cars와 car2를 병합하였습니다.
결과값은 cars의 내용과 car2의 배열 내용의 병합되어서 나옵니다.

값 찾기

indexOf

indexOf를 사용하면 원하는 값을 찾을수 있습니다.
cars.indexOf('audi')
원하는 값을 입력하면 몇번에 위치하는지 인덱스 값이 나옵니다.

includes

includes를 사용하면 값이 유무를 체크할수 있습니다.
cars.includes('red')
값의 유무를 체크하고 불리언 값으로 결과가 도출됩니다.

lastIndexOf

만약 배열에 중복되는 값이 있을 경우 indexOf는 첫번째 발견 인덱스를 도출합니다. 하지만 lastIndexOf는 마지막 인덱스의 위치를 알려줍니다 .
cars.lastIndexOf('audi')

profile
프론트엔드 개발자 초보에서 고수까지!

0개의 댓글