JavaScript 进阶必知的 3 个实用技巧
JavaScript 进阶技巧涵盖扩展运算符、空值检查及函数式编程方法。扩展运算符用于数组拷贝合并与对象展开;可选链与空值合并运算符简化了嵌套属性访问与默认值处理;map、filter 和 reduce 组合实现数据转换与聚合,提升代码简洁性与可维护性。
JavaScript 进阶技巧涵盖扩展运算符、空值检查及函数式编程方法。扩展运算符用于数组拷贝合并与对象展开;可选链与空值合并运算符简化了嵌套属性访问与默认值处理;map、filter 和 reduce 组合实现数据转换与聚合,提升代码简洁性与可维护性。
在现代前端开发中,掌握 ES6+ 的新特性是区分初级与高级开发者的关键。以下三个技巧能显著提升代码的可读性与健壮性。
扩展运算符(spread)由三个点(...)组成,是 JavaScript 中最实用的语法糖之一。它主要用于以下三种场景:
创建数组的浅拷贝,比传统的 slice() 更简洁。
const arr = [1, 2, 3, 4];
const newArr = [...arr];
console.log(newArr); // [1, 2, 3, 4]
快速将多个数组合并为一个新数组。
const numArr = [1, 2, 3, 4];
const alphaArr = ['a', 'b', 'c'];
const newArr = [...numArr, ...alphaArr];
console.log(newArr); // [1, 2, 3, 4, 'a', 'b', 'c']
复制对象属性并允许在复制过程中修改或新增属性。
const rectangle = { width: 10, height: 10 };
const cube = { ...rectangle, length: 7 };
console.log(cube); // {width: 10, height: 10, length: 7}
早期的 JavaScript 代码常包含冗长的空值判断。现代语法提供了更优雅的方案。
可选链操作符(?.)允许安全地访问嵌套对象的属性。如果中间某个属性为 null 或 undefined,表达式会返回 undefined 而不会抛出错误。
const client = {
name: 'Liu Xing',
address: {
zipcode: '1234'
}
};
// 老式写法
if (client && client.address && client.address.zipcode) {}
// 现代写法
if (client?.address?.zipcode) {}
空值合并操作符(??)仅在左侧操作数为 null 或 undefined 时返回右侧值,否则返回左侧值。这解决了逻辑或(||)误判 falsy 值的问题。
const defaultMessage = 'Hello JavaScript';
const msg = defaultMessage ?? 'Hello Liu Xing';
console.log(msg); // Hello JavaScript
// 链式使用
console.log(firstName ?? lastName ?? 'anonymous');
函数式编程方法让数据处理更加声明式和简洁。以下是三个最常用的数组方法。
假设有一组购物清单,需要将欧元价格转换为人民币(汇率 7.18),并计算食品类的总花费。
const items = [
{ name: 'pineapple', price: 2, type: 'food' },
{ name: 'beef', price: 20, type: 'food' },
{ name: 'advocate', price: 1, type: 'food' },
{ name: 'shampoo', price: 5, type: 'other' }
];
let sum = 0;
const itemsInYuan = [];
for (let i = 0; i < items.length; i++) {
const item = items[i];
item.price *= 7.18;
itemsInYuan.push(item);
if (item.type === 'food') {
sum += item.price;
}
}
console.log(itemsInYuan);
console.log(sum);
利用 map 转换数据,filter 筛选数据,reduce 聚合结果。这种方式避免了可变状态,代码更易读。
const itemsInYuan = items.map(item => {
const itemInYuan = { ...item };
itemInYuan.price *= 7.18;
return itemInYuan;
});
const sum = itemsInYuan.filter(item => item.type === 'food').reduce((total, item) => total + item.price, 0);
掌握扩展运算符、空值检查优化以及函数式编程方法,不仅能减少代码量,还能降低出错概率。建议在日常开发中积极应用这些现代 JavaScript 特性,提升工程化水平。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online