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

推薦する

HTMLページにビデオを挿入する方法の概要

ページでビデオ タグを使用する場合は、Ogg Theora または VP8 (これに問題がない場合)...

Vue3 (V) HTTPライブラリaxiosの統合の詳細

目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...

MySQL を使用してポート 3306 を開いたり変更したり、Ubuntu/Linux 環境でアクセス許可を開く

オペレーティングシステム: Ubuntu 17.04 64ビットMySQL バージョン: MySQL...

Linux の高性能ネットワーク IO と Reactor モデルの分析

目次1. 基本概念の紹介2. ネットワークIOの読み取りと書き込みのプロセス3. 5つのLinuxネ...

Linux プロセスの CPU 使用率が 700% に達し、終了できない場合の解決策

目次1. 問題の発見2. プロセスの詳細情報を表示する3. 解決策4. 大法を再開する1. 問題の発...

Linuxで$を#に変更する方法

このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...

Vueライフサイクルの違いの詳細な説明

ライフサイクル分類vue の各コンポーネントは独立しており、各コンポーネントには独自のライフサイクル...

HTML、CSS、JSコメントの標準的な使用法の概要

必要なコメントを追加することは、責任感と道徳心のあるフロントエンド開発者が持つべき良い習慣であり、コ...

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...

Vueはシンプルなコメント機能を実装します

この記事では、Vueの簡単なコメント機能を実装するための具体的なコードを参考までに共有します。具体的...

ブラウザが登録できるイベントの概要

HTML イベント リスト一般イベント: onClick HTML: マウスクリックイベント。主にオ...

Dockerの匿名マウントと名前付きマウントの具体的な使用法

目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...

ウェブテーブルフレームを作成するためのヒント

<br />Web テーブル フレームを作成するためのヒント。 ------------...

CSS3 で画像ドロワー効果を実装するためのサンプル コード

いつものように、まずは画像効果を投稿しましょう: このエフェクトの原理は非常にシンプルです。CSS3...

DHTML オブジェクト (さまざまな HTML オブジェクトの共通プロパティ)

!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...