Javascript 配列の破壊的メソッドと非破壊的メソッドに注意して配列操作を行う

6031 ワード
TypeScript 配列操作 配列 JavaScript JavaScript テキストリンク

配列の破壊的メソッドと非破壊的メソッドとは

非破壊的

元の配列を変更する

メリット

一つの配列を操作するためメモリの消費を抑えれる

デメリット

元の配列を変化させるため使いすぎたり、複雑な場合はバグの温床になりやすい

破壊的

元の配列を変更しない

メリット

元の配列を操作しないため安全なコードを書ける

デメリット

配列を新たに作り出してしまうため、大規模な配列操作に対してはメモリを大量に使う

実際のCodeを使った例

1.破壊的メソッド push

const arrayA = ['あ', 'い', 'う', 'え', 'お']
//破壊的メソッド arr.push([element1[, ...[, elementN]]])
arrayA.push('か')
console.log(arrayA)

// [LOG]: ["あ", "い", "う", "え", "お", "か"]
2.非破壊的メソッド concat

const arrayB = ['あ', 'い', 'う', 'え', 'お']

//非破壊的メソッド const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])
const newArrayB = arrayB.concat('か')
console.log(arrayB)
console.log(newArrayB)

//元の配列B [LOG]: ["あ", "い", "う", "え", "お"] 
//新しい配列B [LOG]: ["あ", "い", "う", "え", "お", "か"]

その他の破壊的・非破壊的メソッド一覧

使い分け

大規模な配列(1000件とか1万件とかを超えるような配列操作以外は基本的には元の配列を使用する場合以外は破壊的メソッドはバグの温床になりやすいため避ける

破壊的メソッドを非破壊的に使う方法

spred構文を使用してcopyを作る

const arrayC = ["あ", "い", "う", "え", "お"] 
// Copyを作る(注意: 代入するは意味がない)
const copyC = [...arrayC]
copyC.push('か')

console.log(arrayC)
console.log(copyC)

//元の配列C [LOG]: ["あ", "い", "う", "え", "お"] 
//copy配列C [LOG]: ["あ", "い", "う", "え", "お", "か"]
結論

大規模な配列(1000件とか1万件とかを超えるような配列操作以外は基本的には元の配列を使用する場合以外は破壊的メソッドはバグの温床になりやすいため避ける
しかし、破壊的メソッドには便利なものが用意されていることが多い(sort, reverse)ので、非破壊的メソッドで代用が難しい場合はspred構文を利用しcopyを作り破壊的メソッドを利用するのが良さそう