JavaScript 实用技巧：解构、数字分隔符与调用栈获取
本文介绍 JavaScript 中六个实用且常被忽视的技巧。包括嵌套对象的多重解构、使用下划线分隔符提升数字可读性、理解 try...catch...finally 中 return 的执行顺序、通过 new Error().stack 获取调用栈、一行代码生成随机字符串以及直接通过 ID 访问 DOM 元素。这些技巧有助于提升代码简洁性与调试效率。
今天分享一些 JavaScript 中可能鲜为人知但非常实用的特性。其中一些你可能已经了解，而另一些或许会让你感到意外。让我们直接开始探索。
一、解构小技巧
在处理深层嵌套对象时，我们通常通过解构提取所需的属性。
let obj = {
part1: {
name: '零一',
age: 23
}
}
// 解构
const { part1: { name, age } } = obj
// 使用
console.log(name, age) // 零一 23
然而，如果仅从 part1 中解构出 name 和 age，你将无法直接访问 obj 中的 part1 属性，例如：
// .... 省略
const { part1: { name, age } } = obj
console.log(part1) // Uncaught ReferenceError: part1 is not defined
实际上，可以通过多次解构来同时获取嵌套属性和父对象，例如：
// .... 省略
const { part1: { name, age }, part1 } = obj
console.log(part1) // {name: "零一", age: 23}
二、数字分隔符
在代码中定义大型数字常量时，
const myMoney = 1000000000000
这么多个 0 ，1、2 ... 6、7 ... 数晕了都，怎么办？
可以使用数字分隔符来解决。
const myMoney = 1_000_000_000_000
console.log(myMoney) // 1000000000000
这种写法完全合法，且分割后的数字更加直观易读。
三、try...catch...finally 谁厉害？
在普通函数调用中，return 语句通常会立即终止函数的执行。
function demo () {
return 1
console.log('我是零一')
return 2
}
console.log(demo()) // 1
但在 try...catch...finally 结构中，return 的行为有所不同，它不会立即结束整个执行流程。
function demo () {
try {
return 1
} catch (err) {
console.log(err)
return 2
} finally {
return 3
}
}
console.log(demo()) // 返回什么？？
这段程序最终会返回什么值？请思考一下。
两小时后~
答案是：3。
由此可以得出结论，finally 块中的逻辑具有更高的优先级。
利用这一特性，我们可以实现一些特殊的控制逻辑。
function demo () {
try {
return 1
} catch (err) {
console.log(err)
return 2
} finally {
try {
return 3
} finally {
return 4
}
}
}
console.log(demo()) // 返回 4
四、获取当前调用栈
function firstFunction() { secondFunction(); }
function secondFunction() { thridFunction(); }
function thridFunction() { console.log(new Error().stack); }
firstFunction();
//=> Error
// at thridFunction (<anonymous>:2:17)
// at secondFunction (<anonymous>:5:5)
// at firstFunction (<anonymous>:8:5)
// at <anonymous>:10:1
通过 new Error().stack 可以随时获取当前代码执行的调用栈信息，这是一种有效的调试手段。
五、一行代码生成随机字符串
初学 JavaScript 时，若要自行实现随机字符串生成函数，代码通常较为繁琐。
function hash () {
let s = ''
const strs = [
'a', 'b', 'c', 'd', 'e', 'f', 'g',
'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't', 'u',
'v', 'w', 'x', 'y', 'z', '0', '1',
'2', '3', '4', '5', '6', '7', '8',
'9',
]
for(let i = 0; i < 10; i++) {
s += strs[Math.floor(Math.random() * strs.length)]
}
return s
}
hash() // 'www7v2if9r'
手动列举 26 个字母和 10 个数字非常耗时（尽管可以使用 ASCII 码简化，但仍较麻烦）。
接下来介绍一种方法，仅需一行简短代码即可实现“随机生成字符串”的功能。
const str = Math.random().toString(36).substr(2, 10);
console.log(str); // 'w5jetivt7e'
我们同样得到了一个 10 位数的随机字符串，这非常高效，远胜于之前手动编写的版本。
其原理是：Math.random() 生成 [0, 1) 之间的浮点数（如 0.123312、0.982931），然后调用 number 的 toString 方法将其转换为 36 进制。根据 MDN 文档，36 进制转换包含字母 a~z 和数字 0~9。由于生成结果类似 0.89kjna21sa，因此需要截取小数部分，即从索引 2 开始截取 10 个字符，即可得到所需的随机字符串。
许多开源库利用此方式为 DOM 元素创建随机 ID。
六、最快获取 dom 的方法
HTML 中带有 id 属性的元素，会被全局作用域中与 ID 同名的变量所引用。
<div id="zero2one"></div>
传统获取 DOM 的方式如下：
const el = document.getElementById('zero2one')
console.log(el) // <div id="zero2one"></div>
现在可以直接使用 ID 作为变量名访问。
console.log(zero2one) // <div id="zero2one"></div>
这种方式是否更加便捷？
总结
本文介绍了关于 JavaScript 的六个实用技巧。如需了解更多相关内容，请查阅本站往期文章或继续浏览后续内容。感谢大家的支持！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38