브라우저에는 최근 배열에 대해 호출할 수 있는 새로운 상호 운용 가능한 메서드가 생겼습니다.
Array.prototype.with()
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
이 도움말에서는 이 메서드의 작동 방식과 이를 사용하여 배열을 업데이트하는 방법을 설명합니다. 할 수 있습니다.
Array.prototype.with(index, value)
소개
Array.prototype.with(index, value)
메서드는 배열의 사본을 반환합니다.
개발자가 제공하는 새 value
로 설정된 index
를 사용하여 호출됩니다.
다음 예는 연령 배열을 보여줍니다. 다음 항목의 새 사본을 생성하시겠습니까? 두 번째 나이를 15에서 16으로 변경하면서 배열의 값을 설정합니다.
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
코드 분류: ages.with(...)
는 ages
변수의 사본을 반환합니다.
할 수 있습니다. ages.with(1, …)
가 두 번째 항목을 대체합니다.
(index = 1
). ages.with(1, 16)
는 두 번째 항목을 16
에 할당합니다.
지금까지 수정된 배열의 새 복사본을 만들 수 있었습니다.
이는 원래 배열을 그대로 유지하려 할 때 매우 유용합니다. 이 도움말에서는 이를 위한 몇 가지 사용 사례를 다룹니다. 하지만 지금은 괄호 표기법을 사용했다면 어떻게 되었을지 살펴봅시다.
const ages = [10, 15, 20, 25];
const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)
보시다시피 이 예에서는 ages
변수도 수정되었습니다. 이는
ages = newAges
를 할당할 때 JavaScript가 배열을 복사하지 않고
다른 배열에 대한 참조를 만듭니다. 따라서 한 항목의 변경사항은
둘 다 동일한 배열을 가리키므로 다른 하나에 영향을 미칩니다.
배열.prototype.with() 및 불변성
불변성은 많은 프런트엔드 라이브러리와 프레임워크의 핵심입니다. 예를 들어 일부: React (및 redux), Vue
또한 다른 라이브러리와 프레임워크에서는 불변성을 요구하지 않지만 더 나은 성능을 위해 Angular 및 Lit를 권장합니다
따라서 개발자는 종종 배열의 사본을 반환하는 다른 메서드를 사용해야 했습니다. 코드 가독성이 저하되었습니다.
const ages = [10, 15, 20, 25];
const newAges = ages.map((age, index) => {
if (index === 1) {
return 16;
}
return age;
});
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)
다음은 React에서 .with()
를 조합하여 사용하는 방법에 관한 Codepen의 예입니다.
useState를 사용하여 항목 배열을 불변으로 업데이트합니다.
.with()
메서드는 배열의 사본을 반환하므로 여러 배열을 연결할 수 있습니다.
.with()
호출 또는 다른 배열 메서드도 호출할 수 있습니다. 다음 예는
다음과 같이 배열에서 두 번째와 세 번째 나이를 증분합니다.
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)
console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
기타 새 불변 메서드
최근 상호 운용 가능한 세 가지 방법,
Array.prototype.toReversed()
드림 이 함수는 원본 배열Array.prototype.toSorted()
드림 이 함수는 원본 배열 변형Array.prototype.toSpliced()
드림 이렇게 하면.splice()
이지만 원래 배열을 변형하지 않습니다.
MDN에 따르면 이 세 가지 방법은 상응 대상입니다. 이러한 메서드는 불변성이 예상되는 경우에도 사용할 수 있습니다. 선호합니다.
결론적으로, 변경 불가능한 업데이트는 Kubernetes에서 보다 쉽게
JavaScript를 사용할 수 있습니다. 구체적으로 설명하자면 다음과 같습니다.
.with()
메서드를 사용하면 배열의 단일 요소를 더 쉽게 업데이트할 수 있습니다.
할 수 있습니다.