前端各种小技巧（可选链操作符等）
前端小技巧
Array.includes()快速判断数组是否包含元素
这个方法是ES7的特性，也是当下前端数据处理中高频使用的技巧。
// 定义一个水果数组
const fruits = ['apple', 'banana', 'cherry', 'orange'];
// 使用includes()方法判断数组中是否包含'banana'
const hasBanana = fruits.includes('banana');
console.log(hasBanana); // true
// 判断数组中是否包含'grape'
const hasGrape = fruits.includes('grape');
console.log(hasGrape); // false
Vue的列表数据筛选场景中，Array.includes()能让你的代码瞬间清爽，性能也大幅提升！
Object.fromEntries()轻松将键值对数组转为对象
当从后端接口拿到的数据是[['key1', 'value1'], ['key2', 'value2']]这种键值对数组格式时，想把它转为对象方便使用，传统方法可能需要写一堆循环代码。Object.fromEntries()方法完美解决这个痛点，它是ES10的新特性。
// 假设后端返回的用户信息是键值对数组
const userArray = [
['name', 'Tom'],
['age', 28],
['email', 'tom@example.com']
];
// 使用Object.fromEntries()将键值对数组转为对象
const userObject = Object.fromEntries(userArray);
console.log(userObject);
// {name: 'Tom', age: 28, email: 'tom@example.com'}
在处理登录接口返回数据、表单提交数据解析等场景时，这个方法能让你少写几十行代码，开发效率直接起飞！
Optional Chaining（可选链操作符）
多层对象取值不再怕null报错！在处理多层嵌套的对象时，最怕遇到某个中间属性为null或undefined，导致直接取值时报错。比如user.address.city，如果user或user.address为null，代码就会直接崩掉。Optional Chaining操作符?.就是为解决这个问题而生，是ES2020的热门特性，也是前端稳定性的重要保障。
// 假设从API获取的用户数据可能存在null情况
const user = null;
// 传统写法，需要层层判断
// if (user && user.address && user.address.city) {
// console.log(user.address.city);
// }
// 使用Optional Chaining，直接链式调用，遇到null自动返回undefined
const city = user?.address?.city;
console.log(city); // 输出undefined，不会报错
Vue的computed属性计算中，这个操作符能让你的代码更健壮，再也不用担心null引发的“惨案”！
Array.flatMap()映射+拍平一步到位
有时候我们需要对数组进行映射操作后再拍平，比如对数组中的每个子数组进行处理并合并成一个新数组。传统方法需要先使用map再用flat，而Array.flatMap()能将这两个步骤合二为一，是数据清洗和预处理的“神器”。
// 定义一个包含子数组的数组
const nestedArray = [[1, 2], [3, 4], [5, 6]];
// 使用flatMap()方法，将每个子数组中的元素乘以2并拍平
const newArray = nestedArray.flatMap((subArray) => subArray.map((num) => num * 2));
console.log(newArray); // [2, 4, 6, 8, 10, 12]
在处理表格数据转换、树形结构扁平化等复杂数据处理场景时，flatMap()能让你的代码量减少一半，效率却提升数倍！
Object.keys()、Object.values()、Object.entries()快速获取对象的键、值、键值对
在操作对象时，经常需要获取对象的所有键、值或者键值对。以前可能需要通过for...in循环来实现，现在有了Object.keys()、Object.values()、Object.entries()这三个方法，一切都变得简单直接，是对象遍历和数据提取的必备技巧。
// 定义一个用户对象
const user = {
name: 'Alice',
age: 30,
city: 'London'
};
// 使用Object.keys()获取对象的所有键
const keys = Object.keys(user);
console.log(keys); // ['name', 'age', 'city']
// 使用Object.values()获取对象的所有值
const values = Object.values(user);
console.log(values); // ['Alice', 30, 'London']
// 使用Object.entries()获取对象的所有键值对
const entries = Object.entries(user);
console.log(entries);
// [['name', 'Alice'], ['age', 30], ['city', 'London']]
Array.sort()自定义排序规则
默认的Array.sort()方法在处理数字数组时可能会出现不符合预期的结果，因为它会先将元素转为字符串再比较。通过自定义排序函数，我们可以实现各种复杂的排序需求，在数据展示和列表排序中非常实用。
// 定义一个数字数组
const numbers = [5, 2, 8, 1, 9];
// 使用默认的sort()方法，结果可能不符合预期
const defaultSort = numbers.sort();
console.log(defaultSort); // [1, 2, 5, 8, 9] 看似正常，但如果是两位数以上会有问题
// 使用自定义排序函数，实现升序排序
const ascendingSort = numbers.sort((a, b) => a - b);
console.log(ascendingSort); // [1, 2, 5, 8, 9]
// 使用自定义排序函数，实现降序排序
const descendingSort = numbers.sort((a, b) => b - a);
console.log(descendingSort); // [9, 8, 5, 2, 1]
console高级用法
// 格式化输出对象，比普通log更清晰
const complexObject = {
name: '复杂对象',
data: [
{ id: 1, value: '数据1' },
{ id: 2, value: '数据2' }
]
};
console.table(complexObject);
// 计时功能，统计代码执行时间
console.time('代码执行时间');
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('代码执行时间');
// 分组输出日志，方便整理调试信息
console.group('重要逻辑');
console.log('步骤1');
console.log('步骤2');
console.groupEnd();
目录