LINDORのAdvent Calendar（本物）の6日目を開けたところ。
配列とかおれおれAdvent Calendar2018 – 06日目

splice() を使ってやれます。

const arr = [11, 22, 33, 44, 55];

const index = 2;
console.log(arr[index]); // => 33
arr.splice(index, 1);
console.log(arr); // => [ 11, 22, 44, 55 ]

第2引数 1 を忘れるとごそっと消え去るので気を付けてください。

仕様

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

対象の配列は破壊的に変更されます。

引数

  • start … 削除開始する位置。先頭は 0 。負数の場合、後ろから数える
  • deleteCount … 削除する数。初期値は array.length - start
  • item1, item2, ... … 削除個所に挿入する要素

戻り値

削除された要素の配列。削除数 deleteCount が 1 や 0 の場合も配列。

例

要素を探して削除

findIndex() でインデックスを検索、それを削除します。

const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];

const id = '102';
const index = users.findIndex((v) => v.id === id);
const removedUser = users.splice(index, 1);
console.log(users);
// => [ { id: '101', name: 'Alice' }, { id: '103', name: 'Charlie' } ]
console.log(removedUser);
// => [ { id: '102', name: 'Bob' } ]

合致するものを全て削除

地道に繰り返してやります。まあ処理は一緒。

const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];

const ids = ['101', '103'];
ids.forEach((id) => {
  const index = users.findIndex((v) => v.id === id);
  users.splice(index, 1);
});
console.log(users); // => [ { id: '102', name: 'Bob' } ]

別インスタンスで良ければ filter() にしよう。

その他のメソッド

新しい配列を生成するなら filter()

splice() は破壊的に取り除くけど、 filter() なら非破壊で新しい配列を作ってくれます。

さっきの例を filter() でやる版。


const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];

const id = '102';
const newList = users.filter((v) => v.id !== id);

console.log(users.length); // => 3

console.log(newList.length); // => 2
console.log(newList);
// [ { id: '101', name: 'Alice' }, { id: '103', name: 'Charlie' } ]

一部を取り出すなら slice()

名前似てるけど違う機能。

こいつも非破壊で、別インスタンスを作ります。

const arr = [11, 22, 33, 44, 55];

const arr2 = arr.slice(1, 3);
console.log(arr2); // => [ 22, 33 ]

第2引数が抜き出す数じゃなくて抜き出し終わりの位置だってことに注意。

全部消すなら length = 0

arr.length = 0;

わあかんたん。

その他

空要素に対応

undefined すら入ってないような配列でも安心してお使い頂けます。やるじゃん。

const arr = Array(5);
console.log(arr); // => [ <5 empty items> ]

const removed = arr.splice(1, 2);
console.log(arr); // => [ <3 empty items> ]
console.log(removed); // => [ <2 empty items> ]

Vue.jsで使える

Vue.jsがサポートする配列の変更メソッドに含まれております。 良かったね。

おまけ: 英単語 splice

あんまり耳馴染みないと思うんだけど、2つのものを「継ぎ合わせる」という意味だそうです。

解いて組み継ぎする、より継ぎする、継ぎ合わせる、(…に)継ぐ、重ね継ぐ、結婚させる、接合する

Googleで画像検索すると理解しやすそう。くるっと結ぶだけじゃなくて完全に一体化しちゃう感じかな。

この動画わかりやすい。

Short Splice Knot | How to Tie a Short Splice Knot – YouTube

映画 “Splice”

splice だけで検索すると2009年の映画のやつが出てくる。（人と地域によるかも。）

こんなあらすじらしい。

Genetic engineers Clive Nicoli and Elsa Kast hope to achieve fame by successfully splicing together the DNA of different animals to create new hybrid animals for medical use.

遺伝子工学者のClive NicoliとElsa Kastは、異なる動物のDNAを継ぎ合わせ (splicing together)、医療目的の新しい混成動物を創造することで歴史に名を刻むことを望んでいた。

YouTubeにトレーラーがあるけど、ホラーSFっぽい。

遺伝子工学方面ではスプライシングって普通に言う？

DNAから写しとった遺伝情報のなかから，不要な部分を取り除く分子的な編集作業をスプライシングという。

おしまい

英単語的には挿入する方が主たる意味になるのかな。

関連

参考