24个实用JavaScript开发技巧

作者：代码拾荒时间：2026-10-24 20:41:10浏览：589

本文整理了24个实用的JavaScript开发技巧，涵盖数组初始化、求和、过滤、对象验证、性能计算及代码简化等方面。通过示例展示了如何使用现代语法特性如可选链、空值合并、扩展运算符等提升代码简洁性与执行效率，帮助开发者写出更优雅高效的JavaScript代码。

1. 初始化数组

若需初始化指定长度的一维数组并设定默认值，可参考以下实现：


const array = Array(6).fill(''); 
// ['', '', '', '', '', '']

若需初始化指定长度的二维数组并设定默认值，可参考以下实现：


const matrix = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [[0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0]]

2. 数组求和、求最大值、最小值


const array  = [5,4,7,8,9,2];

数组求和实现：


array.reduce((a,b) => a+b);

数组最大值获取：


array.reduce((a,b) => a > b ? a : b);


Math.max(...array)

数组最小值获取：


array.reduce((a,b) => a < b ? a : b);

Math.min(...array)

利用数组的reduce方法可有效解决多种数组求值场景。

3. 过滤错误值

若需过滤数组中的false、0、null、undefined等值，可参考以下实现：


const array = [1, 0, undefined, 6, 7, '', false];

array.filter(Boolean);
// [1, 6, 7]

4. 使用逻辑运算符

若存在如下代码逻辑：


if(a > 10) {
    doSomething(a)
}

可改用逻辑运算符进行重构：


a > 10 && doSomething(a)

此种写法更为简洁。当逻辑与&&操作符前的值为假时，将发生短路操作并直接结束执行；若为真，则继续执行&&后的代码并返回其值。此方式可大幅减少if...else判断。

5. 判断简化

若存在如下判断逻辑：


if(a === undefined || a === 10 || a=== 15 || a === null) {
    //...
}

可改用数组来简化该判断逻辑：


if([undefined, 10, 15, null].includes(a)) {
    //...
}

此写法代码更简洁且易于扩展，若需增加等于a的判断，只需在数组中添加即可。

6. 清空数组

若需清空数组，可将数组的length属性设为0：


let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0 
console.log(array)  // []

7. 计算代码性能

可使用以下操作来评估代码性能：


const startTime = performance.now(); 
// 某些程序
for(let i = 0; i < 1000; i++) {
    console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 30.299999952316284

8. 拼接数组

若需拼接多个数组，可使用扩展运算符：


const start = [1, 2] 
const end = [5, 6, 7] 
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]

或使用数组的concat()方法：


const start = [1, 2, 3, 4] 
const end = [5, 6, 7] 
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]

然而使用concat()方法时，若待合并数组较大，concat() 函数在创建新数组时会消耗大量内存。此时可采用以下方法实现数组合并：


Array.push.apply(start, end)

通过此方式可显著降低内存使用量。

9. 对象验证方式

若存在如下对象结构：


const parent = {
    child: {
      child1: {
        child2: {
          key: 10
      }
    }
  }
}

传统写法常通过多层判断避免某层级不存在导致的报错：


parent && parent.child && parent.child.child1 && parent.child.child1.child2

此种写法代码显得臃肿，可改用JavaScript的可选链运算符：


parent?.child?.child1?.child2

此实现效果与前述长串判断一致。

可选链运算符同样适用于数组操作：


const array = [1, 2, 3];
array?.[5]

可选链运算符允许我们读取连接对象链深处属性的值，无需明确验证链中每个引用是否有效。若引用为空(null 或者 undefined)，则不会引起错误，该表达式短路返回值是 undefined。若与函数调用结合使用，且给定函数不存在，则返回 undefined。

10. 验证undefined和null

若存在如下代码逻辑：


if(a === null || a === undefined) {
    doSomething()
}

即需验证一个值等于null或者undefined时执行某操作，可使用空值合并运算符简化上述代码：


a ?? doSomething()

如此，仅当a为undefined或者null时，才会执行空值合并运算符后的代码。空值合并操作符（??）作为逻辑操作符，当左侧操作数为 null 或者 undefined 时，返回右侧操作数；否则返回左侧操作数。

11. 数组元素转化为数字

若需将数组元素转化为数字，可使用map方法实现：


const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number);  // [12, 1, 3.1415, -10.01]

通过此方式，map将在遍历数组时，对每个元素执行Number构造函数并返回结果。

12. 类数组转为数组

可使用以下方法将类数组arguments转化为数组：


Array.prototype.slice.call(arguments);

此外，还可使用扩展运算符实现：


[...arguments]

13. 对象动态声明属性

若需给对象动态声明属性，可参考以下实现：


const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

14. 缩短console.log()

调试时频繁书写console.log()较为繁琐，可使用以下形式简化代码：


const c = console.log.bind(document) 
c(996) 
c("hello world")

此后每次执行c方法即可。

15. 获取查询参数

若需获取URL中的参数，可使用window对象的属性：


window.location.search

若URL为www.baidu.com?project=js&type=1，通过上述操作可获取到?project=js&type=1。若需获取其中某一参数，可参考以下实现：


let type = new URLSearchParams(location.search).get('type');

16. 数字取整

若数字包含小数，欲去除小数部分，通常会使用math.floor、math.ceil或math.round方法。其实可使用~~运算符来消除数字的小数部分，其速度远快于那些数字方法。


