javascript - 也使 array.filter 过滤空值

Question

这是我来自网络服务的数组。

array = [{category: "Amphibian", common_name: "African Clawed Frog"},{category: "Mammal", common_name: "African Pygmy Hedgehog"},{common_name: "African Spurred Tortoise"}];

现在当我这样调用这个函数时:

function filterByKey(array, "common_name", "African", "includes") //it works..

所以现在当我想按类别过滤时，像这样:

function filterByKey(array, "category", "Mammal", "includes") // it doesn't work

但是因为第三行没有category列，所以报错如下:

未捕获的类型错误:无法读取未定义的属性“toLowerCase”

这是我的职责

function filterByKey(array, key, value, matchOrContain) {
    if (matchOrContain == "match") {
        var result = array.filter(o => Object.keys(o).some(k => o[key].toLowerCase() === value.toLowerCase()));
    } else if (matchOrContain == "includes") {
        var result = array.filter(o => Object.keys(o).some(k => o[key].toLowerCase().includes(value
            .toLowerCase())));

    }

    return result;
}

如何避免出现该错误但同时过滤掉数组？任何帮助都感激不尽。谢谢!!

Answer 1

最简单的调整是使用可选链接，仅在键存在时调用 toLowerCase:

const array = [{
  category: "Amphibian",
  common_name: "African Clawed Frog"
}, {
  category: "Mammal",
  common_name: "African Pygmy Hedgehog"
}, {
  common_name: "African Spurred Tortoise"
}];
console.log(filterByKey(array, "category", "Mammal", "includes"))

function filterByKey(array, key, value, matchOrContain) {
  if (matchOrContain == "match") {
    var result = array.filter(o => Object.keys(o).some(k => o[key]?.toLowerCase() === value.toLowerCase()));
  } else if (matchOrContain == "includes") {
    var result = array.filter(o => Object.keys(o).some(k => o[key]?.toLowerCase().includes(value
      .toLowerCase())));

  }

  return result;
}

您也可以通过预先声明回调来显着地 DRY 代码:

const array = [{
  category: "Amphibian",
  common_name: "African Clawed Frog"
}, {
  category: "Mammal",
  common_name: "African Pygmy Hedgehog"
}, {
  common_name: "African Spurred Tortoise"
}];
console.log(filterByKey(array, "category", "Mammal", "includes"))

function filterByKey(array, key, value, matchOrContain) {
  const lowerValue = value.toLowerCase();
  const test = value => (
    matchOrContain === 'match'
      ? value?.toLowerCase().includes(lowerValue)
      : value?.toLowerCase() === lowerValue
  );
  return array.filter(
    o => Object.values(o).some(test)
  );
}

如果你不能使用可选链，那么使用更详细的方法并在调用方法之前检查值是否为真:

const array = [{
  category: "Amphibian",
  common_name: "African Clawed Frog"
}, {
  category: "Mammal",
  common_name: "African Pygmy Hedgehog"
}, {
  common_name: "African Spurred Tortoise"
}];
console.log(filterByKey(array, "category", "Mammal", "includes"))

function filterByKey(array, key, value, matchOrContain) {
  const lowerValue = value.toLowerCase();
  const test = value => value && (
    matchOrContain === 'match'
      ? value?.toLowerCase().includes(lowerValue)
      : value?.toLowerCase() === lowerValue
  );
  return array.filter(
    o => Object.values(o).some(test)
  );
}