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

推薦する

MySQL DML ステートメントの概要

DML 操作とは、データベース内のテーブル レコードに対する操作を指し、主にテーブル レコードの挿入...

VMware仮想マシンブリッジによるインターネット相互接続を実現する方法

VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...

MySQL 学習データベースバックアップの詳細な説明

目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...

Linux の Centos7 に Mysql5.7.19 をインストールする詳細なチュートリアル

1. MySQLをダウンロードするURL: https://dev.mysql.com/downlo...

CentOS 7 ブートカーネルの切り替えとブートモードの切り替えの説明

Centos7 スイッチブートカーネル注: 必要に応じて、最初にyum update -yを実行して...

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル (Windows 版)

1. はじめにプロジェクトではMySQLを使用しています。インターネット上の例を参考にインストール...

Linux の検索ツールの代替となるフレンドリーなツール

find コマンドは、指定されたディレクトリ内のファイルを検索するために使用されます。引数の前の文字...

mysql binlog (バイナリログ) を表示する方法

たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...

血の写輪眼と輪廻眼の特殊効果コードを実現するためのHTML+CSS

結果 (完全なコードは下部にあります): 実装は難しくありませんが、繰り返しコードが多くなります。実...

テーブルリストを破棄するには、標準のdl、dt、ddタグを使用します。

現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを xHTML + CSS に置...

JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...

フォーム内のどの隠し属性をフォームとともに送信できるか

フォーム内の visibility=hidden および display=none のフォーム要素は...

MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27の詳細なダウンロード、インストール、および構成チュートリアルは参考までに、具...