JavaScriptのslice()、splice()、split()メソッドに関する混乱を解消しましょう。

JavaScriptの組み込みメソッドは、正しく理解すれば、プログラミング中に大いに役立ちます。:私はこの記事では、それらのうち3つを説明したいと思いslice()splice()およびsplit()方法。おそらく、名前が非常に似ているため、経験豊富な開発者の間でも混乱することがよくあります。

これらの3つの方法は就職の面接でも尋ねられる可能性があるため、学生とジュニア開発者にはこの記事を注意深く読むことをお勧めします。

最後に、各方法の要約を見つけることができます。必要に応じて、以下のビデオバージョンもご覧いただけます。

それでは始めましょう…

JavaScript配列

まず、JavaScript配列がどのように機能するかを理解する必要があります。他のプログラミング言語と同様に、配列を使用して複数のデータをJSに格納します。ただし、違いは、JS配列に一度に異なるタイプのデータを含めることができることです。

これらの配列に対して操作を行う必要がある場合があります。次に、slice()やsplice()などのJSメソッドを使用します。JavaScriptで配列を宣言する方法を以下に示します。

let arrayDefinition = [];   // Array declaration in JS

次に、異なるデータ型で別の配列を宣言しましょう。以下の例で使用します。

let array = [1, 2, 3, "hello world", 4.12, true];

この使用法はJavaScriptで有効です。文字列、数値、ブール値など、さまざまなデータ型の配列。

スライス ( )

スライス()メソッドをコピーし、新しい配列として一部をコピーし、配列を返すの所与の部分。元の配列は変更されません。

array.slice(from, until);

  • From:要素インデックスから配列をスライスします
  • まで:別の要素インデックスまで配列をスライスします

たとえば、上の配列から最初の3つの要素をスライスしたいとします。配列の最初の要素には常に0のインデックスが付けられているため、「from」 0のスライスを開始します。

array.slice(0, until);

ここで注意が必要な部分があります。私は最初の3つの要素をスライスしたい場合は、私が与えなければならないまで3としてパラメータスライス()メソッドは、最後に指定された要素が含まれていません。

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

これにより、混乱が生じる可能性があります。そのため、2番目のパラメーターを「until」と呼びます

let newArray = array.slice(0, 3);   // Return value is also an array

最後に、スライスした配列をnewArray変数に割り当てます。結果を見てみましょう:

重要な注意:Slice()メソッドは文字列にも使用できます。

スプライス()

この関数の名前はslice()と非常によく似ています。この名前の類似性は、開発者を混乱させることがよくあります。スプライス()メソッドは、変更追加またはそれから要素を除去することによって、アレイ。splice()を使用して要素を追加および削除する方法を見てみましょう:

要素の削除

要素を削除するには、インデックスパラメータと削除する要素数を指定する必要があります。

array.splice(index, number of elements);

インデックスは、要素を削除するための開始点です。指定されたインデックスのインデックス番号が小さい要素は削除されません。

array.splice(2);  // Every element starting from index 2, will be removed

2番目のパラメーターを定義しない場合、指定されたインデックスから始まるすべての要素が配列から削除されます。

2番目の例として、2番目のパラメーターを1として指定します。これにより、インデックス2から始まる要素は、splice()メソッドを呼び出すたびに1つずつ削除されます。

array.splice(2, 1);

最初の呼び出し後:

2回目の通話後:

これは、インデックス2がなくなるまで続けることができます。

要素の追加

要素を追加するには、それらを3番目、4番目、5番目のパラメーター(追加する数によって異なります)としてsplice()メソッドに指定する必要があります。

array.splice(インデックス、要素数、要素、要素);

例として、配列の最初にabを追加し何も削除しません。

array.splice(0, 0, 'a', 'b');

スプリット ( )

Slice()およびsplice()メソッドは配列用です。スプリット()メソッドは、のために使用される文字列。文字列を部分文字列に分割し、それらを配列として返します。2つのパラメーターを取り、両方ともオプションです。

string.split(separator, limit);

  • セパレータ:文字列をカンマや文字などで分割する方法を定義します。
  • 制限:指定された数で分割の数を制限します

スプリット()メソッドは、に直接動作しないアレイ。ただし、最初に配列の要素を文字列に変換してから、split()メソッドを使用できます。

それがどのように機能するか見てみましょう。

まず、toString()メソッドを使用して配列を文字列に変換します。

let myString = array.toString();

次に、myStringコンマで分割し、3つの部分文字列に制限して、配列として返します。

let newArray = myString.split(",", 3);

ご覧のとおり、myStringはコンマで分割されています。分割を3に制限しているため、最初の3つの要素のみが返されます。

注:次のような使用法がある場合array.split("");文字列の各文字は部分文字列として分割されます:

概要:

スライス ( )

  • 配列から要素をコピーします
  • それらを新しい配列として返します
  • 元の配列は変更されません
  • …から指定されたインデックスまでスライスを開始します:array.slice(from、until)
  • スライスには「until」インデックスパラメータは含まれません
  • 配列と文字列の両方に使用できます

スプライス()

  • 配列から要素を追加/削除するために使用されます
  • 削除された要素の配列を返します
  • 配列を変更します
  • 要素を追加する場合:array.splice(インデックス、要素数、要素)
  • 要素を削除する場合:array.splice(インデックス、要素数)
  • アレイにのみ使用できます

スプリット ( )

  • 文字列を部分文字列に分割します
  • それらを配列で返します
  • 2つのパラメーターを取ります。どちらもオプションです:string.split(separator、limit)
  • 元の文字列は変更されません
  • 文字列にのみ使用できます

JavaScript配列と文字列には、JavaScriptプログラミングでの作業を容易にする他の多くの組み込みメソッドがあります。次に、JavaScriptの部分文字列メソッドに関する私の新しい記事を確認できます。

Web開発について詳しく知りたい場合は、Youtubeで私フォローしてください

読んでくれてありがとう!