过滤对象数组中的所有值

Question

假设我们有以下数组：

const arr = [{
    id: 0,
    title: 'C',
    countries: [{
      val: "1173",
      label: "Nice"
    }, {
      val: "1172",
      label: "(Yeah)"
    }],
    companies: [{
      val: "7346",
      label: "Hello World"
    }]
  },
  {
    id: 1,
    title: 'B',
    countries: [{
      val: "1175",
      label: "Like it"
    }],
    companies: [{
      val: "8294",
      label: "Javascript"
    }]
  },
]

我想搜索此数组中的所有值。

这是我的方法：

const objFields = ['countries', 'companies'];
const filterBySearchTerm = (arr, filters) => {
  if (!(arr && arr.length)) {
    return [];
  }

  // filters looks like this: {search: 'hello'}

  const sT = filters.search;
  const searchTermVariations = [sT.toLowerCase()];
  console.log(searchTermVariations);

  /* Start transform all values to arrays */
  const clonedArr = [...arr];
  clonedArr.forEach((job) => {
    const objKeys = Object.keys(job);
    objKeys.forEach((key) => {
      const currVal = job[key];
      const currValToUse = Array.isArray(currVal) ? currVal : [currVal];
      // eslint-disable-next-line no-param-reassign
      job[key] = [...currValToUse];
    });
  });
  /* End transform all values to arrays */

  /* Start transform all obj-values to plain strings */
  const results = clonedArr.filter((itm) => {
    const vals = Object.keys(itm).filter((el) => objFields.includes(el));
    vals.forEach((key) => {
      // eslint-disable-next-line no-param-reassign
      itm[key] = itm[key].map((el) => [el.label, el.val]);
    });

    return vals;
  });

  /* End transform all obj-values to plain strings */

  // perform filtering
  console.info('!! results:', results);
  return results;
};

我想说的是，我现在觉得我的方法太丑陋了。您知道如何更短、更智能地完成这项工作吗？

Answer 1

如果您想通过任何属性值过滤对象数组，使用子字符串匹配、不区分大小写并递归到数组中，这样做：

// Checks to see if any object property matches the search value
// (which must be in lower case), or if any of its array properties
// contains an object that matches
function matchesAnyPropValue(obj, search) {
    return Object.values(obj).some(value =>
        Array.isArray(value)
        ? value.some(v => matchesAnyPropValue(v, search))
        : String(value).toLocaleLowerCase().includes(search)
    );
}

// Apply the given filter to the given array    
function applySearch(arr, filters) {
    const search = filters.search.toLocaleLowerCase();
    return arr.filter(entry => matchesAnyPropValue(entry, search));
}

现场示例：

const arr = [{
    id: 0,
    title: 'C',
    countries: [{
      val: "1173",
      label: "Nice"
    }, {
      val: "1172",
      label: "Yeah"
    }],
    companies: [{
      val: "7346",
      label: "Hello World"
    }]
  },
  {
    id: 1,
    title: 'B',
    countries: [{
      val: "1175",
      label: "Like it"
    }],
    companies: [{
      val: "8294",
      label: "Javascript"
    }]
  },
];

function matchesAnyPropValue(obj, search) {
    return Object.values(obj).some(value =>
        Array.isArray(value)
        ? value.some(v => matchesAnyPropValue(v, search))
        : String(value).toLocaleLowerCase().includes(search)
    );
}

function applySearch(arr, filters) {
    const search = filters.search.toLocaleLowerCase();
    return arr.filter(entry => matchesAnyPropValue(entry, search));
}

document.getElementById("search").addEventListener("click", () => {
    const filters = {search: document.getElementById("filter").value};
    const filtered = applySearch(arr, filters);
    console.clear();
    console.log(filtered);
});

.as-console-wrapper {
    max-height: 100% !important;
}

<input type="text" id="filter" value="yeah">
<input type="button" id="search" value="Search">