ES6 配列のコピーおよびフィルメソッド copyWithin() および fill() の具体的な使用法

ES6 配列のコピーおよびフィルメソッド copyWithin() および fill() の具体的な使用法

copyWithin() と fill() の共通点は何ですか?

  • 配列インスタンスの範囲を指定する必要があります。開始インデックスを含み、終了インデックスは除外します。
  • このメソッドを使用すると、配列の内容は変更されますが、配列のサイズは変更されません。

バッチコピー copyWithin()

  • copyWithin() メソッドは、配列内の指定された位置から配列内の別の指定された位置に要素をコピーするために使用されます。
  • copyWithin() は、指定された範囲内の配列の内容を浅くコピーし、指定されたインデックスから挿入します。

文法

配列.copyWithin(ターゲット、開始、終了)

パラメータ:

パラメータ説明する
ターゲット必須。指定されたターゲット インデックスの場所にコピーします。
始めるオプション。要素のコピーの開始位置。
終わりオプション。コピーを終了するインデックス位置(デフォルトは 配列の長さ)。負の値の場合は逆の意味になります。

戻り値: コピーされた配列を返します

コード例:

// 配列の最初の 2 つの要素を最後の 2 つの要素にコピーします。
var fruit = ["バナナ", "オレンジ", "リンゴ", "マンゴー"]; 
fruit.copyWithin(2, 0);//バナナ、オレンジ、バナナ、オレンジ

// 配列の最初の 2 つの要素を 3 番目と 4 番目の位置にコピーします。
var fruit = ["バナナ", "オレンジ", "リンゴ", "マンゴー", "キウイ", "パパイヤ"]; 
fruit.copyWithin(2, 0, 2); //バナナ、オレンジ、バナナ、オレンジ、キウイ、パパイヤ

配列を埋めるメソッド fill()

fill() メソッドは、配列の要素を固定値に置き換えるために使用されます。

文法:

配列.fill(値、開始、終了)

パラメータ:

パラメータ説明する
価値必須。入力する値。
始めるオプション。ポジションの充足を開始します。
終わりオプション。充填停止位置(デフォルトは 配列の長さ)

戻り値: 配列

コード例:

//配列の最後の 2 つの要素に「Runoob」を入力します。
var fruit = ["バナナ", "オレンジ", "リンゴ", "マンゴー"]; 
fruit.fill("Runoob", 2, 4); //[ "バナナ", "オレンジ", "Runoob", "Runoob" ]

// 配列を固定値で埋めます:
var fruit = ["バナナ", "オレンジ", "リンゴ", "マンゴー"]; 
fruit.fill("Runoob");//Runoob、Runoob、Runoob、Runoob

指数の計算方法については、どちらの方法も同じである。

  • 開始インデックスは、塗りつぶしを開始する位置を指定するために使用され、オプションです。
  • 終了インデックスが指定されていない場合、配列は最後まで埋められます。
  • 負のインデックスは配列の末尾からカウントされます。負のインデックスは、配列の長さに正のインデックスを加えたものと考えることもできます。
  • 配列外、長さゼロ、および逆方向のインデックス範囲は、暗黙的に無視されます。

コード例:

定数ゼロ = [0,0,0,0,0];

// インデックスが 3 以上の要素を 6 個のゼロで埋めます。fill(6, 3);//[0,0,0,6,6]
zeroes.fill(0); //リセット //インデックスが1以上3未満の要素を7つのzeroesで埋めます。zeroes.fill(7,1,3); //[0,7,7,0,0]
zeroes.fill(0); //リセット //インデックスが1以上4未満の要素を8で埋める //(-4+zeroes.length=1) (-1+zeroes.length=4)
ゼロを埋める(8,-4,-1); //[0,8,8,8,0]

//インデックスが低すぎるため、ゼロは無視します。fill(1,-10,-6);//[0,0,0,0,0]
//インデックスが高すぎるため、ゼロは無視されます。fill(1,10,15);//[0,0,0,0,0]
//インデックスを逆にしてゼロを無視します。fill(2,4,2);//[0,0,0,0,0]
//インデックス部分は使用可能です。使用可能な部分を埋めてください。zeroes.fill(4,3,10);//[0,0,0,4,4]

ES6 のコピーおよびフィルメソッド copyWithin() と fill() の具体的な使用法についてはこれで終わりです。ES6 の copyWithin() と fill() の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ES6 で Array.copyWithin() 関数を使用する詳細な例

<<:  W3C チュートリアル (13): W3C WSDL アクティビティ

>>:  CSSはヒントボックス、バブルボックス、三角形を作成します

推薦する

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

仮想スクロールを簡単に実装するためのVueサンプルコード

目次序文ローリング原理成し遂げるソースコード参照する序文モバイル Web ページの日常的な開発では、...

MySQL の group by と order by を一緒に使用する方法

テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...

MySQL スロークエリログの役割と公開

序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...

DQL コマンドを使用して MySQL でデータをクエリする方法

この記事では、MySQL でよく使用されるデータ クエリ言語について説明します。 DQL (データク...

Vueはスクロールロードテーブルを実装します

目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...

Apache をインストールした後、サービスを開始できません (サービスを開始するとエラー コード 1 が表示されます)

目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...

jQueryは画像追従効果を実現します

この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...

JavaScript タイマー原理の詳細な説明

目次1. setTimeout() タイマー2. setTimeout() タイマーを停止する3. ...

Jsonフォーマットの詳細な説明

目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....

vue2.x の徹底研究 - h 関数の説明

目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...

仮想マシンのLinux初心者がIPを設定し、ネットワークを再起動する

仮想マシンを初めて使用する方や、仮想マシンに Linux をインストールしたばかりの方は、システムが...

Macでのファイル権限の表示と設定の詳細な説明

序文Mac システムのターミナルでファイルの権限を変更するには、Linux の chmod コマンド...

JS配列重複排除の詳細

目次1 テストケース2 JS配列重複排除4種類2.1 要素の比較2.1.1 二重層 for ループ比...

同じ IP のアクセス頻度を制限するように nginx を設定する方法

1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...