js实现按首字母搜索
实现按首字母搜索的方法
获取字符串的首字母
使用charAt(0)方法获取字符串的第一个字符作为首字母：
const str = "Apple";
const firstLetter = str.charAt(0); // 返回 'A'转换为大写或小写
为确保搜索不区分大小写，统一转换为大写或小写：
const firstLetterUpper = firstLetter.toUpperCase(); // 转换为大写
const firstLetterLower = firstLetter.toLowerCase(); // 转换为小写过滤数组中的元素
使用filter方法筛选符合首字母条件的元素：
const items = ["Apple", "Banana", "Cherry", "apple"];
const searchLetter = 'A';
const filteredItems = items.filter(item =>
item.charAt(0).toUpperCase() === searchLetter.toUpperCase()
);
// 返回 ["Apple", "apple"]处理中文字符的首字母
使用第三方库（如pinyin）获取中文拼音首字母：
import pinyin from 'pinyin';
const chineseStr = "北京";
const firstLetter = pinyin(chineseStr, { style: pinyin.STYLE_FIRST_LETTER })[0][0].toUpperCase();
// 返回 'B'实现动态搜索
结合输入框的onChange事件动态过滤数据：
const [searchLetter, setSearchLetter] = useState('');
const data = ["Apple", "Banana", "Cherry"];
const filteredData = data.filter(item =>
item.charAt(0).toUpperCase() === searchLetter.toUpperCase()
);
return (
<div>
<input
type="text"
onChange={(e) => setSearchLetter(e.target.value)}
placeholder="输入首字母"
/>
<ul>
{filteredData.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);性能优化建议
对于大型数据集，使用debounce函数减少频繁触发过滤操作：
import { debounce } from 'lodash';
const handleSearch = debounce((letter) => {
setSearchLetter(letter);
}, 300);
<input onChange={(e) => handleSearch(e.target.value)} />注意事项
- 多语言支持：非拉丁语系（如中文、日文）需借助拼音或罗马字转换库。
- 空值处理：检查输入是否为空字符串以避免意外行为。
- 扩展性：可结合正则表达式实现更复杂的匹配逻辑（如
/^[A-Z]/i）。
