JavaScriptのオブジェクトのアレイで値を検索する
この投稿では、JavaScriptでオブジェクトのアレイから値を見つける方法について説明します。
1.使用する Array.prototype.find() 関数
推奨される解決策は、 find() 指定された述語を満たすアレイ内の要素の最初の出現を返すメソッド。次のコード例は、名前を持つ人を見つけることによってこれを示しています John.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var obj = [ { name: 'Max', age: 23 }, { name: 'John', age: 20 }, { name: 'Caley', age: 18 } ]; var found = obj.find(e => e.name === 'John'); console.log(found); /* 出力: { name: 'John', age: 20 } */ |
2.使用する Array.prototype.findIndex() 関数
または、 findIndex() 方法に似ています find() メソッドですが、要素の最初の出現のインデックスを返しますまたは -1 要素が見つからない場合。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var obj = [ { name: 'Max', age: 23 }, { name: 'John', age: 20 }, { name: 'Caley', age: 18 } ]; var index = obj.findIndex(e => e.name === 'John'); if (index !== -1) { console.log(obj[index]); } /* 出力: { name: 'John', age: 20 } */ |
3.使用する Array.prototype.forEach() 関数
ここでのアイデアは、を使用して指定されたアレイを反復処理することです forEach() メソッドを実行し、オブジェクトがアレイに存在するかどうかを判別します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var obj = [ { name: 'Max', age: 23 }, { name: 'John', age: 20 }, { name: 'Caley', age: 18 } ]; obj.forEach(o => { if (o.name === 'John') { console.log(o); } }); /* 出力: { name: 'John', age: 20 } */ |
4.使用する Array.prototype.filter() 関数
もう1つのもっともらしい方法は、アレイをフィルター処理して、指定された述語を渡すすべてのオブジェクトを返すことです。これは、を使用して簡単に行うことができます filter() 方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var obj = [ { name: 'Max', age: 23 }, { name: 'John', age: 20 }, { name: 'Caley', age: 18 } ]; var found = obj.filter(e => e.name === 'John'); if (found.length > 0) { console.log(found[0]); } /* 出力: { name: 'John', age: 20 } */ |
5.jQueryの使用
jQueryの $.grep メソッドはJavaScriptのネイティブと同様に機能します filter() 方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const { JSDOM } = require("jsdom"); const { window } = new JSDOM(); var $ = require("jquery")(window); var obj = [ { name: 'Max', age: 23 }, { name: 'John', age: 20 }, { name: 'Caley', age: 18 } ]; var found = $.grep(obj, e => e.name === 'John'); if (found.length > 0) { console.log(found[0]); } /* 出力: { name: 'John', age: 20 } */ |
6. Lodash/Underscoreライブラリの使用
アンダースコアとLodashライブラリには _.filter JavaScriptのネイティブに似たメソッド filter() 方法。 次のコード例は、使用法を示しています _.filter 方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var _ = require('lodash'); var obj = [ { name: 'Max', age: 23 }, { name: 'John', age: 20 }, { name: 'Caley', age: 18 } ]; var found = _.filter(obj, e => e.name === 'John'); if (found.length > 0) { console.log(found[0]); } /* 出力: { name: 'John', age: 20 } */ |
これで、JavaScriptのオブジェクトのアレイから値を見つけることができます。
こちらも参照: