JavaScript <その他リファレンス メモ> 言語 等CSSHTMLJavaScriptPython ライブラリ・プラットフォームjQuerymicro:bitXamarin ドキュメンテーションDoxygenJSDocMarkdownSHFBXML ドキュメント コメント その他各種資料 子サイト簡易リファレンス・Tips サポート寄付 Array【配列】 コピー・指定値設定・要素反転・ソート 等 copyWithin【内部コピー】 with【コピー&要素変更 (配列変更なし)】fill【指定値設定】 reverse【要素反転 (配列変更あり)】toReversed【要素反転 (配列変更なし)】sort【ソート (配列変更あり)】toSorted【ソート (配列変更なし)】 Array.prototype.copyWithin【内部コピー】 メモ概要配列内の要素をコピー(上書き)し配列を変更 ~Array【型指定配列ビュー (%TypedArray%)】オブジェクト の copyWithin【内部コピー】も同じアルゴリズム コピーはシャローコピー (コピー元のオブジェクトは新規生成されずに同じ参照) コピー元とコピー先に重なりがあっても正しくコピー (内部でコピー順を調整) 配列の範囲を超えてのコピーは行わない コピーの方向が逆の場合、処理なし (コピー元の終了位置 < コピー元の開始位置) 関連with【コピー&要素変更 (配列変更なし)】 外部リンクECMA-262 (英語) Array.prototype.copyWithin (target, start [ , end ] )ES2024 (15) ES2023 (14) ES2022 (13) 構文 array.copyWithin( target, start[, end] ) 変更後の元の配列 (配列変更) target コピー先の位置インデックス (詳細は下記参照) start コピー元の開始位置インデックス (詳細は下記参照) end コピー元の終了位置インデックス (この位置は含まない:詳細は下記参照) target備考範囲外範囲内に補正0 ≦ target先頭からの位置インデックスtarget < 0 末尾からの位置インデックス (要素数 + target)(-1:末尾)start備考範囲外範囲内に補正0 ≦ start先頭からの位置インデックスstart < 0 末尾からの位置インデックス (要素数 + start)(-1:末尾)end備考省略要素数範囲外範囲内に補正0 ≦ end先頭からの位置インデックスend < 0 末尾からの位置インデックス (要素数 + end)(-1:末尾)例 let num_A = [ 0, 1, 2, 3, 4, 5, 6, 7 ]; let num_A_copyWithin = num_A.copyWithin(5, 1, 3); console.log(num_A); // 出力:[0, 1, 2, 3, 4, 1, 2, 7] console.log(num_A_copyWithin); // 出力:[0, 1, 2, 3, 4, 1, 2, 7] let num_B = [ -8, -7, -6, -5, -4, -3, -2, -1 ]; let num_B_copyWithin = num_B.copyWithin(-8, -3); console.log(num_B); // 出力:[-3, -2, -1, -5, -4, -3, -2, -1] console.log(num_B_copyWithin); // 出力:[-3, -2, -1, -5, -4, -3, -2, -1] // シャローコピー let num_C_Inner = [ 10, 20 ]; let num_C = [ 0, 1, num_C_Inner, 3, 4 ]; console.log(num_C); // 出力:(5) [0, 1, Array(2), 3, 4] console.log(num_C[2]); // 出力:(2) [10, 20] num_C.copyWithin(3, 2); console.log(num_C); // 出力:(5) [0, 1, Array(2), Array(2), 3] console.log(num_C[2]); // 出力:[10, 20] console.log(num_C[3]); // 出力:[10, 20] num_C[2][0] = 100; console.log(num_C); // 出力: // (5) [0, 1, Array(2), Array(2), 3] // 0: 0 // 1: 1 // 2: (2) [100, 20] // 3: (2) [100, 20] // 4: 3 // length: 5 // 【~Array【型指定配列ビュー (%TypedArray%)】オブジェクト】 var array = [ 0, 1, 2, 3, 4, 5 ]; var typedArray = new Int32Array(array); typedArray.copyWithin(3, 1, 4); console.log(typedArray); // 出力:[0, 1, 2, 1, 2, 3] // 【コピー範囲の重なり】 var array1 = [ 0, 1, 2, 3, 4, 5, 6, 7 ]; array1.copyWithin(0, 2, 6); console.log(array1); // 出力:[2, 3, 4, 5, 4, 5, 6, 7] var array2 = [ 0, 1, 2, 3, 4, 5, 6, 7 ]; array2.copyWithin(4, 2, 6); console.log(array2); // 出力:[0, 1, 2, 3, 2, 3, 4, 5] // 【配列の範囲を超えてのコピーなし】 var array = [ 0, 1, 2, 3, 4, 5, 6, 7 ]; array.copyWithin(5, 0, 7); console.log(array); // 出力:[0, 1, 2, 3, 4, 0, 1, 2] // 【逆方向】 array = [ 0, 1, 2, 3, 4, 5, 6, 7 ]; array.copyWithin(5, 3, 1); // 処理なし console.log(array); // 出力:[0, 1, 2, 3, 4, 5, 6, 7] with【コピー&要素変更 (配列変更なし)】メモ概要配列の1要素を変更しコピー 元の配列は変更なし 関連copyWithin【内部コピー】 外部リンクECMA-262 (英語) Array.prototype.with ( index, value )ES2024 (15) ES2023 (14) ES2022 (13) 構文 array.with( index, value ) コピーされた新規配列 index設定位置インデックス (詳細は下記参照) value設定値 RangeError index (設定位置インデックス)が範囲外 index備考0 ≦index先頭からの要素位置index< 0 末尾からの要素位置(-1:末尾)例 const num_A = [0, 1, 2, 3, 4]; const with_A = num_A.with(2, 99); console.log( with_A ); // 出力:(5) [0, 1, 99, 3, 4] console.log( num_A ); // 出力:(5) [0, 1, 2, 3, 4] const num_B = [-5, -4, -3, -2, -1]; const with_B = num_B.with(-4, 99); console.log( with_B ); // 出力:(5) [-5, 99, -3, -2, -1] console.log( num_B ); // 出力:(5) [-5, -4, -3, -2, -1] try { const with_X = num_B.with(10, 99); } catch(e) { console.log(e); // RangeError: Invalid index : 10 } try { const with_X = num_B.with(-10, 99); } catch(e) { console.log(e); // RangeError: Invalid index : -10 } Array.prototype.fill【指定値設定】メモ概要配列内の要素範囲を指定値で設定し配列を変更 ~Array【型指定配列ビュー (%TypedArray%)】オブジェクト の fill【指定値設定】も同じアルゴリズム 設定の方向が逆の場合、処理なし (コピー元の終了位置 < コピー元の開始位置) 外部リンクECMA-262 (英語) Array.prototype.fill (value [ , start [ , end ] ] )ES2024 (15) ES2023 (14) ES2022 (13) 構文 array.fill( value[, start[, end]] ) 設定後の元の配列 (配列変更) value 設定値 start 設定開始位置インデックス (詳細は下記参照) end 設定終了位置インデックス (この位置は含まない:詳細は下記参照) start備考範囲外範囲内に補正0 ≦ start先頭からの位置インデックスstart < 0 末尾からの位置インデックス (要素数 + start)(-1:末尾)end備考省略要素数範囲外範囲内に補正0 ≦ end先頭からの位置インデックスend < 0 末尾からの位置インデックス (要素数 + end)(-1:末尾)例 var array = [ 0, 1, 2, 3, 4, 5, 6, 7 ]; var arrayNew = array.fill(-1, 1, 3); console.log(arrayNew); // 出力:[0, -1, -1, 3, 4, 5, 6, 7] console.log(array); // 出力:[0, -1, -1, 3, 4, 5, 6, 7] 元の配列を変更 array = [ -8, -7, -6, -5, -4, -3, -2, -1 ]; array.fill(0, -3); console.log(array); // 出力:[-8, -7, -6, -5, -4, 0, 0, 0] // 【~Array【型指定配列ビュー (%TypedArray%)】オブジェクト】 var array = [ 0, 1, 2, 3, 4, 5 ]; var typedArray = new Int32Array(array); typedArray.fill(-1, 1, 4); console.log(typedArray); // 出力:[0, -1, -1, -1, 4, 5] // 【逆方向】 array = [ 0, 1, 2, 3, 4, 5, 6, 7 ]; array.fill(-1, 3, 1); // 処理なし console.log(array); // 出力:[0, 1, 2, 3, 4, 5, 6, 7] Array.prototype.reverse【要素反転 (配列変更あり)】Array.prototype.toReversed【要素反転 (配列変更なし)】 メモ概要配列要素を反転 メソッド備考reverse【要素反転 (配列変更あり)】元配列の変更ありtoReversed【要素反転 (配列変更なし)】元配列の変更なし外部リンクECMA-262 (英語) Array.prototype.reverse ( )ES2024 (15) ES2023 (14) ES2022 (13) Array.prototype.toReversed ( )ES2024 (15) ES2023 (14) ES2022 (13) 構文 array.reverse( ) array.toReversed( ) 要素反転後の配列 sort:元配列の参照 (元配列変更あり) toSorted:新規配列 (元配列変更なし) ※ 空配列の要素反転は、空配列 例 // reverse【要素反転 (配列変更あり)】 const num_A = [1, 2, 3]; const rev_A = num_A.reverse(); console.log( rev_A ); // 出力:(3) [3, 2, 1] console.log( num_A ); // 出力:(3) [3, 2, 1] const str_B = ['strA', 'strB', 'strC']; const rev_B = str_B.reverse(); console.log( rev_B ); // 出力:(3) ['strC', 'strB', 'strA'] console.log( str_B ); // 出力:(3) ['strC', 'strB', 'strA'] const empty_C = []; const rev_C = empty_C.reverse(); console.log( rev_C ); // 出力:[] console.log( empty_C ); // 出力:[] // toReversed【要素反転 (配列変更なし)】 const num_X = [1, 2, 3]; const rev_X = num_X.toReversed(); console.log( rev_X ); // 出力:(3) [3, 2, 1] console.log( num_X ); // 出力:(3) [1, 2, 3] const str_Y = ['strA', 'strB', 'strC']; const rev_Y = str_Y.toReversed(); console.log( rev_Y ); // 出力:(3) ['strC', 'strB', 'strA'] console.log( str_Y ); // 出力:(3) ['strA', 'strB', 'strC'] const empty_Z = []; const rev_Z = empty_Z.toReversed(); console.log( rev_Z ); // 出力:[] console.log( empty_Z ); // 出力:[] Array.prototype.sort【ソート (配列変更あり)】Array.prototype.toSorted【ソート (配列変更なし)】 メモ概要配列要素のソート 比較用コールバック関数の指定可 比較で等しい要素の順序は元のまま メソッド備考sort【ソート (配列変更あり)】元配列の変更ありtoSorted【ソート (配列変更なし)】元配列の変更なし外部リンクECMA-262 (英語) Array.prototype.sort (comparefn)ES2024 (15) ES2023 (14) ES2022 (13) Array.prototype.toSorted ( comparefn )ES2024 (15) ES2023 (14) ES2022 (13) 構文 array.sort( [comparefn] ) array.toSorted( [comparefn] ) ソート後の配列 sort:元配列の参照 (元配列変更あり) toSorted:新規配列 (元配列変更なし) comparefn 比較用コールバック関数 (詳細は下記参照) 省略:文字列変換して比較 (実装依存) 例外 TypeError 例外 comparefn が呼び出し可能な関数オブジェクト以外 (実装依存) コールバック関数 引数名 (例)備考x要素xy要素y戻り値 (比較結果)備考負x < y とみなす0x = y とみなす正y < x とみなす例 // ソート関数 (絶対値で比較) function func(x, y) { const ret = Math.abs(x) - Math.abs(y); console.log("x:" + x, "y:" + y, "戻り値:" + ret); return ret; } const arraySort_A = [2, 3, -10, 1, 2, 123]; const arraySort_B = [2, 3, -10, 1, 2, 123]; const arraySort_C = [2, 3, -10, 1, 2, 123]; const arrayToSorted_A = [2, 3, -10, 1, 2, 123]; const arrayToSorted_B = [2, 3, -10, 1, 2, 123]; const arrayToSorted_C = [2, 3, -10, 1, 2, 123]; // sort【ソート (配列変更あり)】 let arraySort = arraySort_A.sort(); console.log(arraySort); // 出力:(6) [-10, 1, 123, 2, 2, 3] console.log(arraySort_A); // 出力:(6) [-10, 1, 123, 2, 2, 3] // sort【ソート (配列変更あり)】関数指定 // 実装によってはx・y逆転 (ソート結果は同じ) arraySort = arraySort_B.sort(func); // 出力: // x:3 y:2 戻り値:1 // x:-10 y:3 戻り値:7 // x:1 y:-10 戻り値:-9 // x:1 y:3 戻り値:-2 // x:1 y:2 戻り値:-1 // x:2 y:3 戻り値:-1 // x:2 y:2 戻り値:0 // x:123 y:2 戻り値:121 // x:123 y:-10 戻り値:113 console.log(arraySort); // 出力:(6) [1, 2, 2, 3, -10, 123] console.log(arraySort_B); // 出力:(6) [1, 2, 2, 3, -10, 123] // sort【ソート (配列変更あり)】空配列 const arraySort_Empty = []; arraySort = arraySort_Empty.sort(); console.log(arraySort.length); // 出力:0 // sort【ソート (配列変更あり)】関数不正 try { arraySort = arraySort_C.sort(null); } catch(e) { console.log(e); // 出力:TypeError: The comparison function must be either a function or undefined } // toSorted【ソート (配列変更なし)】 let arrayToSorted = arrayToSorted_A.toSorted(); console.log(arrayToSorted); // 出力:(6) [-10, 1, 123, 2, 2, 3] console.log(arrayToSorted_A); // 出力:(6) [2, 3, -10, 1, 2, 123] // toSorted【ソート (配列変更なし)】関数指定 // 実装によってはx・y逆転 (ソート結果は同じ) arrayToSorted = arrayToSorted_B.toSorted(func); // 出力: // x:3 y:2 戻り値:1 // x:-10 y:3 戻り値:7 // x:1 y:-10 戻り値:-9 // x:1 y:3 戻り値:-2 // x:1 y:2 戻り値:-1 // x:2 y:3 戻り値:-1 // x:2 y:2 戻り値:0 // x:123 y:2 戻り値:121 // x:123 y:-10 戻り値:113 console.log(arrayToSorted); // 出力:(6) [1, 2, 2, 3, -10, 123] console.log(arrayToSorted_B); // 出力:(6) [2, 3, -10, 1, 2, 123] // toSorted【ソート (配列変更なし)】空配列 const arrayToSorted_Empty = []; arrayToSorted = arrayToSorted_Empty.toSorted(func); console.log(arrayToSorted.length); // 出力:0 // toSorted【ソート (配列変更なし)】関数不正 try { arrayToSorted = arrayToSorted_C.toSorted(null); } catch(e) { console.log(e); // 出力:TypeError: The comparison function must be either a function or undefined }