JavaScript(ECMAScript)の破壊/非破壊関数まとめ

毎回調べているので、自分用にまとめ。

個人的に要注意のところは*がついています。

先に結論を言ってしまうと、ファイルサイズを気にしなくていいときは素直にlodashを使おう。
Elmの使用も検討しよう。

動作確認: node v10.16.0(LTS)

Array

非破壊

Array.prototype.concat()

let array1 = ['a', 'b', 'c']
let array2 = ['d', 'e', 'f']
array1.concat(array2) // => [ 'a', 'b', 'c', 'd', 'e', 'f' ]
array1 // => [ 'a', 'b', 'c' ]
array2 // => [ 'd', 'e', 'f' ]

Array.prototype.filter()

let array1 = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']
array1.filter(word => word.length > 6) // => [ 'exuberant', 'destruction', 'present' ]
array1 // => [ 'spray', 'limit', 'elite', 'exuberant', 'destruction', 'present' ]

Array.prototype.find()

let array1 = [5, 12, 8, 130, 44]
array1.find(function(element) { return element > 10; }) // => 12
array1 // => [ 5, 12, 8, 130, 44 ]

Array.prototype.findIndex()

let array1 = [5, 12, 8, 130, 44]
array1.findIndex(function(element) { return element > 10; }) // => 1
array1 // => [ 5, 12, 8, 130, 44 ]

Array.prototype.map()

let array1 = [5, 12, 8, 130, 44]
array1.map(x => x * 2) // => [ 10, 24, 16, 260, 88 ]
array1 // => [ 5, 12, 8, 130, 44 ]

Array.prototype.join()

let array = ['Fire', 'Air', 'Water']
array.join() // => 'Fire,Air,Water'
array // => [ 'Fire', 'Air', 'Water' ]

Array.prototype.reduce()

let array1 = [1, 2, 3, 4]
array1.reduce((acc, current) => acc + current) // => 10
array1 // => [ 1, 2, 3, 4 ]

Array.prototype.slice()

let array1 = ['ant', 'bison', 'camel', 'duck', 'elephant']
array1.slice(2, 4) // => [ 'camel', 'duck' ]
array1 // => [ 'ant', 'bison', 'camel', 'duck', 'elephant' ]

レシーバ破壊

Array.prototype.pop()

let array1 = ['a', 'b', 'c']
array1.pop() // => 'c'
array1 // => [ 'a', 'b' ]

Array.prototype.push()

let array1 = ['a', 'b', 'c']
array1.push('d') // => 4
array1 // => [ 'a', 'b', 'c', 'd' ]

Array.prototype.shift()

let array1 = ['a', 'b', 'c']
array1.shift() // => 'a'
array1 // => [ 'b', 'c' ]

Array.prototype.splice()

let array1 = ['a', 'b', 'c']
array1.splice(2, 1, 'x') // => [ 'c' ]
array1 // => [ 'a', 'b', 'x' ]

Array.prototype.unshift()

let array1 = ['a', 'b', 'c']
array1.unshift('x', 'y', 'z') // => 6
array1 // => [ 'x', 'y', 'z', 'a', 'b', 'c' ]

* Array.prototype.reverse()

let array1 = ['a', 'b', 'c']
array1.reverse() // => [ 'c', 'b', 'a' ]
array1 // => [ 'c', 'b', 'a' ]

* Array.prototype.sort()

let array1 = [1, 30, 4, 21, 100000]
array1.sort() // => [ 1, 100000, 21, 30, 4 ]
array1 // => [ 1, 100000, 21, 30, 4 ]

---

(戻り値があるくせにレシーバ破壊してくるとか正気かよ。)

Object

非破壊

Object.keys()

let object1 = { a: 1, b: 2, c: 3 }
Object.keys(object1) // => [ 'a', 'b', 'c' ]
object1 // => { a: 1, b: 2, c: 3 }

Object.values()

let object1 = { a: 1, b: 2, c: 3 }
Object.values(object1) // => [ 1, 2, 3 ]
object1 // => { a: 1, b: 2, c: 3 }

引数破壊

* Object.assign()

let object1 = { a: 1, b: 2 }
let object2 = { b: 4, c: 5 }
Object.assign(object1, object2) // => { a: 1, b: 4, c: 5 }
object1 // => { a: 1, b: 4, c: 5 }
object2 // => { b: 4, c: 5 }

補足: 破壊したくない場合

let object1 = { a: 1, b: 2 }
let object2 = { b: 4, c: 5 }
Object.assign({}, object1, object2) // => { a: 1, b: 4, c: 5 }
object1 // => { a: 1, b: 2 }
object2 // => { b: 4, c: 5 }

---

(戻り値があるくせに引数破壊してくるとかどうかしてるぜ。)