JavaScript新手求助：两数组匹配后生成带禁用属性的HTML选项

首先得指出你当前代码里的核心问题：el.includes(array2)这个判断逻辑完全不对哦！

• el是array1里的字符串（比如"8:00AM"），而includes()方法在字符串上调用时，是用来判断当前字符串是否包含传入的子串。你把数组array2传进去，JS会自动把数组转成字符串（也就是"11:00AM,11:00AM,3:00PM"），然后判断el是不是这个长字符串的子串——这显然不是你想要的「判断当前时间是否在禁用列表里」的逻辑。

正确的写法 #

你需要反过来，用数组的includes()方法来检查array2里是否包含当前的el：

var array1 = ["8:00AM", "9:00AM", "10:00AM","11:00AM"];
var array2 = ["11:00AM", "11:00AM", "3:00PM"];

array1.map((el, i) => 
  <option key={i} disabled={array2.includes(el)}>{el}</option>
)

这样就能实现：只要el存在于array2中，对应的<option>就会加上disabled属性，完全符合你的需求。

小优化：提升性能（可选） #

因为你的array2里有重复元素（比如两个"11:00AM"），如果数组很大的话，每次调用array2.includes(el)都会遍历整个数组，效率不高。可以先把array2转成Set，利用Set的O(1)查找性能：

var array1 = ["8:00AM", "9:00AM", "10:00AM","11:00AM"];
var array2 = ["11:00AM", "11:00AM", "3:00PM"];

const disabledTimeSet = new Set(array2);
array1.map((el, i) => 
  <option key={i} disabled={disabledTimeSet.has(el)}>{el}</option>
)

这样修改后，你的代码就能完美实现「匹配值对应的下拉选项禁用」的功能啦～

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