불변의 배열 방법 : 클리너 JavaScript 코드를 작성하십시오

이 기사는 JavaScript 변수 할당 및 돌연변이 안내서를 따르고 돌연변이 배열 방법에 의해 가져온 문제와 솔루션에 대해 논의합니다. 많은 JavaScript 배열 메소드는 원래 배열을 직접 수정하여 대규모 응용 프로그램에서 쉽게 추적하기 어려운 버그로 이어질 수 있습니다. 그러나 모든 방법이 이와 같은 것은 아닙니다. ,

,

및 Array.prototype.slice()와 같은 방법은 새 배열을 반환합니다. 예상치 못한 돌연변이를 피하기 위해 원래 배열을 수정하는 대신 새로운 배열 객체를 반환하는 고유 한 불변 어레이 방법을 작성할 수 있습니다. 이 기사에서는 , Array.prototype.concat(), , Array.prototype.map(), Array.prototype.filter(), pop 및 와 같은 불변의 메소드 버전을 다룹니다. 불변의 배열 방법을 사용하면 부작용으로 인한 버그를 피하기 위해 더 명확하고 쉽게 코드를 유지할 수 있습니다. push JavaScript의 배열 돌연변이 shift unshift JavaScript 배열은 객체이므로 수정할 수 있습니다. 많은 내장 배열 메소드는 배열 자체를 직접 수정하여 프로그래밍의 모범 사례를 위반합니다. 다음 예제는 잠재적 인 문제를 보여줍니다. reverse splice 이 코드는 정상적인 것으로 보입니다. 표면에서는 작동합니다 :

그러나 메소드도 배열을 수정했는데, 이는 우리가 원하는 결과가 아닙니다. 더 나쁜 것은 두 변수 모두 동일한 배열을 참조하므로 배열 중 하나에 대한 후속 변경이 다른 배열에 영향을 미친다는 것입니다. 메소드를 사용하여 배열 끝에 0의 값을 가진 요소를 추가하면 배열도 같은 방식으로 변경됩니다 (모두 동일한 배열을 참조하기 때문에) :

이 부작용은 대규모 응용 프로그램에서 쉽게 간과되며 트랙이 어려운 버그로 이어집니다.

JavaScript의 변수 배열 메소드

const numbers = [1,2,3];
const countdown = numbers.reverse();

<<> 외에도 numbers 외에도이 돌연변이를 일으키는 다른 배열 방법이 많이 있습니다. countdown numbers <<>

countdown // [3, 2, 1]

<<>

reverse() <<> numbers

<<>

numbers // [3, 2, 1]

<<> Array.prototype.push() countdown <<> numbers

<<>

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

대조적으로, 일부 방법은 원래 배열을 수정하지 않지만 새 배열을 반환합니다.

• <<> Array.prototype.slice()
<<>
• Array.prototype.concat() <<>
• <<> Array.prototype.map()
이 방법은 수행 된 동작에 따라 새로운 배열을 반환합니다. 예를 들어, <<> 메소드는 배열에서 모든 숫자를 두 배로하는 데 사용될 수 있습니다.
• 이제 <🎜 🎜> 배열을 확인하면 메소드 호출에 영향을받지 않는 것을 알 수 있습니다. Array.prototype.filter() 왜 일부 방법은 배열을 수정하는 반면 다른 방법은 그렇지 않습니까? 이에 대한 분명한 이유는 없지만 최근에 추가 된 방법은 그것을 불변으로 만드는 경향이 있습니다. 배열을 수정하는 메소드와 어레이를 수정하지 않는 메소드를 기억하기 어려울 수 있습니다.
<🎜 🎜> <<> 불변의 어레이 방법 : 수정 돌연변이 문제 <🎜

우리는 돌연변이가 문제를 일으킬 수 있으며 많은 어레이 방법이 돌연변이를 유발할 것이라고 결정했다. 사용하지 않는 방법을 살펴 보겠습니다. 원래 배열을 수정하는 대신 새 배열 객체를 반환하는 일부 기능을 작성하는 것은 어렵지 않습니다. 이러한 기능은 불변의 배열 방법입니다. map() 우리는

를 수정하지 않기 때문에 이러한 함수는 항상 첫 번째 매개 변수로 배열 자체를 취합니다.

const numbers = [1,2,3];
const countdown = numbers.reverse();

<<> numbers

countdown // [3, 2, 1]

원래 배열의 사본을 반환하지만 마지막 항목이 포함되지 않는 새로운

함수를 작성하여 시작하겠습니다. 는 배열 끝에서 튀어 나온 값을 반환합니다.

이 함수는

를 사용하여 배열의 사본을 반환하지만 마지막 항목을 제거합니다. 두 번째 매개 변수 -1은 "정지 슬라이스, 끝 이전의 1 위치"를 의미합니다. 다음 예제에서 어떻게 작동하는지 알 수 있습니다. <<>

다음으로, 새 배열을 반환 할

함수를 만들지 만 끝에 새 요소를 추가하겠습니다. Array.prototype 이것은 확장 연산자를 사용하여 배열의 사본을 만듭니다. 그런 다음 제공된 값을 새 배열의 끝에 두 번째 매개 변수로 추가합니다. 예는 다음과 같습니다.

