TIL 8. 배열의 값을 추가, 수정, 삭제하는 방법

quokka·2021년 8월 29일

JavaScript 배열

javascript

목록 보기

8/13

🔥 Study Keyword

배열의 값을 추가, 수정, 삭제하는 방법에 대햐여,,,

📌 요소를 수정하기

[2,3,5,12,25,'크리스마스']라는 배열에서 2번째 값을 '생일'이라고 수정해보자
let myArray = [2,3,5,12,25,'크리스마스'];
myAraay[2] = '생일';      // 2번째 값을 '생일'로 할당
console.log(myArray);    // [2,3,'생일',12,25,'크리스마스']

📌 요소를 추가하기 ->> push

let myArray = [12,25,'크리스마스'];
myAraay.push('기념일')
console.log(myArray); // [12,25,'크리스마스','기념일']

📌 요소를 삭제하기 ->> pop, shift

shift =>> 배열의 첫번째 요소부터 삭제해주는 기능
let myArray = [12,25,'크리스마스'];
myArray.shift()          // 맨첫번째 요소를 삭제해라
console.log(myArray);   // [25,'크리스마스']
pop =>> 배열의 맨끝 요소부터 삭제해주는 기능
let myArray = [12,25,'크리스마스'];
myArray.pop()          // 맨끝 요소를 삭제해라
console.log(myArray);  // [12,25]

📌 중첩배열 [ [ ] ]

배열안에 또 다른 배열이 있는것을 의미한다.
let myArray = [50,100,150,200[12,25,'크리스마스'],250];
console.log(myArray[4][2]);       // 크리스마스
(myArray[4][2]) ->> myArray배열에 4번째 요소의 2번째 요소를 출력 = 크리스마스

📌 배열의 요소 ->> slice(시작, 끝)

slice()메소드는 배열의 시작부터 끝(끝은 포함하지 않고 전)까지에 대해 새로운 배열객체로 반환한다. *단 이때 기존의 배열이 변하지 않는다.
let myArray = ['가', '나', '다', '라', '마'];
// 1번 인덱스번호의 요소부터 4번 인덱스번호까지 4번 인덱스번호 요소는 제외하고 출력
console.log(myArray.slice(1,4));   // ["나", "다", "라"]
// 양수일경우 첫번째 순서부터 index 2번째 이후의 모든 요소들 출력
console.log(myArray.slice(2));    //  ["다", "라", "마"]
// 음수일경우 마지막 순서부터 index 4번째를 제외하고 모두 출력하라
console.log(myArray.slice(-4));  //  ["나", "다", "라", "마"]
// 끝에서부터 3번째부터 index 번호 2까지(2는 제외)
console.log(myArray.slice(-3,2));  // [] 값이 없다.
📢 index 번호 앞에서부터 0으로 시작, 음수일경우 끝에서부터 -1로 시작!!

📌 배열의 요소 ->> splice(start, delete, item)

splice 메서드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나 새로운 요소를 추가할 때 사용한다. *인자의 순서 중요!!

splice메소드는 인자를 최소 1개만 쓸 수 있다.

첫번째 인자 : 배열의 index 시작점

두번째 인자 : 삭제할 요소의 개수

세번째 인자 : 추가하고 싶은 요소
let myArray = [1,2,3,4,5,6,7];
num.splice(4,1,100)     // 4번째 요소를 삭제한 후 100을 추가하라.
console.log(myArray);   // [1,2,3,4,100,6,7]

📌 배열의 요소 ->> filter

filter()메소드는 조건을 주고 해당 조건이 참인 요소를 모아 새로운 배열로 반환한다.
배열에서 원하는 데이터만 추출하고 싶을 때 자주 사용하는 메소드!
기본구문
arr.filter(callback(element[, index[, array]])[, thisArg])

callback : 각 요소에 대한 조건값

element : 처리할 현재 요소 (필수)

index : 현재 인덱스 (선택)

array : filter를 호출한 배열 (선택)

thisArg : callback을 생행 할 때 this로 사용하는 값 (선택)
// 'ap'가 들어간 과일들로 이루어진 새로운 배열을 filter()이용하여 반환해라
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
//아래의 함수를 완성해주세요.
function filtered (){
let result=fruits.filter((value) => value.includes('ap'));
return result;
}
let filterStart=filtered();
console.log(filterStart);
console.log(result);    //[ 'apple', 'grapes' ]

📌 배열의 요소 ->> concat

concat()메소드는 주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환한다.
기본구문
array.concat([value1[, value2[, ...[, valueN]]]])

value1 ~ valueN : 기존 배열에 합칠 배열 또는 값

return : 기존배열과 파라미터로 받은 값(value1~valueN)을 합쳐서 새로 만든 배열
concat()은 요소의 중복과 상관없이 배열을 합쳐줍니다.
const numbers = [1, 2, 3];
const numbers2 = [3, 4, 5];
console.log(numbers.concat(numbers2)); // [ 1, 2, 3, 3, 4, 5 ]
코드를 입력하세요
```📢 filter를 사용해서 배열의 중복을 없애보자
let array1 =  [1,2,3];
let array2 = [3,4,5];
let result = array1.concat(array2);
//console.log(result);    //[1, 2, 3, 3, 4, 5] ->중복!
let eraseDuplicates = result.filter((el,index)=> 
result.indexOf(el)===index);
console.log(eraseDuplicates);  //[1, 2, 3, 4, 5] 

let array1 =  [1,2,3,4,5];
let array2 = [3,4,5,6,7]; 
let result = array1.concat(array2);
console.log(result);              
// 결과 (3,4,5 가 중복) 
 [
  1, 2, 3, 4, 5,
  3, 4, 5, 6, 7
]
let eraseDuplicates = result.filter((el,index)=> 
result.indexOf(el)===index);
console.log(eraseDuplicates);      
// 결과 (중복된 값이 사라짐) 
[
  1, 2, 3, 4,
  5, 6, 7
]
indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고,
검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다.