前言
在JavaScript开发中，我们经常需要遍历字符串或数组，并在循环条件中使用 .length 属性来判断循环是否应该继续。通常，我们会看到这样的代码：
var str = "abcdefg";
for (let i = 0; i < str.length; i++) {
// do something with str[i]
}
但有经验的开发者会建议你将字符串的长度存储在一个变量中，以提高循环的效率：
var str = "abcdefg";
for (let i = 0, len = str.length; i < len; i++) {
// do something with str[i]
}
从表面上看，这样的建议似乎多此一举，毕竟 .length 属性的获取似乎是一个简单的操作。但是，当你了解了JavaScript中涉及的底层机制时，你会发现这样做是有其深刻原因的。
1. JavaScript的原始数据类型与包装类
JavaScript的原始数据类型（也称为基本数据类型）包括字符串（String）、数字（Number）、布尔值（Boolean）、未定义（Undefined）、空（Null）、Symbol，以及ES2020引入的BigInt。这些原始数据类型本身不具备属性和方法。
然而，在JavaScript中，我们经常使用字符串的 .length 属性，或者调用字符串上的方法，比如 .toUpperCase()。这是因为JavaScript为原始数据类型提供了包装类，使得这些基本类型可以像对象一样拥有方法和属性。
当你访问一个字符串的 .length 属性时，JavaScript会在幕后进行以下操作：
- 创建一个临时的
String对象，该对象包装了原始的字符串值。 - 通过这个对象获取
.length属性的值。 - 在获取值后，销毁这个临时的
String对象。
每次访问 .length 时，这一过程都会重复进行。
2. 循环中的性能问题
在一个简单的循环中，如果每次循环都需要访问 .length 属性，那么每次迭代时，JavaScript都会重复上述的包装和销毁过程。这在字符串较短、循环次数较少时，性能影响可能不大；但当处理大量数据或循环次数非常多时，这些重复的操作可能会累积成明显的性能损耗。
通过将 .length 的值预先存储在一个变量中，可以避免在每次循环中都执行创建和销毁 String 对象的过程，从而提高效率。
3. 性能测试与实际影响
为了更好地理解这两种方法的性能差异，以下是一个简单的性能测试代码：
function test1(str) {
let time1 = Date.now();
for (let i = 0; i < str.length; i++) { }
let time2 = Date.now();
return time2 - time1;
}
function test2(str) {
let time1 = Date.now();
for (let i = 0, len = str.length; i < len; i++) { }
let time2 = Date.now();
return time2 - time1;
}
var str = "a".repeat(1000000); // 创建一个100万字符的字符串
console.log(test1(str)); // 测试直接使用str.length
console.log(test2(str)); // 测试先存储str.length
当字符串长度较小时，这两种方法的时间差异几乎可以忽略不计。然而，当字符串长度达到数百万级别时，使用预存变量的方法通常会稍微快一些。
虽然在现代的JavaScript引擎中，许多优化机制已经减轻了这些性能差异，但在一些性能关键的应用中，特别是当你处理非常大的数据集时，提前存储 .length 的值仍然是一个明智的做法。
4. 其他类似情况
这种优化思路不仅仅适用于字符串的 .length，也适用于数组或其他可以多次访问长度属性的场景。例如，在遍历数组时，类似的优化建议也是有效的：
var arr = [1, 2, 3, 4, 5];
for (let i = 0, len = arr.length; i < len; i++) {
// do something with arr[i]
}
结语
在JavaScript开发中，理解底层机制可以帮助我们写出更高效的代码。虽然现代引擎已经对很多性能瓶颈进行了优化，但在处理大型数据集或频繁的循环操作时，合理地优化代码仍然有助于提升程序的性能。通过预先存储字符串或数组的长度，我们可以减少不必要的计算，从而编写出更高效的代码。希望这篇文章能帮助你更好地理解JavaScript中的性能优化技巧，让你的代码更加优雅高效。
