9个JavaScript日常开发实用技巧
本文整理了9个JavaScript日常开发中的实用技巧，涵盖数组生成、参数展开、Math方法应用、数组扁平化、空值防御、模板字符串、变量交换、本地化排序及字符串脱敏。通过具体代码示例，帮助开发者写出更简洁、健壮且高效的JS代码，提升开发效率并减少常见错误。
1.生成指定范围的数字
在某些场景下，我们需要创建一个包含两个数值之间所有整数的数组。例如，判断某人的出生年份是否落在特定区间内，可以通过以下简洁方式实现：
let start = 1900, end = 2000;
[...new Array(end + 1).keys()].slice(start);
// [ 1900, 1901, ..., 2000]
// 还有这种方式，但对于很的范围就不太稳定
Array.from({ length: end - start + 1 }, (_, i) => start + i);2.使用值数组作为函数的参数
有时我们需要将一组值收集到数组中，并将其作为参数传递给函数。利用 ES6 的扩展运算符（...），可以将数组元素解包为独立参数，实现从 [arg1, arg2] 到 (arg1, arg2) 的转换：
const parts = {
first: [0, 2],
second: [1, 3],
}
["Hello", "World", "JS", "Tricks"].slice(...parts.second)
// ["World", "JS"]3.将值用作 Math 方法的参数
当需要在数组中寻找最大值或最小值时，可以使用 Math.max 或 Math.min 配合扩展运算符来实现：
const elementsHeight = [...document.body.children].map(
el => el.getBoundingClientRect().y
);
Math.max(...elementsHeight);
// 474
const numbers = [100, 100, -1000, 2000, -3000, 40000];
Math.min(...numbers);
// -30004.合并/展平数组中的数组
Array 对象提供了一个名为 Array.flat 的方法，它接收一个表示嵌套深度的 depth 参数，默认值为 1。如果不确定嵌套深度，希望完全展平所有层级，只需传入 Infinity 作为参数即可：
const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]
arrays.flat(Infinity)
// [ 10, 50, 100, 2000, 3000, 40000 ]5. 防止代码崩溃
代码中出现不可预测的行为是不好的，但是如果你有这种行为，你需要处理它。
例如，常见错误TypeError，试获取undefined/null等属性，就会报这个错误。
const found = [{ name: "Alex" }].find(i => i.name === 'Jim')
console.log(found.name)
// TypeError: Cannot read property 'name' of undefined我们可以这样避免它：
const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}
console.log(found.name)
// undefined6. 传递参数的好方法
对于这个方法，一个很好的用例就是styled-components，在ES6中，我们可以将模板字符中作为函数的参数传递而无需使用方括号。 如果要实现格式化/转换文本的功能，这是一个很好的技巧：
const makeList = (raw) =>
raw
.join()
.trim()
.split("\n")
.map((s, i) => `${i + 1}. ${s}`)
.join("\n");
makeList`
Hello, World
Hello, World
`;
// 1. Hello,World
// 2. World,World7.交换变量
使用解构赋值语法，我们可以轻松地交换变量 使用解构赋值语法 😬:
let a = "hello"
let b = "world"
// 错误的方式
a = b
b = a
// { a: 'world', b: 'world' }
// 正确的做法
[a, b] = [b, a]
// { a: 'world', b: 'hello' }8.按字母顺序排序
需要在跨国际的项目中，对于按字典排序，一些比较特殊的语言可能会出现问题，如下所示 😨
// 错误的做法
["a", "z", "ä"].sort((a, b) => a - b);
// ['a', 'z', 'ä']
// 正确的做法
["a", "z", "ä"].sort((a, b) => a.localeCompare(b));
// [ 'a', 'ä', 'z' ]localeCompare() :用本地特定的顺序来比较两个字符串。
9.隐藏隐私
最后一个技巧是屏蔽字符串,当你需要屏蔽任何变量时(不是密码)，下面这种做法可以快速帮你做到：
const password = "hackme";
password.substr(-3).padStart(password.length, "*");
// ***kme掌握这些小技巧，在日常开发过程中可以避免很多不必要的错误，更多关于JavaScript日常开发小技巧请查看下面的相关链接
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19