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はヒントボックス、バブルボックス、三角形を作成します

推薦する

CSS における要素の表示モード

CSS では、要素タグは、要素の表示モードの違いに応じて、インラインレベル要素とブロックレベル要素の...

DeepinでPyenvをインストールする手順

序文これまでは、/bin/ ディレクトリのソフトリンクを変更して Python のバージョンを切り替...

CSSテキストシャドウの徐々にぼやける効果の実装

テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...

Vue3 の emitting と attr の違いの分析

目次結論は実践分析拡張機能要約する結論は親コンポーネントでカスタム イベントが定義されている場合、子...

Tomcat のパフォーマンス最適化のための Apr モジュールの構築方法

序文Tomcat は、無数のチューニング オプションを備えた、広く使用されている Java Web ...

Zabbix 監視 Docker アプリケーション構成

コンテナの応用はますます一般的になっていますが、大量のコンテナをどのように管理すればよいのでしょうか...

docker を使用して hbase をデプロイする方法

スタンドアロンの hbase について、まずは説明しましょう。 Dockerをインストールするまず ...

MySQL 起動エラー InnoDB: ロックできません/ibdata1 エラー

OS X 環境で MySQL を起動すると、エラー メッセージが表示されます。 016-03-03T...

Webデザイン: タイトルが完全に表示できない場合

<br />今日、新しくなった ChinaUI.com の Web サイトを見たのですが...

HTML a タグの href 属性を使用して相対パスと絶対パスを指定する方法

実際のWeb開発では、画像の挿入やCSSファイルなどすべてパスが必要となります。ファイルパスを誤って...

シェルスクリプトは、Docker の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。

Docker 公開方法は、DevOps (送信、コンパイル、パッケージ化、リリースなどの一連のイベ...

Docker Compose マルチコンテナデプロイメントの実装

目次1. WordPressの導入1. 環境を整える(II) イメージを実行するDocker の作成...

17 個の JavaScript ワンライナー

目次1. DOMとBOM関連1. 要素にフォーカスがあるかどうかを確認する2. 要素の兄弟ノードをす...

CSS3 列を使用したカード ウォーターフォール レイアウトを実装するためのサンプル コード

この記事では、カード ウォーターフォール レイアウトを実現するための CSS3 列のサンプル コード...

CSS スタイルの競合を解決するいくつかの方法 (要約)

1. セレクターを調整するコンビネータを使用すると、セレクターの説明をより正確に記述できます (C...