Javascript の Slice メソッドと例

JavaScript の配列スライスとは何ですか?

Array.prototype.slice は、既存の配列から連続した部分配列または「スライス」を抽出するために使用される JS Array メソッドです。

JavaScript スライスは 2 つの引数を取ることができます: スライスの開始インジケーターと終了インジケーターです。どちらもオプションです。引数なしで呼び出すこともできます。したがって、次の呼び出し署名があります:

// 

slice();
slice(start);
slice(start, end);

配列をスライスしてその一部を取得したい場合、実際には JavaScript 用の組み込み関数スライスがあります。箱から出してすぐに、元の配列のクローンが作成されます。

[1,2,3].slice() // [1,2,3]

結果は、元の配列ではなく、新しいメモリ アドレスを指します。これは、結果を他の関数と連鎖させたい場合に非常に役立ちます。実際の使用法は、スライスに入力を提供する場合です。

開始インデックス

スライスは最大 2 つの入力パラメータを取ることができます。最初のものは開始インデックスと呼ばれ、スライスをどこから開始するかを示します。

[1,2,3].slice(0) // returns [1,2,3]; Original array unmodified
[1,2,3].slice(1) // returns [2,3]; Original array unmodified
[1,2,3].slice(2) // returns [3]; Original array unmodified
[1,2,3].slice(3) // returns []; Original array unmodified

デフォルトでは、配列の最後までスライスされます。開始インデックスの興味深い点は、ゼロまたは正の数値だけでなく、負の数値も使用できることです。

[1,2,3].slice(-1) // [3]
[1,2,3].slice(-2) // [2,3]
[1,2,3].slice(-3) // [1,2,3]

負の数の場合は、n の末尾から数えたインデックスを指します。たとえば、 -1 は配列の最後の要素を指し、 -2 は最後から 2 番目の要素を指します。などです。最後の要素を超える要素はないため、 -0 がないことに注意してください。これは、状況によっては非常に明らかな場合もあれば、混乱を招く場合もあります。

終了インデックス

スライスは、終了インデックスと呼ばれる 2 番目のパラメーターを取ることができます。

[1,2,3].slice(0,3) // [1,2,3]
[1,2,3].slice(0,2) // [1,2]
[1,2,3].slice(0,1) // [1]

終了インデックスは範囲インデックスとも呼ばれ、要素インデックス + 1 を指します。これは何を意味しますか?これを説明するために、for ステートメントを関連付けることができれば、比較的簡単になります。

for (let i = 0; i < n; i++) {}

変数 i は、開始インデックスである 0 から始まります。そして終了インデックス n で終わります。終了インデックスは、 n - 1 となるため、配列の最後の要素ではありません。ただし、終了インデックスに関しては、n は最後の要素を含む「終了」を表します。終了インデックスを初めて使用する場合は、for ステートメントの記述方法を覚えておくか、最後の要素のインデックスを取得してそれに 1 を加えるということを覚えておいてください。別の考え方としては、終了インデックスは無制限 ([開始、終了)] であるということです。

開始インデックスと同様に、終了インデックスも負の値になる可能性があります。

1,2,3].slice(0,-1) // [1,2]
[1,2,3].slice(0,-2) // [1]

ここでもう少し注意してください。 -1 は最後の要素を参照するため、2 番目のパラメータとして使用すると、説明したように、無制限に最後の要素が除外されることを意味します。

それはわかりますが、最後の要素を含めたい場合はどうすればよいでしょうか?

[1,2,3].slice(0) // [1,2,3]

はい、単一のパラメータ入力を使用するだけです。

JavaScript スライスの使用方法: 実際の例

配列をスライスする典型的な例には、ソース配列から連続したセクションを生成することが含まれます。たとえば、最初の 3 つのアイテム、最後の 3 つのアイテム、および特定のインデックスから別のインデックスまでにわたるいくつかのアイテムです。

以下の例に示すように:

const elements = [
  "Please",
  "Send",
  "Cats",
  "Monkeys",
  "And",
  "Zebras",
  "In",
  "Large",
  "Cages",
  "Make",
  "Sure",
  "Padlocked",
];

const firstThree = elements.slice(0, 3); // ["Please", "Send", "Cats"]

const lastThree = elements.slice(-3, elements.length); // ["Make", "Sure", "Padlocked"]

const fromThirdToFifth = elements.slice(2, 5); // ["Cats", "Monkeys", "And"]

JavaScript スライスに引数を渡さない場合、すべての項目を含むソース配列の浅いコピーが取得されます。

