JavaScript 中如何用变量访问对象属性并筛选数据？

2026-11-04数据小陈

使用 jsonObject[chktarget] 即可动态访问属性。原代码把 . 和 [] 连在了一起，删除方括号前的点即可。

正确的筛选写法

将固定的 jsonObject.genre 改为 jsonObject[chktarget]：

let chktarget = "genre";

if (searchq !== "") {
  var filtered = data.filter(jsonObject =>
    jsonObject[chktarget].includes(searchq)
  );

  console.log("Filtered below");
  data = filtered;
}

当 chktarget 的值为 "genre" 时，jsonObject[chktarget] 访问的是对象的 genre 属性。这是 JavaScript 对象属性访问，不需要 jQuery。

为什么原来的写法会报错？

JavaScript 支持两种常见的对象属性访问方式：

jsonObject.genre         // 访问名为 genre 的属性
jsonObject[chktarget]    // 将变量的值作为属性名

点号后直接写属性名，方括号内可以放变量或其他表达式。原来的写法在方括号前多了一个点，不符合语法：

jsonObject.[chktarget]

jsonObject.chktarget 则会访问名为 chktarget 的属性，不会读取变量的值。

切换属性时要注意什么？

示例中，genre 是数组，title、artist 和 year 是字符串。它们都支持 includes()，但匹配含义不同：

数组的 includes() 判断是否包含某个完整元素。例如，["speedcore", "electronic"].includes("speed") 返回 false。
字符串的 includes() 判断是否包含某个子字符串。例如，"speedcore".includes("speed") 返回 true。

两种匹配都区分大小写。如果 chktarget 指向不存在的属性，得到的值就是 undefined，此时调用 .includes() 会报错。因此，要确保 chktarget 对应有效字段。

filter() 会返回一个新数组，而 data = filtered 会让 data 指向筛选结果。如果每次搜索都要从完整数据开始，应另存原始数组，并始终对原始数组执行筛选。

示例数据可以作为 JavaScript 数组字面量使用，但其中的尾随逗号不符合严格 JSON 语法。如果通过 JSON.parse() 读取这段文本，需要先删除尾随逗号。