Javascript スライス メソッドの使用方法

Javascript の slice() メソッドは、元のデータを変更したり変更したりしません。このチュートリアルでは、Javascript のスライス手法を利用する方法と、その不変の可能性を利用する方法を説明します。

javascriptスライスメソッドとは？

簡単に言うと、javascript スライス関数は、配列の一部の浅いコピーを新しい配列オブジェクトに返す組み込みの配列または文字列メソッドです。ここで、'start' と 'end' は配列のインデックスです。初期配列への変更はありません。

 const language = ["javascript", "java", "ruby", "rust", "python"]; console.log(language.slice(2)); // ['ruby', 'rust', 'python']

ゼロ インデックスのベースを使用してインデックス 2 でスライスします。これにより、スライスされた要素を含む新しい新しい配列が生成されます。しかし、元の配列 (言語) を調べるとどうなるでしょうか?変更されますか？ JavaScript スライス手法は、JavaScript スプライス関数とは異なり、元のデータを変更したり影響を与えたりしません。

Javascript スライスメソッドの使い方

Javascript スライス メソッドの使い方はかなり簡単です。ただし、それを完全に理解するために、その構文を強調します。

これの構文は何ですか？この構文は、次のように「slice」という単語を括弧「()」で囲むだけで記述されます。

 slice()

これはメソッドであるため、引数を受け取ることができます。これにより、slice 関数を使用して配列でできることをより柔軟に行うことができます。

それらは次のとおりです。

1. 始める
2. 終わり

単にスライス メソッドを開始するインデックスを示す開始パラメーターをスライス関数に渡すことができます。前の例から確認すると、スライス メソッドは入力として 2 を受け入れます。これは単にインデックス 2 から開始することを意味します。開始引数が指定されていない場合、インデックスは 0 に設定されます。終了引数もスライスに送信できます。メソッドですが、正しく機能するかどうかは start パラメータに依存しています。 end 引数は、要素の抽出を終了するインデックスを配列に指示します。これは、最後を含めずに、最後までのみ行うことで行われます。 end 引数が指定されていない場合は、完全な配列の長さが返されます。

 slice(start) slice(start,end)

スライス メソッドの使用: いくつかの種類のプログラミング言語を含む配列があり、その配列から 3 つの要素を選択したいとします。インデックスに基づく 2 つのパラメーター、start と end を指定して、slice(1,4) 関数を作成するだけです。抽出は、指定されたインデックス 1 で始まり、4 で終了しますが、正確な 4 番目の要素を返す代わりに、4 番目の要素の前の要素を提供します。

方法は次のとおりです。

 const language = ["javascript", "java", "ruby", "rust", "python"]; console.log(language.slice(1,4)); // ['ruby', 'rust', 'python']

既存の配列を変更せずに、新しい配列が返されました。

 const language = ["javascript", "java", "ruby", "rust", "python"]; console.log(language.slice(1,4)); // ['java', 'ruby', 'rust'] console.log(language); // ['javascript', 'java', 'ruby', 'rust', 'python']

配列以外でスライス メソッドを使用する

JavaScript 配列は、次の領域で使用できます。ただし、スライス メソッドは配列以外でも使用できることに注意してください。

1. オブジェクトで Javascript スライス メソッドを使用する。

2. スパース配列で Javascript スライス メソッドを使用する。

3. Javascript スライス メソッドを使用して、非配列を配列に変換します。

   オブジェクトで Javascript スライス メソッドを使用する

   JavaScript のスライス メソッドは、最初にオブジェクトのプロパティの長さを考慮し、次に整数キー プロパティを最初から最後まで読み取ることによって、オブジェクトに対して機能します。そしてそれらを新しい配列に入れます。 call() メソッドを使用します。

   
   

    const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.slice.call(arrayLike, 1, 3)); // [3, 4]

   スパース配列で Javascript スライス メソッドを使用する

   javascript のスライス メソッドがスパース配列で使用されている場合、ソースがスパースの場合、 slice()から返される配列がスパースになることがあります。

   
   

    console.log([1, 2, , 4, 5].slice(1, 4)) // [2, empty, 4]

   Javascript スライス メソッドを使用して非配列を配列に変換する

   配列のようなオブジェクトを配列に変換するユーティリティ関数を構築するには、Javascript のスライス メソッドとcall()およびbind()メソッドを使用します。

   
   

 const sliceEl = Function.prototype.call.bind(Array.prototype.slice); function list() {  return sliceEl(arguments); } const listed = list(1, 2, 3) console.log(listed) //[1, 2, 3]

よくある質問

Javascriptのスライスとスプライスメソッドの違いは何ですか?

スライスは元の配列から新しい配列を作成するために使用されますが、スプライスは元の配列から要素を追加/削除するために使用されます。スライスの場合、変更は元の配列には反映されません。ただし、スプライスの場合、変更は元の配列に反映されます。

スライス方法とスプライス方法の類似点は何ですか?

それらの主な類似点は、どちらも JavaScript 配列のメソッドであることです。

スライス メソッドはいつ使用しますか?

タスクの実行中に元のデータを変更または変更したくない場合は、スライス アプローチが最適な方法です。これは ReactJs の典型的なアプローチです。

お持ち帰り

最後に、javascript の slice() メソッドはコピーの方法です。元の配列は変更されませんが、代わりに元の配列と同じ項目の一部を含む浅い複製が提供されます。これらは 2 つのオプション パラメータ 'start' と 'end' を受け入れ、これらのパラメータに応じて配列から要素を取り出します。非配列に適用できます。オブジェクト、スパース配列など。