배열에 대한 JavaScript 메소드의 차이점은 무엇입니까?

자바스크립트에는 배열 요소를 추가, 제거, 교체하는 방법이 많이 있습니다. 많은 방법이 동일한 기능을 수행할 수 있지만 매우 다릅니다. 오늘은 자바스크립트에서 배열을 비교해 보겠습니다. 이 방법의 비결은 무엇인가요?

JavaScript는 배열 요소를 추가, 제거 및 교체하는 다양한 방법을 제공하지만 일부는 원래 배열에 영향을 미치지 않으며 일부는 그렇지 않으며 새 배열을 만듭니다.

참고: 다음 두 가지 방법의 차이점을 구별하세요.

array.splice()는 원본 배열에 영향을 줍니다.

array.slice()는 원본 배열에 영향을 주지 않습니다.

I 새로운 기능: 원본 배열에 영향을 줍니다.

array.push() 및 array.ushift()를 사용하여 새 요소를 추가하면 원래 배열에 영향을 미칩니다.

let mutatingAdd = ['a', 'b', 'c', 'd', 'e'];
mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']

II. 새로운 추가: 원본 배열에 영향을 주지 않습니다.

원본 배열에 영향을 주지 않는 요소를 추가하는 방법에는 두 가지가 있습니다. 첫 번째는 array.concat()입니다.

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  （注：原文有误，我做了修改 “.” ---> “,”）
console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

두 번째 방법은 JavaScript의 스프레드 연산자를 사용하는 것입니다. 스프레드 연산자는 세 개의 점입니다(...)

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

스프레드 연산자는 원본 배열을 복사하고 원본 배열에서 모든 요소를 ​​꺼낸 다음 저장합니다. 새로운 환경에서.

III. 제거: 원본 배열에 영향

array.pop() 및 array.shift()를 사용하여 배열 요소를 제거하면 원본 배열이 영향을 받습니다.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.pop(); // ['a', 'b', 'c', 'd']  
mutatingRemove.shift(); // ['b', 'c', 'd']

array.pop() 및 array.shift()는 제거된 요소를 반환하며, 변수를 통해 제거된 요소를 가져올 수 있습니다.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
const returnedValue1 = mutatingRemove.pop();  
console.log(mutatingRemove); // ['a', 'b', 'c', 'd']  
console.log(returnedValue1); // 'e'
const returnedValue2 = mutatingRemove.shift();  
console.log(mutatingRemove); // ['b', 'c', 'd']  
console.log(returnedValue2); // 'a'

array.splice()는 배열의 요소를 삭제할 수도 있습니다.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.splice(0, 2); // ['c', 'd', 'e']

array.pop() 및 array.shift()와 마찬가지로 array.splice()도 제거된 요소를 반환합니다.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
let returnedItems = mutatingRemove.splice(0, 2);  
console.log(mutatingRemove); // ['c', 'd', 'e']  
console.log(returnedItems) // ['a', 'b']

IV. 제거: 원래 배열에 영향을 주지 않습니다.

JavaScript 的 array.filter() 方法基于原数组创建一个新数组，新数组仅包含匹配特定条件的元素。
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）  
// 或者
const arr2 = arr1.filter(a => {  
  return a !== 'e';
}); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）

위 코드의 조건은 "'e'와 같지 않음"이므로 새 배열(arr2)에는 'e'가 포함되지 않습니다.

화살표 함수의 고유성:

한 줄 화살표 함수인 'return' 키워드는 기본적으로 제공되며 수동으로 작성할 필요가 없습니다.

그러나 여러 줄 화살표 함수는 명시적으로 값을 반환해야 합니다.

원래 배열에 영향을 주지 않는 또 다른 방법은 array.slice()입니다(array.splice()와 혼동하지 마세요).

const arr1 = ['a', 'b', 'c', 'd', 'e'];  
const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e']  
const arr3 = arr1.slice(2) // ['c', 'd', 'e']

V. 교체: 원본 배열에 영향을 줍니다

교체할 요소를 알고 있다면 array.splice()를 사용할 수 있습니다.

let mutatingReplace = ['a', 'b', 'c', 'd', 'e'];  
mutatingReplace.splice(2, 1, 30); // ['a', 'b', 30, 'd', 'e']  
// 或者
mutatingReplace.splice(2, 1, 30, 31); // ['a', 'b', 30, 31, 'd', 'e']

VI. 교체: 원본 배열에 영향을 주지 않습니다.

array.map()을 사용하여 새 배열을 생성할 수 있으며, 각 요소를 확인하고 특정 조건에 따라 교체할 수 있습니다.

const arr1 = ['a', 'b', 'c', 'd', 'e']  
const arr2 = arr1.map(item => {  
  if(item === 'c') {
    item = 'CAT';
  }
  return item;
}); // ['a', 'b', 'CAT', 'd', 'e']

array.map()을 사용하여 데이터 변환

array.map()은 원본 데이터 소스를 오염시키지 않고 데이터를 변환하는 데 사용할 수 있는 강력한 방법입니다.

const origArr = ['a', 'b', 'c', 'd', 'e'];  
const transformedArr = origArr.map(n => n + 'Hi!'); // ['aHi!', 'bHi!', 'cHi!', 'dHi!', 'eHi!']  
console.log(origArr); // ['a', 'b', 'c', 'd', 'e']; // 原数组毫发无损

배열에 대한 메소드 비교가 너무 많습니다. JS에서 배열을 이해하고 사용하는 데 도움이 되기를 바랍니다.

관련 읽기:

JS 배열 정보 배열 방법 요약

js 배열 중복 제거 방법 요약

Angularjs 배열의 매개변수 전달 방법 파싱

위 내용은 배열에 대한 JavaScript 메소드의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!