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

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

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

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

使い方

javascript

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']という配列ができる

javascript

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'},
// ];

javascript

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

// count === 2

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

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

使い方

javascript

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

// number === 120

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

array.everyを使います。全ての要素が条件を満たすとtrue、満たさないとfalseを返します。

使い方

javascript

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

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

javascript

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

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

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

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

使い方

javascript

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

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

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

array.someを使います。配列のどれか1つの要素が条件を満たすとtrueを返します。

使い方

javascript

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 ―言語仕様から学ぶJavaScriptの本質

超おすすめ！Google検索では出てこないJavaScriptが学べます。これを読み終えた時、一段自分のコーディング力が上がったと思いました。

📦

Amazon で関連書籍・ツールを検索

JavaScript 入門プログラミング

Amazonで探す →（アソシエイトリンク）