Javascript: 배열 메서드 | 돌연변이 대 비 돌연변이

이 기사에서는 변경 가능한 버전과 변경 불가능한 버전에서 몇 가지 일반적인 배열 작업을 살펴보겠습니다. 추가, 삭제 및 바꾸기는 가장 일반적인 작업이며 이러한 작업을 살펴보겠습니다.

이 기사에서는 array.map()와 같은 방법을 활용하여 변형되지 않는 버전을 생성합니다. 이것은 완전한 목록이 아니며 기본 조작으로 제한됩니다.
const에 배열을 할당하여 변형되지 않는 측면을 표시하고 let를 돌연변이로 표시합니다.

항상 배열 할당을 const로 변경할 수 있지만 개발자 표시를 위해 그대로 유지하는 것이 좋습니다.

추가: 돌연변이

배열에 항목을 추가하는 가장 쉬운 방법은 array.push() 및 array.unshift() 입니다.

// Note: using `let` here to indicate that this array will be mutated.

let array = [1, 2, 3, 4, 5];  
array.push(6); // [1, 2, 3, 4, 5, 6];  
array.unshift(10);// [10, 1, 2, 3, 4, 5, 6];

array.push() 항목을 끝에 추가하고 array.unshift() 항목을 배열 앞에 추가합니다.

추가: 돌연변이 없음

이를 수행하는 두 가지 방법array.concat() 및 …array 스프레드 연산자가 있습니다.

// Note use `const` to indicate that this will not be mutated  
// concat
const array1 = [1, 2, 3, 4, 5];  
const array2 = array.concat(6);  // [1, 2, 3, 4, 5, 6];
// spread
const array3 = [...array1, 6]; // [1, 2, 3, 4, 5, 6];  
const array4 = [10, ...array1]; // [10, 1, 2, 3, 4, 5];

array1.concat(item1, item2, …) concat 메서드는 array1의 모든 항목과 params로 전달된 항목을 병합하고 새 배열을 만듭니다. … 스프레드 연산자는 기본적으로 배열에서 모든 항목을 꺼내 새 배열 컨텍스트에 배치합니다.

제거: 돌연변이

두 가지 방법이 있습니다 array.pop() 및 array.shift()

let array = [1, 2, 3, 4, 5];  
array.pop();  // [1, 2, 3, 4] > delete from end and return deleted item  
array.shift();  // [2, 3, 4]  > delete from front and return deleted item

array.pop() 끝에서 항목을 삭제하고 삭제된 항목을 반환합니다. array.shift() 전면에서 항목을 삭제하고 삭제된 항목을 반환합니다.

배열 즉 array.splice() 을 조작하는 중요한 방법이 있습니다. 배열을 변경합니다. splice()는 2개의 중요한 매개변수를 사용합니다. 첫 번째는 시작 인덱스이고 두 번째는 제거할 항목의 수입니다. splice는 배열에서 직접 항목을 제거합니다. 예를 들어 splice(0, 2)는 인덱스 0부터 시작하여 두 항목을 제거합니다.

let array = [1, 2, 3, 4, 5];  
array.splice(0, 2); // [3, 4, 5];

삭제: 돌연변이 없음

제거 또는 모든 유형의 필터링은 array.filter()에 의해 수행되며 filter()는 어레이에서 가장 멋진 비변형 방법 중 하나입니다. 반환하는 경우true 항목이 새 배열에 포함되고 항목을 버려야 하는 경우 반환되는false 일부 필터링을 수행해야 하는 동안 배열의 각 항목에 대해 호출되는 함수를 사용합니다.

const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.filter((item) => item !== 5);   
// will filter any item i.e not equal to 5

또 다른 매우 중요한 방법은 array.slice() 입니다. 이것이 array.splice()가 아니라는 것을 기억하십시오. 그것들은 다릅니다 array.slice()는 새로운 배열을 반환할 것입니다. 즉, 변형되지 않습니다. 사용법은 슬라이스와 매우 유사합니다. 2개의 중요한 매개변수가 필요합니다. 첫 번째는 복사가 시작되어야 하는 시작 인덱스이고 두 번째는 복사가 끝나야 하는 끝 인덱스입니다. 포괄적이지 않습니다. 해당 인덱스 간에 항목을 복사하고 새 배열로 반환했습니다.

const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.slice(0, 2); // [1,2];  
// if no args provided ti  will copy the whole array

바꾸기: 돌연변이

배열splice 방식은 항목을 제거할 수 있을 뿐만 아니라 항목을 배열에 직접 추가할 수 있기 때문에 매우 흥미로운 방식입니다. 세 번째 매개변수 이후는 기본적으로 배열에 삽입해야 하는 항목을 의미합니다.

let array = [1, 2, 3, 4, 5];  
array.splice(2, 1, 10, 12); // [1, 2, 10, 12, 4, 5];

splice는 인덱스 2부터 1개 항목을 제거한 다음 같은 위치에서 10과 12를 삽입합니다.

교체 | 변형: 비변형

mighty 메서드array.map()는 배열을 변환할 수 있으므로 매우 유용합니다. Map 메서드는 배열의 각 항목에 대해 호출되는 함수를 사용하며 새 배열에 넣어야 하는 항목을 반환해야 합니다.

const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.map((item) => {  
  if (item === 3) {  
    return 10;    
  }  
  return item;  
}); // [1, 2, 10, 4, 5];

// Map as transformation  
const mutilpliedByTwo = array1.map((item) => item \* 2);   
// [2, 4, 6, 8, 10];