配列のJavaScript検索を作成する

Question

私はこれらのフォーラムで新しく、JavaScriptを初めて使っています。私の学校は深いJavaScriptコースを提供していないので、私は多くのことを自分で理解しようとしました。

これは基本的な質問かもしれませんが、基本的には2つの配列を作成したいと考えています。最初の配列には多数の 'id'番号があります。 2番目の配列には価格が入ります。私はそれが欲しいので、ユーザがテキストボックスにID番号を入力すると、別のテキストボックスに価格配列番号の値が出力されます。

は、ここでのプロンプトを使用した例のようなものです：

noArray = new Array(3); 
noArray[1]="03"; 
noArray[2]="12"; 
noArray[3]="15"; 
nameArray = new Array(3); 
nameArray[1] = "$45"; 
nameArray[2] = "$300"; 
nameArray[3] = "$900"; 

var userNumIn=prompt("Enter the item number you want to retrieve",""); 
var itemSub=1; 
var matchInd= false; 

while (itemSub <= 3 && matchInd == false){ 
    if (noArray[itemSub] == userNumIn){ 
     matchInd = true; 
    } else { 
     itemSub++ ; 
    } 
} 

if (matchInd == true){ 
    document.write("The item costs " + nameArray[itemSub]); 
} else { 
    document.write("Invalid item number"); 
} 

質問は、その値が一致した場合、私はその後、誰かがID列で「ID」テキストボックスに入力した内容の値を比較して行う方法です、そのIDの価格の価格配列をチェックしてから、「価格」テキストボックスに出力しますか？私が何を意味しているかを理解していただければ幸いですコードをクリーンアップ

Answer 1

、しかしユーザーは、将来的にこれを行うには期待しないでください...

2dArray = new Array(3)(2) 
2dArray[0][0] = "03"; 
2dArray[0][1] = "$45"; 
2dArray[1][0] = "12"; 
2dArray[1][1] = "$300"; 
2dArray[2][0] = "15"; 
2dArray[2][1] = "$900"; 

var userNumIn=prompt("Enter the item number you want to retrieve",""); 
var matchInd = false; 

for(var i = 0; i < 3 && !matchInd; i++){ 
    if (2dArray[i][0] == userNumIn){ 
     matchInd = true; 
     document.getElementById('yourTextBoxId').value = 2dArray[i][1]; 
    } 
} 

if(!matchInd) { 
    document.getElementById('yourTextBoxId').value = "Invalid item number"; 
} 

私はちょうどそれが作品を願って、JavaScriptのリフレッシュ^^テストしていないが必要でした。何か不明な点がある場合は、ただ聞いてください。

Answer 2

オブジェクトについて学ぶ必要があります。

基本的に、オブジェクトは文字列と値のマッピングです。これは必要なものです。オブジェクトを使用すると、コードがはるかに簡単になります。どのようなループや補助変数を使用する必要がないかを見てください。

var prices = { 
    "03": "$45", 
    "12": "$300", 
    "15": "$900" 
}; 
var id = prompt("Enter the item number you want to retrieve",""); 

if(id in prices) { 
    alert("The item costs " + prices[id]); 
} 
else { 
    alert("Invalid item number"); 
} 

You can see this in action on jsFiddle。

あなたは具体的にはテキストボックスとボタンの使用について尋ねたので、私はあなたがそれを行う方法の例のページを作成しました。まず、あなたは、HTMLフォーム

ID: <input id="input" type="text"/><br> 
<button id="submit">Get Price</button><br> 
Price: <output id="output"/> 

を必要とし、その後、あなたは少しだけあなたのアプローチは健全であり、あなた一度動作するフォーム作業

var prices = { 
    "03": "$45", 
    "12": "$300", 
    "15": "$900" 
}; 

document.getElementById("submit").onclick = function() { 
    var id = document.getElementById("input").value; 
    var price = id in prices ? prices[id] : "Invalid ID"; 
    document.getElementById("output").innerHTML = price; 
}; 

そしてyou can see this in action.

Answer 3

を作るために上記のJavascriptを変更しますdbauppが言及していることを取り入れてください。より高度で洗練された方法です：

JavaScriptでは、任意の形を取るオブジェクトを自由に作成できます。したがって、アイテムの番号と価格の両方を含むオブジェクトを定義することができます。たとえば、次のように

var item = { 
    number: '03', 
    price: '$45' 
}; 

今項目がある項目番号03について、両方のものを含むオブジェクト：あなたは配列内のオブジェクトを固執することができ、その代わりに、2つの配列の、それは1つの配列を持っている方が良いでしょう

alert(item.number); // alerts 03 
alert(item.price); // alerts $45 

こと

：あなたは

var itemArray = new Array(3); 
// note the first index in array is 0, not 1 
itemArray[0] = { 
    number: '03', 
    price: '$45' 
}; 
itemArray[1] = { 
    number: '12', 
    price: '$300' 
}; 
itemArray[2] = { 
    number: '15', 
    price: '$900' 
}; 

が今では、ユーザーが望んでいるアイテムを見つけることが容易である必要なものがすべて含まれてい

改善がまだまだたくさんあります。私は意図的にオブジェクトを導入して変更を簡単に保ちました。

Answer 4

ハッシュテーブルとしてJavascriptオブジェクトを使用して、ロジックを簡略化することができます。

Javascriptのオブジェクトはハッシュテーブルとして使用できます。したがって、ルックアップを実行すると、O（n）の配列をループする代わりにランタイムがO（1）になります。

// Restructure the array so it's in a very simple 
// 'hashtable' - Key: id, value: price. 
// Lookup time on this is O(1) 
var priceLookup = { 
    "03" : "$45", // I assume the 0 is important 
    "12" : "$300", 
    "15" : "$900" 
}; 

// Get data from user 
var id = prompt('Enter item ID'); 

// Check if item exists in the price lookup 
if (priceLookup[id]) { 
    // Alert user with price 
    document.write("The item costs " + priceLookup[id]); 
} 
else { 
    // ID is invalid in this case. 
    document.write("Invalid item number"); 
} 
​ 
​ 

JSFiddle：http://jsfiddle.net/C4RLV/