typeof判断.get()返回值undefined失效的问题排查与解决尝试

报错原因 #

你之前的代码报错核心在于：当$deselected没有匹配到任何取消选中的选项时，$deselected.get()[0]会返回undefined。此时你直接访问它的.value属性，就会触发Cannot read properties of undefined (reading 'value')错误——因为undefined本身没有任何属性，自然无法读取value。

你原来的判断逻辑typeof $deselected.get()[0].value === "undefined"的问题是：在判断value的类型之前，已经尝试读取了这个属性，而此时$deselected.get()[0]可能已经是undefined，这一步直接抛出错误，根本走不到类型判断的逻辑里。

正确处理方式 #

1. 先确认元素存在再访问属性 #

就像你更新后的代码那样，先判断数组元素本身是否存在，再去访问其value属性：

var $slidesoptions = $('#Slidesnumber');
var $deselected = $slidesoptions.find('option.selected:not(:checked)');
$slidesoptions.find('option:checked').addClass('selected');
$deselected.removeClass('selected');

if(typeof $deselected.get()[0] !== "undefined"){
    console.log("存在取消选中的选项");
    console.log("取消选中的选项值:", $deselected.get()[0].value);
} else {
    console.log("没有取消选中的选项");
}

2. 更简洁的jQuery风格写法 #

jQuery对象自带length属性，直接判断$deselected.length > 0就能知道有没有匹配到元素，无需使用get()[0]：

var $slidesoptions = $('#Slidesnumber');
var $deselected = $slidesoptions.find('option.selected:not(:checked)');
$slidesoptions.find('option:checked').addClass('selected');
$deselected.removeClass('selected');

if($deselected.length > 0){
    console.log("存在取消选中的选项");
    console.log("取消选中的选项值:", $deselected.eq(0).val()); // 用eq(0)获取第一个匹配元素，val()直接取值
} else {
    console.log("没有取消选中的选项");
}

这种写法更符合jQuery的使用习惯，可读性也更强。

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