[JavaScript]配列の特定の要素を調べる方法を一部まとめ

PHPで配列に関して教える機会があったので、そういえばJavascriptではどうだったっけ？と思い、まとめてみました。

配列の特定の要素だけ取り出す

array.filterを使います。 指定した条件に合致する要素だけフィルタリングして配列を返します。

使い方

let animal= ['pig', 'cow', 'pig', 'lion', 'cat']; 

let animalPig = animal.filter(function(n){
    return n === 'pig'
});
// Arrow関数で書くと下記(以下可能な場所はArrow関数で)
let animalPig = animal.filter(n => n === 'pig');

// ['pig', 'pig']という配列ができる

 

複数の連想配列の場合

let animal= [
    { name: 'pig', num: '2'},
    { name: 'cow', num: '4'},
    { name: 'pig', num: '3'},
    { name: 'lion', num: '2'},
    { name: 'cat', num: '1'},
]; 
let animalNumTwo =  matches.filter(n => n.num === '2');

// 下記のような配列になる
// [
//     { name: 'pig', num: '2'},
//     { name: 'lion', num: '2'},
// ];

 

応用で配列の中の特定の要素の個数を数えるのにも使えます。

// pigがいくつあるか数える
let animal= ['pig', 'cow', 'pig', 'lion', 'cat'];
let count = animal.filter(n => n === 'pig').length;

// count === 2

 

配列内の特定の要素を探す

array.find　条件を満たす配列内の最初の要素の値を返します。

使い方

let numbers = [7, 120, 40, 33, 150];
let number = numbers.find(n => n > 100);

// number === 120

 

配列内のすべての要素が条件を満たすか判定する

array.everyを使います。全ての要素が条件を満たすとtrue、満たさないとfalseを返します。
注意：everyは空の配列に対してはtrueを返します。

使い方

var isLimit = (n) => n < 10;
let numbers = [1, 8, 9, 5];

console.log(numbers.every(isLimit));
//  true

 

例えば日付が設定されているかチェック等

let isDateTime = eventList.every(value => value.datetime);

//eventListの要素datetimeに値が設定されている場合　true

 

配列に特定の要素が含まれているかどうかを調べる

array.includesを使います。特定の要素が配列に含まれている場合はtrue、含まれていない場合はfalseで返します。

使い方

let animal= ['pig', 'cow', 'pig', 'lion', 'cat']; 

console.log(animal.includes('cat'));
// true

 

配列内に条件を満たす要素があるかを調べる

array.someを使います。配列のどれか1つの要素が条件を満たすとtrueを返します。
注意: someは空の配列に対してはfalseを返します。

使い方

let numbers = [1, 8, 9, 5];
let isEven = (n) => n % 2 === 0;

// 8があるので true

 

includesとsomeの違い？

includeは特定の要素が含まれているかどうかを単純に判定してくれます。
someは特定の条件(関数が使える)を満たすかどうか判定できます。
単純な配列を検索する場合は、includesが簡素に使えます。
連想配列やオブジェクトから特定の値を探そうとする場合などは、someを使用し関数を使ったほうが良いかと思います。

JavaScriptおすすめの書籍

JavaScriptはonlineの情報も多く、Google検索が便利なので書籍を読む必要はないかもしれません。
ただ、これから学ぶ方は一冊簡単な本を読んだ方が理解が深まると思います。逆引き本とかも良書はあるのですが、Google検索した方がコピー＆ペーストできるので便利なのでいらないかな。

確かな力が身につくJavaScript「超」入門 第2版
これからはじめる方向け

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
超おすすめ！Google検索では出てこないJavaScriptが学べます。これを読み終えた時、一段自分のコーディング力が上がったと思いました。

#JavaScript #配列