JavaScript findヘルパー

Question

私はこの解決策を見つけたUdemyの練習があります。

var ladders = [ 
 
    { id: 1, height: 8 }, 
 
    { id: 2, height: 10 }, 
 
    { id: 3, height: 20 }, 
 
    { id: 4, height: 25 }, 
 
    { id: 5, height: 30 }, 
 
    { id: 6, height: 40 }, 
 
]; 
 

 
function findWhere(array, criteria) { 
 

 
    return array.find(function(el) { 
 

 
    return el[Object.keys(criteria)] === criteria[Object.keys(criteria)]; 
 
    }); 
 
}

あなたは最後の行がどのように機能するかを説明してもらえますか？私はObject.keysが何をしているのか知っていますが、なぜ大括弧で囲まれているのかわかりません。

あなたは

Answer 1

Object.keysため、戻り配列し、インデックスとして配列を使用する場合、それは文字列に変換されます。配列内に単一の要素がある場合、文字列出力はその要素のtoString値と等しくなります。

しかし、これは良い解決策ではありません。あなたの基準が単一のキーを持っている場合にのみ機能します。

は、以下の理由を参照してください：だから

function findWhere(array, criteria) { 
 
    return array.find(function(el) { 
 
    return el[Object.keys(criteria)] === criteria[Object.keys(criteria)]; 
 
    }); 
 
} 
 

 
var ladders = [{ id: 1, height: 8 }, { id: 2, height: 10 }, { id: 3, height: 20 }, { id: 4, height: 25 }, { id: 5, height: 30 }, { id: 6, height: 40 }]; 
 

 
console.log(findWhere(ladders, { id: 2})); // this line works right 
 
console.log(findWhere(ladders, { id: 2, height:10 })); // this line will result invalid

を、期待findメソッドは、1以下のようにする必要があります：

function findWhere(array, criteria) { 
 
    return array.find(el => 
 
        Object.keys(criteria) 
 
        .every(key => criteria[key] === el[key]) 
 
        ); 
 
} 
 

 
var ladders = [{ id: 1, height: 8 }, { id: 2, height: 10 }, { id: 3, height: 20 }, { id: 4, height: 25 }, { id: 5, height: 30 }, { id: 6, height: 40 }]; 
 

 
console.log(findWhere(ladders, { id: 2})); // this line works right 
 
console.log(findWhere(ladders, { id: 2, height:3 })); // this line works right too (undefined expected) 
 
console.log(findWhere(ladders, { id: 2, height:10 })); // this line works right too (id:2 expected) 
 
console.log(findWhere(ladders, { height:25 })); // this line works right too (id:4 expected)

.as-console-wrapper{ 
 
    min-height:100%; 
 
    max-height:100%; 
 
    top:0; 
 
}

Answer 2

find()アレイ法が動作するために、引数として関数を受け取りありがとうございます。この関数には、反復処理されている配列要素（ここではパラメータelで表されます）への参照が自動的に提供されますが、この場合、要素は元の配列のオブジェクトの1つになります。プロパティ値を取得するために

、プロパティ名が文字列の形態である場合、そのように、ブラケット表記法（[propertyNameAsString]）を使用しなければならないが：

• elオブジェクト参照
• [Object.keys(criteria)]がプロパティであります 結果は、次にcriteria[Object.keys(criteria)]と比較されているプロパティの値であり、括弧表記を

を使用して渡された文字列として名前

Answer 3

線

return el[Object.keys(criteria)] === criteria[Object.keys(criteria)]; 
//  'id'        'id' 
//  el['id']     === criteria['id'] 
//  2       === 2 

両側に、基本的に第1のオブジェクトの鍵を受け取り、アレイの要素とし、物体criteria右側に左側にそれを包みます。

function findWhere(array, criteria) { 
 
    return array.find(function(el) { 
 
    return el[Object.keys(criteria)] === criteria[Object.keys(criteria)]; 
 
    }); 
 
} 
 

 
var ladders = [{ id: 1, height: 8 }, { id: 2, height: 10 }, { id: 3, height: 20 }, { id: 4, height: 25 }, { id: 5, height: 30 }, { id: 6, height: 40 }]; 
 

 
console.log(findWhere(ladders, { id: 2 }));