자바스크립트에는 배열 요소를 추가, 제거, 교체하는 방법이 많이 있습니다. 많은 방법이 동일한 기능을 수행할 수 있지만 매우 다릅니다. 오늘은 자바스크립트에서 배열을 비교해 보겠습니다. 이 방법의 비결은 무엇인가요?
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에서 배열을 이해하고 사용하는 데 도움이 되기를 바랍니다.
관련 읽기:
위 내용은 배열에 대한 JavaScript 메소드의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
