12个实用的JavaScript代码优化技巧

作者：代码拾荒时间：2026-10-22 04:03:53浏览：343

本文整理了12个JavaScript开发中的实用技巧，涵盖类型转换、短路运算、数组处理及性能优化等方面。通过双否定运算符、加号转换、短路逻辑、默认值设置、循环缓存、属性检测、数组截取与替换、合并、NodeList转换及洗牌算法，帮助开发者编写更简洁高效的代码。

JavaScript代码优化技巧概览

本文分享了12个极具实用价值的JavaScript技巧，旨在帮助开发者精简代码结构并提升执行效率。

类型转换与默认值处理技巧

1. 利用双否定运算符转换布尔值

在验证变量是否存在或具备有效值时，常需将其视为布尔类型。此时可使用双否定运算符（!!），它能自动将各类数据转换为布尔值。仅当变量值为0、null、空字符串（""）、undefined或NaN时返回false，其余情况均返回true。示例如下：


function Account(cash) { 
 this.cash = cash; 
 this.hasMoney = !!cash; 
} 
var account = new Account(100.50); 
console.log(account.cash); // 100.50 
console.log(account.hasMoney); // true 
var emptyAccount = new Account(0); 
console.log(emptyAccount.cash); // 0 
console.log(emptyAccount.hasMoney); // false

如上例所示，若account.cash的值大于零，则account.hasMoney将被赋值为true。

2. 利用加号运算符转换数字

此转换方式极为简便，但仅适用于数字字符串，否则将返回NaN（非数字）。参考示例：


function toNumber(strNumber) { 
 return +strNumber; 
} 
console.log(toNumber("1234")); // 1234 
console.log(toNumber("ACB")); // NaN

该转换操作同样适用于Date对象，此时将返回对应的时间戳：


console.log(+new Date()) // 1461288164385

条件判断与短路运算优化

3. 利用短路逻辑简化条件判断

若见过如下形式的代码：


if (conected) { 
 login(); 
}

可使用&&（AND运算符）将两个变量间的逻辑缩短为一行代码。例如，前文代码可简化为：


conected && login();

此方法也可用于检查对象中是否存在特定属性或函数，类似代码如下：


user && user.login();

4. 利用OR运算符设置默认值

ES6引入了默认参数功能。为兼容旧版浏览器，可利用||（OR运算符）模拟该功能，将默认值作为第二个参数。若第一个参数返回false，则返回第二个参数作为默认值。示例如下：


function User(name, age) { 
 this.name = name || "Oliver Queen"; 
 this.age = age || 27; 
} 
var user1 = new User(); 
console.log(user1.name); // Oliver Queen 
console.log(user1.age); // 27 
var user2 = new User("Barry Allen", 25); 
console.log(user2.name); // Barry Allen 
console.log(user2.age); // 25

数组性能优化与操作技巧

5. 在循环中缓存数组长度

此技巧虽简单，但在处理大数组时能显著避免性能损耗。通常，人们使用for循环遍历数组的方式如下：


for (var i = 0; i < array.length; i++) { 
 console.log(array[i]); 
}

若处理小数组影响不大，但面对大数组时，每次循环重复计算数组大小会产生延迟。为避免此问题，可将array.length缓存至变量中，循环时直接使用该缓存值：


var length = array.length; 
for (var i = 0; i < length; i++) { 
 console.log(array[i]); 
}

为求简洁，可进一步简化为：


for (var i = 0, length = array.length; i < length; i++) { 
 console.log(array[i]); 
}

属性检测与DOM节点处理

6. 检测对象属性是否存在

当需检查属性是否存在以避免调用未定义的函数或属性时，此技巧尤为有用。编写跨浏览器代码时亦常需此技术。例如，假设需编写兼容旧版Internet Explorer 6的代码，并希望通过document.querySelector()按ID获取元素。然而，现代浏览器中该函数可能不存在。因此，可使用in运算符检查该函数是否存在，示例如下：


if ('querySelector' in document) { 
 document.querySelector("#id"); 
} else { 
 document.getElementById("id"); 
}

在此情况下，若document中不存在querySelector函数，则回退使用document.getElementById()。

7. 获取数组最后一个元素

Array.prototype.slice（begin，end）可用于裁剪数组。若未设置结束参数end的值，该函数会自动将end设为数组长度。鲜有人知该函数可接受负值，若将begin设为负数，即可获取倒数元素：


var array = [1, 2, 3, 4, 5, 6]; 
console.log(array.slice(-1)); // [6] 
console.log(array.slice(-2)); // [5,6] 
console.log(array.slice(-3)); // [4,5,6]

8. 截断数组

此技术可用于固定数组大小，适用于需删除数组中固定数量元素的场景。例如，若有一个包含10个元素的数组，但仅需前五个元素，可通过设置array.length = 5来截断数组。示例如下：


var array = [1, 2, 3, 4, 5, 6]; 
console.log(array.length); // 6 
array.length = 3; 
console.log(array.length); // 3 
console.log(array); // [1,2,3]

字符串替换与数组合并策略

9. 全局替换字符串

String.replace()函数允许使用String和Regex进行字符串替换，但该函数默认仅替换第一个匹配项。可在正则表达式末尾添加/g来模拟replaceAll()函数：


var string = "john john"; 
console.log(string.replace(/hn/, "ana")); // "joana john" 
console.log(string.replace(/hn/g, "ana")); // "joana joana"

10. 合并数组

若需合并两个数组，可使用Array.concat()函数：


var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

然而，该函数处理大数组时并不理想，因其会创建新数组并消耗大量内存。此时，可使用Array.push.apply（arr1，arr2），它不会创建新数组，而是将第二个数组合并至第一个数组中，从而减少内存占用：


var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

11. 将NodeList转换为数组

运行document.querySelectorAll("p")函数会返回DOM元素数组，即NodeList对象。但该对象缺乏sort()、reduce()、map()、filter()等数组特有函数。为启用这些函数及其他原生数组方法，需将NodeList转换为数组。转换方法如下：[] .slice.call（elements）：


var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

数组洗牌与总结

12. 数组元素洗牌

若需像外部库Lodash那样对数据元素进行随机重排，可使用此技巧：


var list = [1, 2, 3];  
console.log(list.sort(function() {  
  return Math.random() - 0.5 
})); // [2,1,3]

结论

至此，你已掌握若干实用的JS技巧，主要用于缩减JavaScript代码量。其中部分技巧被Lodash、Underscore.js、Strings.js等流行JS框架广泛采用。若你知晓其他JS技巧，欢迎分享！

作者最新文章

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