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

但是，当我尝试将该功能抽象为一个辅助方法时，可以在代码的其他地方使用它：即：

// 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( )方法，我很想学习其他解决方法。减少也许？

这是一个代码沙箱

Answer 1

在中filteredNames，带有arr.filter(i，i是一个object，不是字符串，并且object没有startsWith方法。引用对象的对象firstName，然后调用startsWith它：

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

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

要调用动态属性名称startsWith，请将其传递给filteredNames，例如

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