~~3.1415926  // 3

该运算符用途广泛，通常用于将变量转化为数字类型，不同类型的转化结果各异：

若为数字类型的字符串，将转化为纯数字；
若字符串包含数字之外的值，将转化为0；
若为布尔类型，true返回1，false返回0；

除上述方式外，还可使用按位与来实现数字取整操作，只需在数字后加上|0即可：


23.9 | 0   // 23
-23.9 | 0   // -23

此操作直接去除数字后的小数。该方法与前述方法类似，性能均优于JavaScript的API。

17. 删除数组元素

若需删除数组中的一个元素，可使用delete实现，但删除后的元素会变为undefined，并未消失，且执行时消耗大量时间，多数情况下无法满足需求。因此可使用数组的splice()方法来删除数组元素：


const array = ["a", "b", "c", "d"] 
array.splice(0, 2) // ["a", "b"]

18. 检查对象是否为空

若需检查对象是否为空，可使用以下方式：


Object.keys({}).length  // 0
Object.keys({key: 1}).length  // 1

Object.keys()方法用于获取对象的key，会返回包含这些key值的数组。若返回的数组长度为0，则对象肯定为空。

19. 使用 switch case 替换 if/else

switch case 相对于 if/else 执行性能更高，代码看起来会更加清晰。


if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;} 
else if (5 == month) {days = 31;} 
else if (6 == month) {days = 30;} 
else if (7 == month) {days = 31;} 
else if (8 == month) {days = 31;} 
else if (9 == month) {days = 30;} 
else if (10 == month) {days = 31;} 
else if (11 == month) {days = 30;} 
else if (12 == month) {days = 31;}

使用switch...case来改写：


switch(month) {
        case 1: days = 31; break;
        case 2: days = IsLeapYear(year) ? 29 : 28; break;
        case 3: days = 31; break;
        case 4: days = 30; break;
        case 5: days = 31; break;
        case 6: days = 30; break;
        case 7: days = 31; break;
        case 8: days = 31; break;
        case 9: days = 30; break;
        case 10: days = 31; break;
        case 11: days = 30; break;
        case 12: days = 31; break;
        default: break;
}

看起来相对简洁。可根据情况，使用数组或对象来改写if...else。

20. 获取数组中的最后一项

若需获取数组中的最后一项，很多时候会这样来写：


const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]  // 5

其实还可使用数组的slice方法来获取数组的最后一个元素：


arr.slice(-1)

当将slice方法的参数设置为负值时，就会从数组后面开始截取数组值，若需截取后两个值，参数传入-2即可。

21. 值转为布尔值

在JavaScript中，以下值在布尔值转化时均会转化为false，其他值会转化为true：

undefined
null
0
-0
NaN
""

通常若需显式将值转化为布尔值，会使用Boolean()方法进行转化。其实可使用!!运算符来将一个值转化为布尔值。我们知道，一个！是将对象转为布尔型并取反，两个！是将取反后的布尔值再取反，相当于直接将非布尔类型值转为布尔类型值。此操作相对于Boolean()方法性能会快很多，因为它是计算机的原生操作：


!!undefined // false
!!"996"     // true
!!null      // false
!!NaN       // false

22. 格式化 JSON 代码

想必大家都使用过JSON.stringify方法，该方法可将一个 JavaScript 对象或值转换为 JSON 字符串。其语法如下：


JSON.stringify(value, replacer, space)

它包含三个参数：

value：将要序列化成一个 JSON 字符串的值。
replacer 可选：若该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；若该参数是一个数组，则仅包含在此数组中的属性名才会被序列化到最终的 JSON 字符串中；若该参数为 null 或者未提供，则对象所有属性都会被序列化。
space 可选：指定缩进用的空白字符串，用于美化输出（pretty-print）；若参数是数字，代表空格数量；上限为10。该值若小于1，则意味着没有空格；若该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；若该参数没有提供（或者为 null），将没有空格。

通常情况下，我们都只写一个参数来将一个 JavaScript 对象或值转换为 JSON 字符串。可以看到它还有两个可选参数，因此我们可以利用这两个参数来格式化JSON代码：


console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));

输出结果如下：

1. 初始化数组

23. 避免使用eval()和with()

with() 会在全局范围内插入一个变量。因此，若另一个变量具有相同的名称，则可能会导致混淆并覆盖该值。
eval() 是比较昂贵的操作，每次调用它时，脚本引擎都必须将源代码转换为可执行代码。

24. 函数参数使用对象而不是参数列表

当使用参数列表给函数传递参数时，若参数较少尚可，若参数较多则较为麻烦，因为必须按照参数列表的顺序来传递参数。若使用TypeScript来写，那么编写时还需让可选参数排在必选参数的后面。

若函数参数较多，可考虑使用对象形式来传递参数。对象形式传递参数时，传递可选参数无需放在最后，且参数顺序不再重要。与参数列表相比，通过对象传递的内容也更容易阅读和理解。

下面来看一个例子：


function getItem(price, quantity, name, description) {}

getItem(15, undefined, 'bananas', 'fruit')

下面来使用对象传参：


function getItem(args) {
    const {price, quantity, name, description} = args
}

getItem({
    name: 'bananas',
    price: 10,
    quantity: 1, 
    description: 'fruit'
})

到此这篇关于24个实用JavaScript 开发技巧的文章就介绍到这了,更多相关JavaScript 开发技巧内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00