什么是 Preference?
在编程中,preference 通常指用户或系统的偏好设置,例如语言、主题、排序方式等。
在 for 循环中使用 preference,常用于根据用户配置动态处理数据列表。
注意:这里的 “preference” 并非 JavaScript 关键字,而是一种编程模式或变量命名习惯。
常见使用场景
- 根据用户选择的主题渲染不同样式
- 按用户偏好的排序方式遍历数组
- 过滤符合用户喜好的内容项
- 本地存储(localStorage)中读取用户配置后批量应用
代码示例
1. 根据偏好高亮显示项目
// 用户偏好:喜欢红色
const userPreference = { favoriteColor: 'red' };
const items = ['apple', 'banana', 'cherry'];
for (let i = 0; i < items.length; i++) {
if (items[i] === 'apple') {
console.log(`%c${items[i]} is your favorite!`,
`color: ${userPreference.favoriteColor}; font-weight: bold;`);
} else {
console.log(items[i]);
}
}
2. 按偏好顺序遍历
const sortOrder = 'desc'; // 用户偏好:降序
const numbers = [3, 1, 4, 1, 5];
// 先排序,再遍历
const sorted = sortOrder === 'desc'
? [...numbers].sort((a, b) => b - a)
: [...numbers].sort((a, b) => a - b);
for (const num of sorted) {
console.log(num);
}
3. 从 localStorage 读取偏好并应用
// 假设已保存:localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme') || 'light';
const elements = document.querySelectorAll('.card');
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add(theme === 'dark' ? 'dark-mode' : 'light-mode');
}
最佳实践建议
- 始终提供默认偏好值,避免 undefined 错误
- 将偏好逻辑封装成函数,提高可维护性
- 避免在 for 循环内重复读取 localStorage,应在循环外读取一次
- 使用 const/let 而非 var,防止作用域污染
总结
在 for 循环中合理使用 preference,
可以让程序更灵活、更贴近用户需求。关键在于将配置与逻辑分离,
并确保代码清晰、健壮。