<<> 및 pop

우리는 대안을

및 pop 유사하게 쓸 수 있습니다. Array.prototype.pop()

<🎜 🎜> 함수의 경우 마지막 요소 대신 배열에서 첫 번째 요소를 자릅니다. 이것은 다음 예에서 볼 수 있습니다 :

numbers // [3, 2, 1]

Array.prototype.slice() 우리의 <🎜 🎜> 메소드는 새 배열을 반환하고 배열의 시작 부분에 새 값을 추가합니다 : <🎜 🎜>

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

확장 된 연산자를 사용하면 순서대로 값을 배치 할 수 있습니다. 우리는 배열의 원래 사본 앞에 새 값을 넣어야합니다. 다음 예제에서 어떻게 작동하는지 알 수 있습니다.

<<> push

이제

메소드에 대한 대안을 쓰려고합시다. 원래 배열을 수정하는 대신 역순으로 배열 된 배열의 사본을 반환합니다. Array.prototype.reverse() 이 방법은 여전히 ​​

메소드를 사용하지만 확장 연산자를 사용하여 생성 한 원래 배열의 사본에 적용됩니다. 객체가 생성 된 직후에 객체를 수정하는 데 아무런 문제가 없으며, 이것이 우리가 여기서하는 일입니다. 다음 예제에서 어떻게 작동하는지 알 수 있습니다.

const numbers = [1,2,3];
const countdown = numbers.reverse();

<<> Array.prototype.reverse()

countdown // [3, 2, 1]

마지막으로,

를 처리합시다. 이것은 매우 일반적인 기능이므로 기능을 완전히 다시 작성하지는 않습니다 (흥미로운 연습이지만). 대신 의 두 가지 주요 용도에 중점을 둘 것입니다 : 배열에서 항목을 삭제하고 항목을 배열로 삽입합니다. splice <<> 배열 항목 <🎜 🎜>

삭제 새 배열을 반환하는 함수부터 시작하겠습니다.

Array.prototype.splice() 이것은 slice를 사용하여 배열을 반으로 자릅니다. 삭제하려는 항목의 양쪽 측면. 첫 번째 슬라이스는 새 배열을 반환하여 원래 배열의 요소를 매개 변수 인덱스로 지정할 때까지 복사합니다. 두 번째 슬라이스는 삭제하려는 요소가 포함 된 배열을 원래 배열의 끝까지 반환합니다. 그런 다음 확장 연산자를 사용하여 모두 새 배열에 넣습니다. 아래의

배열에서 인덱스 2로 항목을 삭제하여 이것이 작동하는지 확인할 수 있습니다.

<<> 배열 항목을 추가하십시오 <🎜 🎜> <'s> 마지막으로, 새 배열을 반환하고 특정 인덱스에 새 값을 삽입하는 함수를 작성해 봅시다.

이것은 기능이 작동하는 방식과 유사합니다. 배열의 두 조각을 생성하지만 이번에는 제공된 인덱스의 요소가 포함됩니다. 두 조각을 함께 그룹화하면 제공된 값을 그 사이의 매개 변수로 삽입합니다. 우리는 컵 케이크 이모티콘을 우리의 <🎜 🎜> 배열의 중간에 삽입하려고 시도하여 이것이 작동하는지 확인할 수 있습니다.

이제 원래 배열을 수정하지 않는 불변의 배열 메소드 세트가 있습니다. 한 곳에 저장하고 프로젝트에서 사용할 수 있습니다. 단일 객체 메소드로 가져 가거나 필요할 때와 같이 사용할 수 있습니다. 이러한 방법은 대부분의 배열 작업에 충분해야합니다. 다른 일을 해야하는 경우 황금 규칙을 기억하십시오. 먼저 확장 연산자를 사용하여 원래 배열의 사본을 만듭니다. 그런 다음 즉시

이 사본에 변수 메소드를 적용하십시오.

numbers // [3, 2, 1]

<🎜 🎜> <<> 결론

Array.prototype.slice() <,>이 기사에서는 원래 배열을 언어의 일부로 수정하는 배열 메소드를 수정하여 JavaScript가 생명을 어렵게 만드는 방법을 조사합니다. 그런 다음 이러한 기능을 대체하기 위해 우리 자신의 불변의 배열 방법을 작성했습니다. food 불변의 버전을 보유함으로써 어떤 다른 배열 방법을 생각할 수 있습니까?

JavaScript에서 불변의 배열 메소드를 만들고 사용하는 것에 대한 FAQS JavaScript에서 불변의 개념은 무엇입니까?

불변은 프로그래밍의 기본 개념이며, 이는 생성 된 후에 수정할 수없는 객체의 상태를 나타냅니다. JavaScript에서는 불변이 기본적으로 시행되지 않습니다. 그러나 코드를보다 예측 가능하고 쉽게 작성하는 데 도움이되는 강력한 개념입니다. 불변성은 상태 변화로 인한 오류와 복잡성을 방지하는 기능 프로그래밍에 특히 유용합니다.

