jquery配列をキーと値のペアに変換します

フロントエンド開発では、配列やオブジェクトの処理が頻繁に行われます。配列をキーと値のペアに変換する必要がある場合は、jQuery の $.map() メソッドと $.each() メソッドを使用できます。以下では、これら 2 つの方法の使用方法について詳しく説明します。

1. $.map() メソッド

$.map() メソッドは、ある配列を別の配列に変換でき、この変換プロセス中に演算を実行して新しい値を返すことができます。その基本的な構文は次のとおりです。

jQuery.map( array, callback [, thisArg ] )

このうち、array は処理対象の配列を表し、callback は各要素を操作して新しい値を返すために使用されるコールバック関数を表し、thisArg はオプションのコンテキスト オブジェクトを表します。

キーと値のペアに変換するシナリオでは、$.map() メソッドを使用して元の配列を処理し、その中の各要素をキーと値のペア オブジェクトに変換できます。

たとえば、いくつかの文字列要素を含む配列 arr があります。次に、これを、すべての要素がキーであり、その値が true であるキーと値のペアに変換したいとします。次に、次のように記述できます。

var arr = ["apple", "pear", "banana", "orange"];
var kvObj = $.map(arr, function(item, index) {
    var obj = {};
    obj[item] = true;
    return obj;
});
console.log(kvObj); // [{ apple: true }, { pear: true }, { banana: true }, { orange: true }]

上記のコードでは、item と Index の 2 つのパラメーターを受け取るコールバック関数を定義します。この関数は、各要素を、要素がキーで値が true であるオブジェクトに変換し、そのオブジェクトを返します。返される最終結果はオブジェクトの配列であり、各オブジェクトはキーと値のペアです。

2. $.each() メソッド

$.map() メソッドとは異なり、$.each() メソッドは配列またはオブジェクトを走査し、各要素関数でコールバックを実行できます。 。コールバック関数のパラメータには、要素のキーと値が含まれます。

基本的な構文は次のとおりです。

jQuery.each( collection, callback(indexInArray, valueOfElement) )

このうち、collection は走査対象のオブジェクトまたは配列を表し、callback は各要素を処理するコールバック関数を表します。

配列をキーと値のペアに変換することも、$.each() メソッドを通じて変換することもできます。

たとえば、いくつかの文字列要素を含む配列 arr があります。次に、これをキーと値のペアに変換します。このペアでは、すべての要素がキーであり、その値が対応する要素です。

var arr = ["apple", "pear", "banana", "orange"];
var kvObj = {};
$.each(arr, function(index, item) {
    kvObj[item] = index;
});
console.log(kvObj); // { apple: 0, pear: 1, banana: 2, orange: 3 }

上のコードでは、index と item の 2 つのパラメータを受け取るコールバック関数を定義します。要素が走査されるたびに、その要素はキーとして使用され、そのインデックス位置が値として使用され、オブジェクトに格納されます。返される最終結果は、キーと値のペアのオブジェクトです。

概要:

上記は、jQuery 配列をキーと値のペアに変換する 2 つの方法です。さまざまなシナリオに適しており、使用する方法を自由に選択できます。配列とオブジェクトを扱うときは、実際のニーズに応じて $.map() メソッドと $.each() メソッドを合理的に使用して、コードの効率と読みやすさを向上させることができます。

以上がjquery配列をキーと値のペアに変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。