Javascript數組 - 使用變量作為鍵

Question

我正在嘗試檢索一個數組值，其中鍵是一個變量。 JSFiddle 在這里 - 將“服裝”或“書籍”輸入行業輸入。 JSFiddle的輸出聲明返回的值是未定義的。

問題在於var filename = constants.factsheet - 如何正確傳遞factheet的值以檢索相關的文件名？

JS：

  $(function () {

      var availableIndustries = ["apparel", "books"];

      $("#industry").autocomplete({
          source: availableIndustries
      });

      $("input[type=image]")
          .button()
          .click(function (event) {

          var constants = {
              'apparel': 'apparel.pdf',
                  'books': 'publishing.pdf',
          };

          var factsheet = document.getElementById('industry').value;
          var filename = constants.factsheet;
          $('#factsheet').text('Your factsheet is ' + factsheet);
          $('#file').text('Your filename is ' + filename);

      });
  });

Answer 1

更改：

var filename = constants.factsheet;

至：

var filename = constants[factsheet];

（注意你的constants不是數組。它是一個對象。）

在JavaScript中，您可以通過兩種方式訪問​​對象屬性：使用點表示法和文字屬性名稱（ constants.apparel ），或使用括號表示法和字符串屬性名稱（ constants["apparel"] ）。 在第二種情況下，字符串可以是任何表達式的結果，包括變量查找。 所以這些都表明了同樣的事情：

// Dot notation
console.log(constants.apparel);

// Brackets with string literal
console.log(constants["apparel"]);

// Brackets with concatentation expression
console.log(constants["app" + "arel"]);

// Brackets using a variable
var name = "apparel";
console.log(constants[name]);

// Brackets using the return value of a function
function foo() { return "apparel"; }
console.log(constants[foo()]);

你明白了。

Answer 2

TJ Crowder使用括號語法通過變量鍵名查找對象是正確的，我只是通過將靜態文件對象常量移出事件函數（不需要每次都生成）來優化一些事情，並緩存了#industry元素引用。

$(function () {

  var industryInput = $('#industry'),
      availableIndustries = ['apparel', 'books'],
      files = {
          'apparel': 'apparel.pdf',
          'books': 'publishing.pdf'
      };

  industryInput.autocomplete({
      source: availableIndustries
  });

  $('input[type=image]').button().click(function (event) {
      var factsheet = industryInput.value;
      $('#factsheet').text('Your factsheet is ' + factsheet);
      $('#file').text('Your filename is ' + files[factsheet]);
  });
});

Answer 3

我在您的代碼中以適用於您的方式發布上述答案。

  $(function () {

      var availableIndustries = ["apparel", "books"];

      $("#industry").autocomplete({
          source: availableIndustries
      });

      $("input[type=image]")
          .button()
          .click(function (event) {

          var constants = {
              'apparel': 'apparel.pdf',
                  'books': 'publishing.pdf',
          };

          var factsheet = document.getElementById('industry').value;
          var filename = constants[factsheet];
          $('#factsheet').text('Your factsheet is ' + factsheet);
          $('#file').text('Your filename is ' + filename);

      });
  });