初めに
フロントで開発をしているとAPIの返り値とかで配列をいじったりすることが多いですね。
前回の記事に加えて汎用的なメソッドをもうちょい追加してまとめてみようと思います
前回の記事↓
ベースとなる配列
前回と同じです。
適当にコピペしてください😃
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"}
反転後に配列を返しています。
参考
元の配列を変えることのできる（破壊的）メソッドと
そうでないもの（非破壊的）を切り分けて配列をいじるのが大事です😛
他にもいろいろなメソッドがありますが追加でまとめみたという記事でした！
参考記事
↧