JavaScript 数组中基于关键词搜索与过滤对象键名的完整教程-js教程-PHP中文网

JavaScript 数组中基于关键词搜索与过滤对象键名的完整教程

本文详解如何从嵌套对象数组中提取键名，并根据关键词进行子字符串匹配过滤，适用于 css 类名、配置项等场景，支持精确匹配与模糊匹配。

本文详解如何从嵌套对象数组中提取键名，并根据关键词进行子字符串匹配过滤，适用于 css 类名、配置项等场景，支持精确匹配与模糊匹配。

在 JavaScript 开发中，常需从结构化的配置数组（如含单个键值对的对象数组）中，依据关键词动态筛选出匹配的键名（例如 CSS 工具类名 align-left、align-right）。原始数据中每个对象仅含一个键（如 "align-left"），其值为字符串数组；目标不是搜索值内容，而是提取并过滤这些键名本身。

核心思路：先提取键，再过滤匹配

由于 myarray 是一个对象数组，且每个对象只有一个键，需分两步处理：

提取所有键名：使用 Array.prototype.map() 遍历数组，对每个对象调用 Object.keys(obj)[0] 获取其唯一键；
按关键词过滤：对键名数组调用 filter()，使用 String.prototype.includes() 判断是否包含搜索词（注意：这是子串匹配，非全词或正则匹配）。

以下是可直接运行的完整实现：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const myarray = [
  { "align-center": ["align", "center"] },
  { "align-justify": ["align", "justified"] },
  { "align-left": ["align", "left", "arrow"] },
  { "align-right": ["align", "right", "arrow"] }
];

function searchByKeyName(array, keyword) {
  return array
    .map(obj => Object.keys(obj)[0]) // 提取每个对象的首个（也是唯一）键名
    .filter(key => key.includes(keyword)); // 子串匹配过滤
}

// 测试用例
console.log(searchByKeyName(myarray, "align-center")); // → ["align-center"]
console.log(searchByKeyName(myarray, "align"));        // → ["align-center", "align-justify", "align-left", "align-right"]
console.log(searchByKeyName(myarray, "right"));        // → ["align-right"]
console.log(searchByKeyName(myarray, "arrow"));        // → ["align-left", "align-right"]

注意事项与进阶建议

✅ 健壮性增强：生产环境建议添加空值校验，例如 obj && Object.keys(obj).length > 0；
⚠️ 匹配逻辑说明：includes() 是大小写敏感的子串匹配。若需忽略大小写，可改用 key.toLowerCase().includes(keyword.toLowerCase())；
? 如需更精准匹配（如只匹配单词边界），可替换为正则：/\b${escapeRegExp(keyword)}\b/.test(key)（需自行实现 escapeRegExp）；
? 扩展用途：该模式同样适用于 API 响应解析、主题配置筛选、图标类名管理等场景。