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

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

個人的に要注意のところは<font color="OrangeRed">*</font>がついています。

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

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

## Array

### 非破壊

#### `Array.prototype.concat()`

```js
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()`

```js
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()`

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

#### `Array.prototype.findIndex()`

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

#### `Array.prototype.map()`

```js
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()`

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

#### `Array.prototype.reduce()`

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

#### `Array.prototype.slice()`

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

### レシーバ破壊

#### `Array.prototype.pop()`

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

#### `Array.prototype.push()`

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

#### `Array.prototype.shift()`

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

#### `Array.prototype.splice()`

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

#### `Array.prototype.unshift()`

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

#### <font color="OrangeRed">*</font> `Array.prototype.reverse()`

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

#### <font color="OrangeRed">*</font> `Array.prototype.sort()`

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

---

<font color="Gray">(戻り値があるくせにレシーバ破壊してくるとか正気かよ。)</font>

## Object

### 非破壊

#### `Object.keys()`

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

#### `Object.values()`

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

### 引数破壊

#### <font color="OrangeRed">*</font> `Object.assign()`

```js
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 }
```

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

```js
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 }
```

---

<font color="Gray">(戻り値があるくせに引数破壊してくるとかどうかしてるぜ。)</font>