サイト管理者
WEB
JavaScriptメソッド初心者

JavaScriptの配列を操る汎用メソッド その2

WEB
2021.10.15
この記事は約6分で読めます。

初めに

フロントで開発をしているとAPIの返り値とかで配列をいじったりすることが多いですね。
前回の記事に加えて汎用的なメソッドをもうちょい追加してまとめてみようと思います

前回の記事↓

JavaScriptの配列を操る汎用メソッド

ベースとなる配列

前回と同じです。
適当にコピペしてください😃

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" },
      { id:6, name: 'Nicolaus', age: 54, hobby: "music" },
      { id:7, name: 'Max', age: 43, hobby: "jogging" },
      { id:8, name: 'Katherine', age: 20, hobby: "music" },
      { id:9, name: 'Ada', age: 18, hobby: "shopping" },
      { id:10, name: 'Sarah E.', age: 63, hobby: "flower" },
      { id:11, name: 'Lise', age: 42, hobby: "cooking" },
      { id:12, name: 'Hanna', age: 51, hobby: "movie" }
    ];

push

配列の末尾に新たな要素を追加するメソッドです
元の配列が変わってしまうので扱いにはご注意！（破壊的とか言われたりします）

const newUser = users.push({ id:13, name: 'Alice', age: 24, hobby: "dancing" });
console.log(users);

.
.
.
// 11: { id: 12, name: "Hanna", age: 51, hobby: "movie" },
// 12: { id: 13, name: "Alice", age: 24, hobby: "dancing" }

pop

配列の末尾の要素を削除するメソッドです
こちらも破壊的なメソッドなのでご注意

const deleteUser = users.pop();
console.log(users);

.
.
.
// 9: { id: 10, name: "Sarah E.", age: 63, hobby: "flower" },
// 10: { id: 11, name: "Lise", age: 42, hobby: "cooking" }

unshift

配列の先頭に新たな要素を追加するメソッドです
こやつも破壊的です

const newUser = users.unshift({ id:0, name: 'Jane', age: 20, hobby: "baseball" });
console.log(users);

.
.
.
// 0: { id: 0, name: "Jane", age: 20, hobby: "baseball" },
// 1: { id: 1, name: "Mick", age: 34, hobby: "cycling" }

shift

配列の先頭の要素を削除するメソッドです
同じく破壊的です

const deleteUser = users.shift();
console.log(users);

.
.
.
// 0: { id: 2, name: "Isaac", age: 40, hobby: "music" },
// 1: { id: 3, name: "Galileo", age: 21, hobby: "guiter" }

上記４つのメソッドは元の配列を変えてしまうのでいずれも破壊的なメソッドとか言われたりします
扱い方によってはバグの温床になりうるのでご注意を😃

concat

配列と配列をくっつけて新たな配列を作るメソッドです
元の配列には影響しないので非破壊的なメソッドです

const newUsers = [
      { id:13, name: 'John', age: 33, hobby: "anime" },
      { id:14, name: 'Andy', age: 18, hobby: "FPS" },
      { id:15, name: 'David', age: 20, hobby: "jogging" },
    ]
const usersArray = users.concat(newUsers);
console.log(usersArray);

.
.
.
// 11: {id: 12, name: "Hanna", age: 51, hobby: "movie"},
// 12: {id: 13, name: "John", age: 33, hobby: "anime"},
// 13: {id: 14, name: "Andy", age: 18, hobby: "FPS"}
// 14: {id: 15, name: "David", age: 20, hobby: "jogging"}

usersとnewUsersがくっついて新しい配列になってますね
元の配列には影響がないタイプのメソッドです

reverse

配列の順序を逆転するメソッドです
それだけではありますが、一応これも破壊的なメソッドです

const reverseUsers = users.reverse()
console.log(reverseUsers)

.
.
.
// 0: {id: 12, name: "Hanna", age: 51, hobby: "movie"},
// 1: {id: 11, name: "Lise", age: 42, hobby: "cooking"},
// 2: {id: 10, name: "Sarah E.", age: 63, hobby: "flower"}

反転後に配列を返しています。

参考

元の配列を変えることのできる（破壊的）メソッドと
そうでないもの（非破壊的）を切り分けて配列をいじるのが大事です😛

他にもいろいろなメソッドがありますが追加でまとめみたという記事でした！

参考記事

現代の JavaScript チュートリアル
現代の JavaScript チュートリアル: クロージャ、ドキュメント、イベント、オブジェクト指向プログラミングなどを含む、サンプルとタスクを使ったシンプルで詳細な説明です。
ja.javascript.info