Array.prototype.with による不変の配列の更新

Jad Joubran

最近、配列に対して呼び出すことができる、相互運用可能な新しいメソッドがブラウザに導入されました。 Array.prototype.with()。

この記事では、このメソッドの仕組みと、このメソッドを使用して配列を更新する方法について説明します。 コピーされます。

Array.prototype.with(index, value) の概要

Array.prototype.with(index, value) メソッドは、配列のコピーを返します。 index を、指定した新しい value に設定して呼び出されます。

次の例は、年齢の配列を示しています。以下の新しいコピーを作成します: 2 つ目の年齢を 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, …) が 2 つ目のアイテムを置き換えます （index = 1）。ages.with(1, 16) は 2 つ目のアイテムを 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 は配列をコピーせず、 もう一方の配列への参照を作成します。そのため、いずれかを変更すると、 両方が同じ配列を指しているからです

Array.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() の呼び出しや、その他の配列メソッドでも指定できます。次の例は、 配列から 2 番目と 3 番目の年齢を増分します。

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)

その他の新しいイミュータブル メソッド

最近、他の 3 つの方法が相互運用可能になりました。

• Array.prototype.toReversed() これは配列を変更せずに配列を逆にします 元の配列。
• Array.prototype.toSorted() これは、名前を付けずに配列を並べ替え 配列を変更します。
• Array.prototype.toSpliced() これは次のように機能します。 .splice() ですが、元の配列は変更しません。

この 3 つの方法は、MDN によると、 使用します。これらの方法は、不変性が想定される場合や、 推奨されます。

結論として、イミュータブル アップデートは、 JavaScript と、この記事で紹介した 4 つのメソッドのいずれかで実装できます。具体的には .with() メソッドを使用すると、配列の 1 つの要素を簡単に更新できます。 コピーされます。