初めに
sliceとsplice...?
この2つは名前が似ているので学習当初は何がなんだかわかりませんでした。
なので配列を扱う時のsliceとspliceについて解説していきます。
結論
slice・・・配列から要素を削除しない、要素を抽出するだけ
splice・・・配列から要素を削除する、置き換えたり新しい要素を追加したりもできる
やってみる
適当な配列を用意します
const users = [
{ id:1, name: 'Mick', age: 34, hobby: "cycling" },
{ id:2, name: 'Isaac', age: 40, hobby: "music" },
{ id:3, name: 'Galileo', age: 21, hobby: "guiter" },
{ id:4, name: 'Marie', age: 18, hobby: "climbing" },
{ id:5, name: 'Johannes', age: 6, hobby: "toy" },
];
slice
まずはsliceから😛
const slicedArray = users.slice(0,1)
console.log(slicedArray)
// 0: {id: 1, name: "Mick", age: 34, hobby: "cycling"}
usersの中身がどうなっているか確認しましょう
console.log(users)
// 0: {id: 1, name: "Mick", age: 34, hobby: "cycling"}
// 1: {id: 2, name: "Isaac", age: 40, hobby: "music"}
// 2: {id: 3, name: "Galileo", age: 21, hobby: "guiter"}
// 3: {id: 4, name: "Marie", age: 18, hobby: "climbing"}
// 4: {id: 5, name: "Johannes", age: 6, hobby: "toy"}
特に配列の中身は変わっていませんね。
つまりsliceは配列の中身を抽出しているだけです。
splice
次にspliceです😛
// spliceの場合
const splice = users.splice(0,1)
console.log(splice)
// 0: {id: 1, name: "Mick", age: 34, hobby: "cycling"}
出力結果がsliceと同じですね・・。それ故にややこしい・・。
てなわけで元の配列を確認しましょう
console.log(users)
// 0: {id: 2, name: "Isaac", age: 40, hobby: "music"}
// 1: {id: 3, name: "Galileo", age: 21, hobby: "guiter"}
// 2: {id: 4, name: "Marie", age: 18, hobby: "climbing"}
// 3: {id: 5, name: "Johannes", age: 6, hobby: "toy"}
// id: 1のユーザーが削除されている
先ほどspliceして取り出したユーザーが配列から消えていますね。
つまりspliceは配列から要素を消したりします（新しい要素を追加したり置き換えたりもできます）
まとめ
slice・・・配列から要素を抽出する（元の配列は変わらない）
splice・・・配列から消したり置き換えたりする（元の配列が変わる）
参考
https://qiita.com/112KA/items/3748ba88160a02f518c1
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
↧