【JS】spliceメソッドで、配列の要素を変えて行こう

spliceメソッドは、配列の要素を削除しながら、追加もできるメソッド。
パターン別に、配列の中身がどう変化していくか見ていき、最後にメソッドの種明かしをしようと思う。

#要素を一つ削除する

banks: [
  { id: 1, name: "東京中央銀行" },
  { id: 2, name: "開発投資銀行" },
  { id: 3, name: "白水銀行" },
]

banks.splice(banks[2], 1)

banksの中身

[
  { id: 1, name: "東京中央銀行" },
  { id: 2, name: "開発投資銀行" },
]

#要素を一つ追加する

banks: [
  { id: 1, name: "東京中央銀行" },
  { id: 2, name: "開発投資銀行" },
  { id: 3, name: "白水銀行" },
]

const newBank = { id: 4, name: "大東京銀行" }

banks.splice(banks[2], 0, newBank)

banksの中身

[
  { id: 1, name: "東京中央銀行" },
  { id: 2, name: "開発投資銀行" },
  { id: 3, name: "白水銀行" },
  { id: 4, name: "大東京銀行" }
]

#要素を二つ削除して、変わりに新たな要素を三つ追加する

banks: [
  { id: 1, name: "東京中央銀行" },
  { id: 2, name: "開発投資銀行" },
  { id: 3, name: "白水銀行" },
]

const newBank1 = { id: 4, name: "大東京銀行" }
const newBank2 = { id: 5, name: "関西シティ銀行" }
const newBank3 = { id: 6, name: "東京首都銀行" }

banks.splice(banks[2], 2, newBank1, newBank2, newBank3)

banksの中身

banksの中身
[
  { id: 1, name: "東京中央銀行" },
  { id: 4, name: "大東京銀行" },
  { id: 5, name: "関西シティ銀行" },
  { id: 6, name: "東京首都銀行" },
]

#spliceメソッドの種明かし

spliceメソッドは、位置を指定し、その位置から要素をいくつ変化させるか指定できるメソッド。

基本形

配列.splice(変化スタート位置, 削除する数, 追加する要素1, 追加する要素2)