const allCopied = elements.slice();

// (12) ["Please", "Send", "Cats", "Monkeys", "And", "Zebras", "In", "Large", "Cages", "Make", "Sure", "Padlocked"]

これは実質的に [...要素] です。

第 2 引数のない JavaScript 配列スライス メソッド

2 番目の引数を渡さない場合、抽出された JavaScript 配列スライスは最後の要素まで拡張されます:

const fromThird = elements.slice(2);
// (10) ["Cats", "Monkeys", "And", "Zebras", "In", "Large", "Cages", "Make", "Sure", "Padlocked"]

const lastThree = elements.slice(-3, elements.length);
// (3) ["Make", "Sure", "Padlocked"]

const lastThreeWithNoSecArg = elements.slice(-3);
// (3) ["Make", "Sure", "Padlocked"]

負のオフセットを持つ JavaScript Array.prototype.slice

上記でも、負の数値を引数として渡すことができることに注意してください。引数の負の値は、最後の項目から逆算したオフセット位置を示します。両方の引数に対してこれを行うことができます:

const latestTwoBeforeLast = elements.slice(-3, -1);
// (2) ["Make", "Sure"]

start に end よりも大きい値を渡すと、空の配列が得られます。

const somewhereWeDontKnow = elements.slice(5, 2); // []

これは、常に、より小さい正のインデックスからスライスを開始する必要があることを示しています。

Array.prototype.slice: 開始位置が配列の長さを超えています

同様に、配列の長さよりも大きい値を start に渡すと、空の配列が得られます。

const somewhereInOuterSpace = elements.slice(15, 2); // []

スパース配列での JS スライスの使用

ターゲットスライスにスパースアイテムがある場合、それらもコピーされます。

const elements = [
  "Please",
  "Send",
  ,
  "Cats",
  ,
  "Monkeys",
  "And",
  "Zebras",
  "In",
  "Large",
  "Cages",
  "Make",
  "Sure",
  "Padlocked",
];

const sparseItems = elements.slice(0, 6);
// (6) [ 'Please', 'Send', <1 empty item>, 'Cats', <1 empty item>, 'Monkeys' ]

Array.prototype.slice: 引数のリストから配列を作成する

このセクションでは、スライスについて少し詳しく説明します。 Array.prototype.slice を使用して、関数に渡される引数のリストから配列を構築する 2 つの興味深い方法を開発しました。

最初のもの:

const createArray = (...args) => Array.prototype.slice.call(args);
const array = createArray(1, 2, 3, 4);
// (4) [1, 2, 3, 4]

それは簡単でした。

これを行う次のレベルの方法は、可能な限り厄介な方法です:

const boundSlice = Function.prototype.call.bind(Array.prototype.slice);

const createArray = (...args) => boundSlice(args);

const array = createArray(1, 2, 3, 4);
// (4) [1, 2, 3, 4]

Slicing a JavaScript String

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";

const firstThreeChars = mnemonic.slice(0, 3); // "Ple"
const lastThreeChars = mnemonic.slice(-3, mnemonic.length); // "ked"
const fromThirdToFifthChars = mnemonic.slice(2, 5); // "eas"

Again, both arguments represent zero-based index numbers or offset values. Here too, the first argument -- 0 in the firstThree assignment -- stands for the starting index or offset in the source array. And the second argument (3) denotes the index or offset before which extraction should stop.

JavaScript String Slice Nuances

Using JavaScript String slice With No Arguments

Similar to Array slice, if we don't pass any argument to String slice(), the whole string is copied over:

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";
const memorizedMnemonic = mnemonic.slice();

// "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked"

JavaScript String slice with Negative Offsets

Similar to Array.prototype.slice, negative values for start and end represent offset positions from the end of the array:

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";

const lastThreeChars = mnemonic.slice(-3); // "ked"
const latestTwoCharsBeforeLast = mnemonic.slice(-3, -1);  // "ke"

Summary

In this post, we expounded the slice() method in JavaScript. We saw that JavaScript implements slice() in two flavors: one for Arrays with Array.prototype.slice and one for Strings with String.prototype.slice. We found out through examples that both methods produce a copy of the source object and they are used to extract a target contiguous slice from it.

We covered a couple of examples of how function composition and context binding with Function.prototype.call and Function.prototype.bind allows us to define custom functions using Array.prototype.slice to help us generate arrays from a list of arguments.

We also saw that String.prototype.slice is an identical implementation of Array.prototype.slice that removes the overhead of converting a string to an array of characters.

以上がJavascript の Slice メソッドと例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。