Javascript中如何根据用户选中的数组元素返回另一数组的对应值

报错原因 #

• 你代码里var valueFromSelect = Apple;没有给Apple加引号，JavaScript会把Apple识别为变量而非字符串值，你没有定义过名为Apple的变量，所以会抛出Apple is not defined的引用错误。
• 你给出的循环代码缺少闭合的}，语法不完整也会导致运行报错。

如果你是从页面下拉选择框获取选中值，直接取对应DOM的value属性即可，不需要额外加引号，拿到的本身就是字符串类型。

基础修复方案（沿用你原有的循环逻辑） #

// 定义两个基础数组
var fruits = ["Apple", "Orange", "Banana", "Pear", "Pineapple", "Strawberry", "Blueberry"];
var prices = [1.50, 1.20, 1.05, 1.10, 3.00, 0.40, 0.10];

// 选中的水果加引号定义为字符串
var valueFromSelect = "Apple";
var targetPrice = null;

for (var i = 0; i < fruits.length; i++){
  if(valueFromSelect == fruits[i]){
    targetPrice = prices[i];
    break;
  }
}

// 输出结果
if(targetPrice !== null) {
  console.log(`${valueFromSelect}的价格是：${targetPrice}元`);
} else {
  console.log(`未找到${valueFromSelect}对应的价格`);
}

更简洁的实现方案 #

可以直接用数组的indexOf方法获取匹配元素的下标，不需要手动写循环：

var fruits = ["Apple", "Orange", "Banana", "Pear", "Pineapple", "Strawberry", "Blueberry"];
var prices = [1.50, 1.20, 1.05, 1.10, 3.00, 0.40, 0.10];
var valueFromSelect = "Apple";

var index = fruits.indexOf(valueFromSelect);
if(index > -1) {
  console.log(prices[index]);
} else {
  console.log("无匹配水果");
}

高频查询优化方案 #

如果需要多次查询水果价格，可以先把两个数组转成键值对对象，后续查询时间复杂度可以降到O(1)：

var fruits = ["Apple", "Orange", "Banana", "Pear", "Pineapple", "Strawberry", "Blueberry"];
var prices = [1.50, 1.20, 1.05, 1.10, 3.00, 0.40, 0.10];

// 生成水果价格映射表
var fruitPriceMap = {};
for(var i=0; i<fruits.length; i++) {
  fruitPriceMap[fruits[i]] = prices[i];
}

// 后续查询直接取属性即可
console.log(fruitPriceMap["Apple"]); // 输出1.5
console.log(fruitPriceMap["Blueberry"]); // 输出0.1

内容的提问来源于stack exchange，提问作者Daring Deer