JavaScriptオブジェクトをトラバースする - 何が欠けていますか？

Question

これはかなり簡単な質問ですが、私が間違っていることを理解できません。

features: { 
    savings: { 
     link: "test.html", 
     img: "/_assets/img/related-content/sample.png" 
    }, 
    security: { 
     link: "test2.html", 
     img: "/_assets/img/related-content/sample2.png" 
    }, 
    speed: { 
     link: "test3.html", 
     img: "/_assets/img/related-content/sample3.png" 
    } 
} 

この形式は設定されていて、変更できないものとします。私はfeatures["savings"].linkのようなことをして簡単に選択することができます。しかし、私はこのオブジェクトからランダムなアイテムを取得したいとしましょう。私は乱数を生成し、それを使ってインデックスを選択します。しかし、features[randnum].linkは機能しません。どうしてこれなの？オブジェクト形式を変更せずにこれを行うにはどうすればよいですか？

ありがとうございます！

Answer 1

これは、配列ではなくオブジェクトを扱っているためです。そのため、数字だけでオブジェクトにインデックスを付けることはできません。ただ、明確化のために、この表記

var randnum = getRandomNumber(1, 3); // get random num between 1 and 3 
var randomLink = features["feature" + randnum].link; 

：あなたはプロパティ名をお持ちでない場合は

features["feature1"].link; 

が

features.feature1.link; 

と同じであるあなたのような何かをしなければならないでしょう「セキュリティ」や「節約」のように、プロパティが静的であると仮定して、配列を使用して手助けすることができます。あなたは性質があることを行っているだかわからない場合は

var properties = [ "security", "savings" ]; 
var randomProperty = properties[Math.floor(Math.random() * properties.length)]; 
var randomLink = features[randomProperty].link; 

、あなたはそれらを収集することができます

var properties = []; 
for (var prop in features) { 
    if (features.hasOwnProperty(prop)) { 
     properties.push(prop); 
    } 
} 
var randomProperty = properties[Math.floor(Math.random() * properties.length)]; 
var randomLink = features[randomProperty].link; 

Answer 2

のjsオブジェクトはnumericaly索引付けされていない、あなたはそれにアクセスすることはできません整数を使用する配列として。

Answer 3

フィーチャー[あなたのオリジナルのJSON構造に対して]は、フィーチャーを探すようにします。しかし、実際にはjsonオブジェクトの配列を作成することができます。これは、あなたのランダムアクセスをあなたに与えます。しかし、配列を作成することを考えない限り、feature3を見つけるための '検索'機能があります。

var features = [{ 
     name:"feature1", 
     link: "test.html", 
     img: "/_assets/img/related-content/sample.png" 
    }, 
    { 
     name:"feature2", 
     link: "test2.html", 
     img: "/_assets/img/related-content/sample2.png" 
    }, 
    { 
     name:"feature3", 
     link: "test3.html", 
     img: "/_assets/img/related-content/sample3.png" 
    }]