新しい配列のメソッド

前の記事ではJavascript stores objects and arrays in heap storage . つまり、配列が一度作成され、将来の更新がその配列を更新することを意味します.例えば、

let myArray = [ 1, 2, 3 ];
let newArray = myArray;

newArray[0] = 2;

// Both return [ 2, 2, 3 ]
console.log(newArray, myArray);

このように、私たちはしばしば、私たち自身がコピーまたはクローニング配列を作って、オリジナルに影響を及ぼすことなくそれらを変更することを見つけます.それを行う一般的な方法はthe three dots 演算子:

let myArray = [ 1, 2, 3];
let newArray = [...myArray];

newArray[0] = 2;

// Returns [ 2, 2, 3 ] and [ 1, 2, 3 ]
console.log(newArray, myArray);

クローニングがとても一般的であるので、ステージ3に達した新しい仕様は書かれました.そして、それは我々に新しいコピーの方法を与えて、配列を変えます.この提案を"Change Array by Copy" 提案それがどのように動くか見てみましょう.

サポート

現在、これらの機能は、任意の主要なブラウザまたはノードでサポートされていません.jsバージョン.JavaScriptの提案プロセスでは、この仕様がステージ3に達しているので、すぐにサポートされることを期待できます.このセクションはサポートの変更として更新されます.
そう言うとpolyfill 現在使用できるこの提案の動作を再現するために存在します.

コピーメソッドによる新しい変更配列

新しい提案は、配列をコピーする4つの新しいメソッドを追加し、いくつかの方法で変更します.これらは次のとおりです.

Array.prototype.toReversed() - 配列をクローンし、それを逆にする

Array.prototype.toSorted(compareFn) - 配列をクローンし、ソートします.

Array.prototype.toSpliced(start, deleteCount, ...items) - 配列をクローン化し、いくつかの方法でそれをspliceする.

Array.prototype.with(index, value) - 配列をクローン化し、その中に新しい要素を追加します.

これらのメソッドはすべて動作しますTypedArray データも、例えば、Int8Array .

toreverse ()

toReversed 正確にそれが言うことをします-それは配列をとり、それを逆にします.この関数は配列をクローンするので、オリジナルの配列の新しいバージョンを作成するにはコピーを行う必要はありません:

let x = [ 1, 2, 3 ];
let y = x.toReversed();

// Returns [ 1, 2, 3 ], [ 3, 2, 1 ]
console.log(x, y);

tosort ()

toSorted , の非破壊版ですsort() , 本来の配列を変更しないこと.デフォルトでは、配列を取り、数値的にソートします.例えば、

let x = [ 5, 3, 4, 2, 1 ];
let y = x.toSorted(); // [ 1, 2, 3, 4, 5 ]

また、比較関数は、sort() JavaScriptでメソッドを使用すると、オブジェクトの配列で作業するときに便利です.例えば、

let x = [
    { value: 0 },
    { value: 4 },
    { value: 2 },
    { value: 3 }
];

// y becomes:
// [
//    { value: 0 },
//    { value: 2 },
//    { value: 3 },
//    { value: 4 }
// ]
let y = x.toSorted((a, b) => {
    return a.value - b.value
});

tospliced ()

toSpliced() の非破壊版ですsplice() , 本来の配列を変更しないこと.三つの引数を受け付けます:

start - 開始する位置.

deleteCount - 削除する要素の数.

...items - 削除後に開始位置に挿入する項目.

例えば、

let x = [ "Dog", "Cat", "Zebra", "Bat", "Tiger", "Lion" ];

// y is [ "Dog", "Snake", "Bat", "Tiger", "Lion" ]
let y = x.toSpliced(1, 2, "Snake");

// z is [ "Dog, "Tiger", "Lion" ]
let z = x.toSpliced(1, 3);

以上がこれらのコピー機能が役に立つ方法の完全な例ですsplice() メソッドは、x そして永久にそれらを変更します.使用toSpliced() , 我々は変更することができますx 何度も、その内容について心配することなく.

with

最後に、我々はwith() , 単に既存の配列の1つの要素を変更します.本質的に、配列を取るA そしてそれをwith 何かほか.ここでの行動の例です.

let x = [ "Dog", "Cat", "Lizard" ]
// y is now [ "Dog", "Zebra", "Lizard" ]
let y = x.with(1, "Zebra")
// z is now [ "Tiger", "Cat", "Lizard" ]
let z = x.with(0, "Tiger")

再び、1つの初期配列から複数の新しい配列を作ることができました.

結論

これらの配列の追加はかなり議論の余地がなく、通常は配列やオブジェクトのコピーを1つだけ維持する言語への非常に必要な追加です.これらの新しいメソッドを使用して、JavaScriptはコードの混乱と複雑さを削除します.何かのように大きな変化ではないがTemporal , それはまだ言語への歓迎の追加です.