如何实现按输入字符串匹配对象属性前缀的JavaScript数组过滤？

问题说明 #

现有如下对象数组（原数组存在语法错误，已修正）：

const myArray = [
    {
     id:31,
     name: "test"
    },
    {
     id:22,
     name: "transit"
    },
    {
     id:25,
     name: "tomato"
    }
];

需要实现：用户输入字符时，返回所有name属性以输入内容开头的对象——输入't'返回全部3个对象，输入'to'仅返回name为'tomato'的对象。

正确实现代码 #

直接使用数组的filter方法结合字符串的startsWith方法即可完成需求：

// 基础前缀过滤函数
function filterByPrefix(input) {
    return myArray.filter(item => item.name.startsWith(input));
}

// 测试示例
console.log(filterByPrefix('t'));
// 输出：[{id:31, name:"test"}, {id:22, name:"transit"}, {id:25, name:"tomato"}]

console.log(filterByPrefix('to'));
// 输出：[{id:25, name:"tomato"}]

如果需要支持大小写不敏感的匹配（比如输入'T'或'TO'也能得到对应结果），可以将输入和对象的name统一转成小写后再匹配：

// 大小写不敏感的前缀过滤函数
function filterByPrefixIgnoreCase(input) {
    const lowerInput = input.toLowerCase();
    return myArray.filter(item => item.name.toLowerCase().startsWith(lowerInput));
}

注意点 #

1. 原数组中id:22和id:25的末尾缺失逗号，属于语法错误，需先修正才能正常运行代码。
2. startsWith是ES6新增方法，若需兼容低版本环境，可以用indexOf替代：item.name.indexOf(input) === 0，效果一致。

内容的提问来源于stack exchange，提问作者Antanio D