JavaScript에서 불변 어레이 방법을 사용해야하는 이유는 무엇입니까? JavaScript에서 불변의 배열 방법을 사용하면 더 명확하고 유지 관리가 더 쉽게 작성 될 수 있습니다. 이 방법은 원래 배열을 수정하지 않기 때문에 오류를 일으킬 수있는 부작용을 방지 할 수 있습니다. 이것은 대형 코드베이스에서 또는 복잡한 데이터 구조를 다룰 때 특히 중요합니다. 불변의 방법은 새 배열을 반환하는 반면 원래 배열은 변경되지 않습니다. 이로 인해 코드를보다 예측 가능하고 디버깅하기가 더 쉽습니다. JavaScript에서 불변의 배열 방법의 몇 가지 예는 무엇입니까?

JavaScript는 원래 배열을 변경하지 않는 불변의 배열 방법을 제공합니다. 일부 예제에는 <<<>,

,

및

메소드가 포함됩니다.

메소드는 배열의 각 요소에 대해 제공된 함수의 결과를 포함하는 새로운 배열을 만듭니다.

메소드는 제공된 기능에 의해 구현 된 테스트의 모든 요소를 ​​포함하는 새로운 배열을 만듭니다. <🎜 🎜> 메소드는 어큐뮬레이터의 각 요소에 함수를 적용하고 배열을 단일 출력 값으로 줄입니다.

메소드는 둘 이상의 배열을 병합하고 새 배열을 반환하는 데 사용됩니다.

내 배열을 JavaScript에서 불변으로 만드는 방법은 무엇입니까?

JavaScript는 어레이를 불변으로 만들기위한 내장 방법을 제공하지 않습니다. 그러나 원래 배열을 변경하지 않는 메소드를 사용하여 불변을 달성 할 수 있습니다 (예 : <🎜 🎜>,

,

및 <🎜🎜>). 또 다른 접근법은

방법을 사용하는 것입니다.이 방법은 객체에 새로운 특성을 추가하지 않고 기존 특성의 제거를 방지하며 기존 속성의 열거, 구성 가능성 또는 서면 성을 방지하는 것입니다. map() JavaScript에서 변한 방법과 불변의 방법의 차이점은 무엇입니까? filter() JavaScript의 변이 가능한 방법과 불변 방법의 주요 차이점은 원래 배열을 처리하는 방법입니다. 돌연변이 가능한 방법은 원래 배열을 수정하지만 불변의 방법은 그렇지 않습니다. 대신, 불변의 방법은 새 배열을 반환합니다. 이로 인해 코드는 오류를 유발할 수있는 부작용을 방지하므로 코드를보다 예측 가능하고 디버깅하기가 더 쉽습니다. reduce() JavaScript의 다른 데이터 유형과 함께 불변 어레이를 사용할 수 있습니까?

예, JavaScript의 다른 데이터 유형과 함께 불변 어레이를 사용할 수 있습니다. 불변의 개념은 배열뿐만 아니라 모든 데이터 유형에 적용됩니다. 예를 들어, 문자열, 숫자, 객체 등으로 불변의 방법을 사용할 수 있습니다. 이를 통해 코드를 더 명확하고 쉽게 작성하는 데 도움이 될 수 있습니다.

불변의 배열 방법을 사용하는 성능 영향이 있습니까?

불변의 배열 방법을 사용하면 일반적으로 원래 배열을 수정하는 대신 새 배열을 생성하기 때문에 성능에 영향을 줄 수 있습니다. 이로 인해 특히 큰 배열에서 메모리 사용이 증가 할 수 있습니다. 그러나 대부분의 경우 더 명확한 코드 및 버그가 적은 불변의 방법을 사용하는 이점은 잠재적 성능 비용을 능가합니다.

<<> javaScript에서

메소드를 사용하는 방법은 무엇입니까?

javaScript의

메소드는 어큐뮬레이터의 각 요소에 함수를 적용하고 배열을 단일 출력 값으로 줄이는 불변의 메소드입니다. 다음은 사용 방법의 예입니다.

<,>이 예에서 reduce() 메소드는 배열의 모든 요소의 합을 계산합니다.

<<> JavaScript의

메소드는 무엇입니까? reduce()

javaScript의

const numbers = [1,2,3];
const countdown = numbers.reverse();

메소드는 둘 이상의 배열을 병합하는 데 사용됩니다. 이 메소드는 기존 배열을 변경하지 않고 새 배열을 반환합니다. 예는 다음과 같습니다.

<,>이 예에서 <🎜 🎜> 메소드는 <🎜 🎜> 및 reduce()를 새로운 배열 <🎜 🎜 🎜>로 병합합니다.

<<> javaScript에서

메소드를 사용하는 방법은 무엇입니까? concat()

javaScript의

메소드는 제공된 기능에 의해 구현 된 테스트의 모든 요소를 ​​포함하는 새로운 배열을 만듭니다. 다음은 사용 방법의 예입니다. concat() <,>이 예에서

메소드는 3보다 큰 숫자를 포함하는 새로운 배열을 만듭니다.

countdown // [3, 2, 1]

위 내용은 불변의 배열 방법 : 클리너 JavaScript 코드를 작성하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!