Widely available すべての主要ブラウザで対応済み。安心して使用可能。
配列 Widely available

Array by copy

Array by copy メソッド（toSorted, toReversed, with, toSpliced）は元の配列を変更せずに新しい配列を返します。イミュータブルなデータ操作が求められる React の状態管理などで特に有用です。

配列ES2023

概要

Array by copy メソッド（toSorted, toReversed, with, toSpliced）は元の配列を変更せずに新しい配列を返します。イミュータブルなデータ操作が求められる React の状態管理などで特に有用です。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
javascript.builtins.Array.toReversed
110
110
115
16
110
16
ビルトインオブジェクト
Array.toSorted

toSorted() は Array インスタンスのメソッドで、 Array/sort メソッドに対応するコピーメソッドです。これは、要素を昇順にソートした新しい配列を返します。
110
110
115
16
110
16
Array.toSpliced

toSpliced() は Array インスタンスのメソッドで、 Array/splice メソッドに対応するコピーメソッドです。これは、指定された位置の要素を除去したり置き換えたりした新しい配列を返します。
110
110
115
16
110
16
Array.with

with() は Array インスタンスのメソッドで、ブラケット記法に対応するコピーメソッドです。これは、指定された位置の要素を指定された値で置き換えた新しい配列を返します。
110
110
115
16
110
16
TypedArray.toReversed

toReversed() は TypedArray インスタンスのメソッドで、 TypedArray/reverse メソッドに対応するコピーメソッドです。このメソッドは、要素を逆順にした新しい型付き配列を返します。このメソッドは Array.prototype.toReversed() と同じアルゴリズムです。
110
110
115
16
110
16
TypedArray.toSorted

toSorted() は TypedArray インスタンスのメソッドで、 TypedArray/sort メソッドのコピーメソッド版です。これは、要素を昇順にソートした新しい型付き配列を返します。このメソッドは Array.prototype.toSorted() と同じアルゴリズムですが、既定で文字列としてではなく数値として値をソートする点が異なります。
110
110
115
16
110
16
TypedArray.with

with() は TypedArray インスタンスのメソッドで、ブラケット記法を使用して指定された位置の値を変更することのコピーメソッド版です。これは指定されたインデックスの要素を指定された値で置き換えた新しい配列の添字を返します。このメソッドのアルゴリズムは Array.prototype.with() と同じです。
110
110
115
16
110
16
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
const original = [3, 1, 4, 1, 5];

// Sort without modifying the original array
const sorted = original.toSorted();
console.log(sorted);   // [1, 1, 3, 4, 5]
console.log(original); // [3, 1, 4, 1, 5] ← remains unchanged

// Reverse
const reversed = original.toReversed();

// Replace at specific indices
const replaced = original.with(2, 99);
// [3, 1, 99, 1, 5]

// Non-destructive version of splice
const spliced = original.toSpliced(1, 2, 10, 20);
// [3, 10, 20, 1, 5]

ライブデモ

Tosorted (non-so-t)

source. Array to, so-tnewarray create..

プレビュー全画面表示

With (specificelement. replace)

specific. index. Value replacenewarray create..

プレビュー全画面表示

Toreversed (non-flip)

source. Array is. to, reverseorder to newarray read..

プレビュー全画面表示

実務での使いどころ

  • Array by copy の活用

    元の配列を変更せずにソート・反転・挿入を行うメソッド群。toSorted, toReversed, with, toSpliced を提供。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク

Powered by web-features