Contents
まだまだ続く・配列操作に強くなりたい
こんにちは！今週末はずっと雨みたいですね。
最近ややブログ更新の頻度が落ちていたのですが(汗、引き続きボチボチやっていきますよ〜！
ということで、今回はおなじみの(?)配列シリーズ続編です。前の２回はどちらかというと構文理解的な内容だったのですが今回は、
と題してちょっと実践的な内容で配列の操作方法をまとめてみたいと思います。
前回ブログはこちらから↓
配列かどうかの判定 – Array.isArray()
Array.isArray() メソッドを使うと、引数に渡された値が配列であるかどうかの判定ができます。
値が配列であれば true を、配列でなければ flse を返します。
const rice = ['あきたこまち', 'コシヒカリ', 'ひとめぼれ']; // Array
const riceBall = '鮭のおにぎり'; // string
console.log(Array.isArray(rice)); // true
console.log(Array.isArray(riceBall)); // false
// 配列であるかどうかで処理を分けたい時
if(Array.isArray(rice)){
// 配列である場合
console.log('こっちが出力されるよ');
}else{
// 配列ではない場合
console.log('こっちは出力されないよ');
}
配列の要素数の確認 – Array.length
length プロパティを使うと、配列の要素の長さを確認することができます。
配列の要素が空かどうかで処理を分けたい時などに使えます。書き方がいろいろあるので、思いつく限りで例を3つ書いてみました。
const dinosaur = ['Tyrannosaurus', 'Brachiosaurus', 'Stegosaurus'];
console.log(dinosaur.length); // 3
const emptyArray = [];
console.log(emptyArray.length); // 0
// 配列の要素が空かどうかで処理を分けたい場合
// 例1
if(dinosaur.length){
// 配列の要素が空ではない場合
console.log('こっちが出力されるよ');
}else{
// 配列の要素が空の場合
console.log('こっちは出力されないよ');
}
// 例2
if(dinosaur.length !== 0){
// 配列の要素が空ではない場合
console.log('こっちが出力されるよ');
}else{
// 配列の要素が空の場合
console.log('こっちは出力されないよ');
}
// 例3
if(!dinosaur.length){
// 配列の要素が空の場合
console.log('こっちは出力されないよ');
}else{
// 配列の要素が空ではない場合
console.log('こっちが出力されるよ');
}
if文は括弧内に指定した条件が truthy であった時に後続の処理が実行されるので、例3では「 if(!dinosaur.length) 」と否定形にすることで、配列の要素が空ではない場合に else 節の分岐の処理が実行されることになるんですね。
配列の要素を抽出する- filter()
filter() メソッドを使うと、配列の要素を抽出することができます。
配列に予めいろいろな要素(ユーザー情報や画像データなど)を格納しておき、指定した条件によってフロントに描画するデータを変えたい、などという時に役立ちました。
基本的な使い方
一番単純な使い方はこんな感じでしょうか。
const numbers = [5, 42, 156, 33, 57, 240]; // 例1 偶数の要素を抽出する console.log(numbers.filter(elm => elm % 2 === 0)); // [42, 156, 240]
numbers 配列から、偶数の要素のみ抽出できました。
キーにアクセスして要素を抽出する
配列にオブジェクトが複数格納されている以下のような場合も、filter() メソッドを使うことができます。
const dinosaursNameList = ['Tyrannosaurus', 'Iguanodon'];
const dinosaurs = [
{ name: 'Tyrannosaurus', weight: 5000, color: 'red', age: 3 },
{ name: 'Brachiosaurus', weight: 20000, color: 'blue', age: 5 },
{ name: 'Iguanodon', weight: 10000, color: 'red', age: 10 },
{ name: 'Stegosaurus', weight: 35000, color: 'red', age: 1 },
];
// 例2 weight キーにアクセスして weight が 30000 より大きい要素を抽出する
console.log(dinosaurs.filter(elm => elm.weight > 30000));
// [ { name: 'Stegosaurus', weight: 35000, color: 'red', age: 1 } ]
// 例3 name キーにアクセスして dinosaursNameList の要素と同じ要素を含む配列を返す
console.log(dinosaurs.filter(elm => dinosaursNameList.includes(elm.name)));
// [ { name: 'Tyrannosaurus', weight: 5000, color: 'red', age: 3 },
// { name: 'Iguanodon', weight: 10000, color: 'red', age: 10 } ]
filter() メソッドは、引数を3つ取ることができて、第一引数は「現在の要素」です。「現在の」って言われると、ん？ってなるんですけど、
デバッグしてみると挙動がよく分かります。
filter() メソッドは、中身の要素を順に走査していくんですね。なので走査中の「現在の要素」というと分かりやすいかなー、と思いました。
また、上記のコードではその要素を「 elm 」と記載していますが、これはなんでもいいんですね。「 value 」とか「 v 」とか書くことが多い気がしますが、MDNの説明が「 element 」だったので、「 elm 」としているだけで、どれがいいのか微妙に悩んでます。(ほんとどうでもいいことだけど)
詳細は下記↓
指定したインデックスの要素を抽出する
filter() メソッドは、第2引数に現在の要素の位置(インデックス)を取ることができます。
それを利用して、指定したインデックスで要素を抽出してみます。
const riceBurger = [
{ name: 'てりやき', colorie: 500, weight: 150 },
{ name: 'エビカツ', colorie: 600, weight: 200 },
{ name: 'フィッシュフライ', colorie: 400, weight: 100 },
{ name: '野菜天', colorie: 300, weight: 150 },
{ name: 'チキン', colorie: 450, weight: 150 },
];
// 例4 インデックスが奇数の要素を抽出する
console.log(riceBurger.filter((elm, index) => index % 2 !== 0));
// [ { name: 'エビカツ', colorie: 600, weight: 200 },
// { name: '野菜天', colorie: 300, weight: 150 } ]
インデックス 1 の「エビカツ」と、インデックス 3 の「野菜天」の要素が抽出できました。
まとめ
いかがだったでしょうか。
いやー、配列、難しいな。。
このシリーズ３回目だけど、まだまだですね。今回書けなかったメソッドもあるので、まだ続編もあるかも?しれないです。
ここまでお読みいただき、ありがとうございました！
