1

I have this that works:

   cars={
        ford:{
            ford_car_one:'Ford Car One',
            ford_car_two:'Ford Car Two'
        },
        toyota:{
            toyota_car_one:'Toyota Car One',
            toyota_car_two:'Toyota Car Two'
        }
    };

    $('#cars_company').on('change', function(){
        $('#cars').html('');
        $.each(cars[$(this).val()], function(k, v){
            $('<option></option>').val(k).text(v)
            .appendTo($('#cars'));
        });
    });

Now how would I perform the $.each(cars[$..... block of code if my javascript object looked like:

cars = [
  { name : 'ford', types: { name : 'ford car one', name : 'ford car 2'},
  { name : 'toyota', types: { name : 'toyota car one', name : 'toyota car 2'},
];

What is the difference between the two car objects?

4

4 に答える 4

3

質問1

2つの車のオブジェクトの違いは何ですか？

2つのオブジェクトの違いは、私が誤解しない限り、最初のオブジェクトは他のオブジェクトをプロパティとして内部に持つオブジェクトであり、2番目のオブジェクト（今のところ無効な構文を無視）は2つの要素を持つ配列であり、各要素には2つのプロパティが含まれています。

オブジェクト1

cars={
    ford:{
        ford_car_one:'Ford Car One',
        ford_car_two:'Ford Car Two'
    },
    toyota:{
        toyota_car_one:'Toyota Car One',
        toyota_car_two:'Toyota Car Two'
    }
};

これは、2つのプロパティを持つcarsという名前のオブジェクトfordですtoyota。各プロパティは、それぞれ2つのプロパティを持つ別のオブジェクトです。このオブジェクトは、chromeのコンソール出力では次のようになります。

ここに画像の説明を入力してください

オブジェクト2

cars = [
  { name : 'ford', types: { name : 'ford car one', name : 'ford car 2'},
  { name : 'toyota', types: { name : 'toyota car one', name : 'toyota car 2'},
];

このインスタンスは構文を台無しにしており、そうあるべきです（現在の形式が意図されていたと仮定しますが、お勧めしません！）

var cars = [
    {
    name: 'ford',
    types: {
        name: 'ford car one',
        name: 'ford car 2'
    }},
    {
    name: 'toyota',
    types: {
        name: 'toyota car one',
        name: 'toyota car 2'
    }}];

この例carsでは、2つの要素を持つ配列です。name各要素は、およびのプロパティを持つ匿名オブジェクトtypesです。types同じ名前の2つのプロパティがあります。nameつまり、最後に指定されnameたものが最初のプロパティを上書きしていることを意味しますname。その結果：

ここに画像の説明を入力してください

上記の結果でのみ確認できるように、内部プロパティford car 2に残されています。toyota car 2name

DEMO-両方のcurrentオブジェクトの出力を表示します。

質問2

ここで、JavaScriptオブジェクトが上記のオブジェクト2のようになっている場合、コードの$ .each（cars[$.....ブロックをどのように実行しますか。

最初に構文エラーを修正する必要があります。次に、nameプロパティが次のプロパティで上書きされるのを確認して、オブジェクトにデータを設定する方法を再考する必要があります。

オブジェクトが現在有効であると仮定します。

var cars = [
    {
    name: 'ford',
    types: [
        'ford car one',
        'ford car 2'
        ]},
    {
    name: 'toyota',
    types: [
        'toyota car one',
        'toyota car 2'
    ]}];

その結果：

ここに画像の説明を入力してください

これで、次のことができます。

$(cars).each(function(){
    // only declared for clarity, not needed, using this is fine.
    var car = this;

    $result.append("- " + car.name + "<br />");

    $(this.types).each(function(){
        // only declared for clarity, not needed, using this is fine.
        var type = this;

        $result.append("-- " + type + "<br />");
    });

    $result.append("<br />");
});

デモ-オブジェクトを使用.each()して車とタイプを反復処理するsuggested

パフォーマンスに関する補足。問題はありませ.each()んが、ネストされた標準for(i=0; i < cars.length; i++)などを使用すると実行速度が速くなることがわかります。しかし.each()、完全に問題なく、十分に高速に実行されます。違いはわずかです。

于 2012-08-23T21:26:28.977 に答える
2

定義した以下の構造は無効です。

Car オブジェクト (コードから):

cars={
    ford:{
        ford_car_one:'Ford Car One',
        ford_car_two:'Ford Car Two'
    },
    toyota:{
        toyota_car_one:'Toyota Car One',
        toyota_car_two:'Toyota Car Two'
    }
};

車のオブジェクト: (無効な構文)

cars = [
  //                         v--- duplicate keys ---v       missing }--v  
  { name : 'ford', types: { name : 'ford car one', name : 'ford car 2'} ,
  { name : 'toyota', types: { name : 'toyota car one', name : 'toyota car 2'} ,
];

2 つの車のオブジェクトの違い

  1. 2 番目の構造は構文的に間違っています。

    を。でキーを複製しますtypes。(キー名は types オブジェクト内で複製されます)

    b. ない}

  2. 2 番目の構造に情報がありませんford_car_one(1 番目の構造: からford_car_one:'Ford Car One')。このキーは、スクリプトで set の値として使用されます。( $('<option></option>').val(k))

変更を計画している場合は、以下の提案されたより単純な構造を試してください。

cars = {
  'ford': ['ford car one', 'ford car 2'],
  'toyota': ['toyota car one', 'toyota car 2'],
};

上記の提案された構造を想定すると、以下のようにメソッドを変更する必要があります。

$('#cars_company').on('change', function(){
   $('#cars').html('');
   var selVal = $(this).val();

   $.each(cars[selVal ], function(idx, val){
      $('<option></option>')
        .val(idx) //Change val as you want ex: selVal + '_car_' + idx => ford_car_1
        .text(val)
        .appendTo($('#cars'));
   });
});

元のスクリプトからの変更...

元の関数のオプション値は、オブジェクト (例: ford_car_one:'Ford Car One') のキーを使用していましたが、構造体には情報がなかったため、情報を作成する必要があります。上記のコードのコメントを参照してください。

.val(idx) //Change val as you want ex: selVal + '_car_' + idx => ford_car_1
于 2012-08-23T21:15:25.817 に答える
0

まあ、プレーンな ole JavaScript の方法でそれを行いたい場合は、次のようになります。

最初のものについては、

for(var i = 0; i < cars.length(); i++)  //loops through car companies
{
    alert(cars[i] + ":");
    for(var j = 0; i < cars[i].length(); i++)  //loops through models
    {
        alert(cars[i][j]);  //alerts the each *property* of each model, which will be the name of each model
    }
}

2 つ目は、次のようにします。

for(var i = 0; i< cars.length(); i++)  //loops through car companies
{
    alert(cars[i].name);
    for(var j = 0; j < cars[i].types.length(); j++)  //loops through car models, but has to use the correct property to do so
    {
        alert(cars[i].types[j]);
    }
}

ただし、これは途方もなく迷惑な量のアラートになることに注意してください。

于 2012-08-23T21:15:54.980 に答える
0 
jQuery.each(cars,function(key,val){
        jQuery.each(val,function(ke2,va2)
           {console.log(va2);
        });
});

それは、両方をループして返す方法です。

あなたのオブジェクトは正しく形成されていません..

var cars = [
    {
        "name": "ford",
        "types": {
            "name": "fordcar2"
        }
    },
    {
        "name": "toyota",
        "types": {
            "name": "toyotacar2"
        }
    }
];

また

[
        {
            "name": "ford",
            "types": ["fordcar2","fordcar4","fordcar3"]


        },
        {
            "name": "toyota",
            "types": ["fordcar2","fordcar4","fordcar3"]
        }
    ];

私はそのようなことをしたいと思います.このコードはあなたを助けるためのサンプルであり、あなたのために仕事をするためではありません.

于 2012-08-23T21:03:07.730 に答える