Web/JavaScript

JavaScript | 배열 선언 / 추가,삭제/ 검색

일렁이는코드 2021. 9. 3. 16:48
1. 배열의 선언과 요소
2. 배열에 있는 요소 출력하기
3. 배열의 요소 추가 / 삭제
4. 배열의 검색

배열의 선언과 요소

//배열의 선언
const arr1 = new Array();
const arr2 = [1,2];

//배열의 요소
const myArr = ['apple','banana'];

console.log(myArr[1]); // 'banana' | 1번 인덱스에 접근하여 값 출력
console.log(myArr.length); // 2 | myArr의 배열 요소의 개수

myArr[1] = 'Orange' // 요소 수정하기

 

배열에 있는 요소 전체 출력하기

myArr=['apple','banana','carrot'];

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

//2 for of
for(let fruit of myArr){
 console.log(myArr);
 }
 
//3 forEach
myArr.forEach((fruit) => console.log(fruit));

 

배열의 요소 추가 / 삭제 

myArr=['apple','banana','carrot'];

// 1 push
myArr.push('lemon','abocado');
console.log(myArr); // ['apple','banana','carrot','lemon','abocado']

//2.pop
myArr.pop();
console.log(myArr); // ['apple','banana','carrot','lemon']

//3. unshift
myArr.unshift('tomato');
console.log(myArr); // ['tomato','apple','banana','carrot','lemon']

//4. shift
myArr.shift('tomato');
console.log(myArr); // ['apple','banana','carrot','lemon']

//5. splice
myArr.splice(1,2);
console.log(myArr); // ['apple','lemon']
myArr.splice(1,1,'watermelon','grape');
console.log(myArr); // ['apple','watermelon','grape','lemon']

//6. concat
const myArr2 = ['coconut','pear'];
const newArr = myArr.concat(myArr2);
console.log(newArr); // ['apple','watermelon','grape','lemon','coconut','pear']
  1. pop / push / unshift / shift
    - pop / push : 배열 맨 끝에 요소 추가 / 삭제
    - unshift / shift : 배열 맨 앞에 요소 추가 / 삭제
    * unshift와 shift는 맨 앞 요소를 건드리기 때문에 pop, push 보다 처리속도가 느림. 

  2. splice
    splice는 (기준점이 될 인덱스 번호, 지우고자 하는 인덱스 개수) 로 보통 쓰이며 뒤에 추가하고자 하는 요소를 더 선언할 수 있다. 
    .splice(2) 로 선언하게 되면 2번째 인덱스까지만 요소를 남기고 나머지를 모두 삭제시킨다.

  3. concat
    두개의 배열의 요소를 합쳐주는 기능

 

배열의 검색

myArr=['apple','banana','carrot'];

// 1 indexOf
console.log(myArr.indexOf('banana')); // 1

// 2 lastIndexOf
myArr.push('apple');
console.log(myArr); // ['apple','banana','carrot','apple'];
console.log(myArr.indexOf('apple')); // 0
console.log(myArr.indexOf('pear')); // -1
console.log(myArr.lastIndexOf('apple')); // 3

// 3 includes
console.log(myArr.includes('banana')); // true
console.log(myArr.includes('melon')); // false
  1. indexOf / lastIndexOf
    - indexOf : 검색하고자 하는 요소의 맨 첫 번째 인덱스를 출력
    - lastIndexOf : 검색하고자 하는 요소의 맨 마지막 인덱스를 출력

  2. includes 
    검색하고자 하는 요소가 있는지 없는지를 Boolean으로 출력

반응형