Array.slice と Array.splice: 混乱を解消する

導入

JavaScript 開発者として、2 つの Array メソッドを完全に把握するのは少し難しいと感じることがよくあります

1. 配列.スライス
2. 配列.スプライス。

そこで、これらのメソッドを詳しく掘り下げ、明確な例を示して説明することにしました。

構文を書き直すと

配列.スライス

returns the deleted elements in a form of Array = Array.prototype.slice(startIndex, endIndex-1);

Array.splice (P は Permanent - 常に覚えておいてください)

JavaScript の splice メソッドは、既存の要素を削除または置換したり、新しい要素を所定の位置に追加したりすることで、配列の内容を変更します

要素の削除構文

returns the deleted elements in a form of Array = Array.prototype.splice(startIndex, endIndex-1); // permanent 

要素の追加構文

array.splice(startIndex, 0, item1, item2, ..., itemX);

注:-

1. 元の配列を変更し、削除された配列を返します。

2. 追加操作として動作すると、何も削除されないため、[] が返されます。

いくつかの例を見てみましょう:-

Q1.演習 1 - スライスを使用して配列の一部を取得する: 1 ～ 10 の数値の配列を作成します。スライス メソッドを使用して、4 ～ 8 の数値を含む新しい配列を取得します。

const arr = Array.from(Array(10), (_, i) => i+1);
console.log('Array --> ', arr);
console.log('get a new array that includes numbers from 4 to 8 --> ', arr.slice(3, 8)); // Array.prototype.slice(startIndex, endIndex-1);

// [ 4, 5, 6, 7, 8 ]

Q2.演習 2 - スプライスを使用して配列から要素を削除する: フルーツの配列を作成します。 splice メソッドを使用して、配列から「リンゴ」と「バナナ」を削除します。

const fruits = ['apple', 'banana', 'orange', 'mango', 'kiwi'];

fruits.splice(0, 2)// permanent

console.log('splice method to remove "apple" and "banana" from the array. --> ', fruits);

// [ 'orange', 'mango', 'kiwi' ]

Q3.演習 3 - スプライスを使用して要素を配列に追加する: 色の配列を作成します。スプライスメソッドを使用して、「赤」の後に「ピンク」と「紫」を追加します。

const colors = ['red', 'green', 'blue'];

const y = colors.splice(1, 0, "pink", "purple"); /
console.log(y); // [] see above to see why.
console.log('splice method to add "pink" and "purple" after "red" --> ', colors)

// [ 'red', 'pink', 'purple', 'green', 'blue' ]

Q4.演習 4 - スライスとスプライスを併用する: 「a」から「e」までの文字の配列を作成します。最初の 3 文字の新しい配列を取得するには、slice を使用します。次に、元の配列でスプライスを使用してこれらの文字を削除します。

const letters = ['a', 'b', 'c', 'd', 'e'];
const newSlice = letters.slice(0, 3);
const x = letters.splice(0, 3);
console.log(x);
console.log('slice to get a new array of the first three letters --> ', newSlice) // [ 'a', 'b', 'c' ]

console.log('Then use splice on the original array to remove these letters --> ', letters)[ 'd', 'e' ]

ご質問やご不明な点がございましたら、お気軽にお問い合わせください。

以上がArray.slice と Array.splice: 混乱を解消するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。