JavaScript 帮助器 | startsWith() 不是一个函数

Question

我需要编写一个辅助函数，它循环遍历对象数组并过滤符合既定条件的所有名称。就我而言，所有以 Zach

开头的名称

数组示例:

const users = [
  {
    firstName: "Zach",
    id: 1,
    lastName: "Volsk"
  },
  {
    firstName: "Surly",
    id: 2,
    lastName: "Furious"
  },

  {
    firstName: "Zach",
    id: 3,
    lastName: "Tee"
  },
  {
    firstName: "Eve",
    id: 4,
    lastName: "Zelda"
  },

  {
    firstName: "Zachary",
    id: 5,
    lastName: "Toys"
  }
];

我能够直接应用过滤器和映射来检索所需的结果，即:

const filterZach = users
  .filter(user => user.firstName.startsWith("Zach"))
  .map(user => {
    return `<p>${user.firstName} ${user.lastName}</p>`;
  }).join(""); // get rid of comas

期望结果:Zach Volsk、Zach Tee、Zachary Toys

但是，当我尝试将该功能抽象为辅助方法以便我可以在代码中的其他位置使用它时:IE:

// helper
function filteredNames(arr, str) {
  return arr.filter(i => i.startsWith(str));
}

我收到一条错误消息:i.startsWith 不是一个函数

const filterZach = filteredNames(users, "Zach") // i.startsWith is not a function
const renderZach = filterZach.map(user => {
    return `<p>${user.firstName} ${user.lastName}</p>`;
  }).join("");

问题:您能否帮助理解此问题的原因，向我展示使用辅助函数实现目标的替代方法？

我还没有使用 startsWith( ) 方法，并且我很想了解其他方法来解决这个问题。也许减少？

这是一个 code sandbox

Answer 1

在 filteredNames 中，arr.filter(i, i 是一个对象，而不是字符串，并且对象没有 startsWith 方法。请改为引用对象的 firstName，并对其调用 startsWith:

// helper
function filteredNames(arr, str) {
  return arr.filter(i => i.firstName.startsWith(str));
}

const users = [
  {
    firstName: "Zach",
    id: 1,
    lastName: "Volsk"
  },
  {
    firstName: "Surly",
    id: 2,
    lastName: "Furious"
  },

  {
    firstName: "Zach",
    id: 4,
    lastName: "Tee"
  },
  {
    firstName: "Eve",
    id: 5,
    lastName: "Zelda"
  },

  {
    firstName: "Zachary",
    id: 6,
    lastName: "Toys"
  }
];
// helper
function filteredNames(arr, str) {
  return arr.filter(i => i.firstName.startsWith(str));
}
const filterZach = filteredNames(users, "Zach") // i.startsWith is not a function
const renderZach = filterZach.map(user => {
    return `<p>${user.firstName} ${user.lastName}</p>`;
  }).join("");
document.body.innerHTML += renderZach;

对于要调用 startsWith 的动态属性名称，请将该属性名称传递给 filteredNames，例如

function filteredNames(arr, str, prop) {
  return arr.filter(i => i[prop].startsWith(str));
}