论JavaScript中的length属性|极客笔记

论JavaScript中的length属性

在JavaScript中，我们经常会使用length属性来获取数组长度、字符串长度等。然而，length属性的工作原理并不总是那么直观，本文将详细讨论length属性在不同情况下的表现，以帮助读者更好地理解和使用它。

在数组中，length属性表示数组的元素个数。当我们向数组中添加新元素时，length属性会自动更新。例如：

let arr = [1, 2, 3];
console.log(arr.length); // 输出 3

arr.push(4);
console.log(arr.length); // 输出 4

通过上面的示例可以看到，数组中的length属性会根据数组的元素个数自动调整。但需要注意的是，length属性并不总是等同于数组中的元素个数。例如：

let arr = [1, 2, 3];
arr.length = 2;
console.log(arr); // 输出 [1, 2]

在上面的示例中，我们手动将数组的length属性设置为2，导致数组的最后一个元素被裁剪掉了。

此外，还有一种情况需要注意：

let arr = [1, 2, 3];
arr[5] = 6;
console.log(arr.length); // 输出 6

在这个示例中，我们手动将数组索引为5的位置赋值为6，这会导致数组长度被调整为6。但需要注意的是，数组索引为4的位置是空的，实际上并不存在这个元素。

在字符串中，length属性表示字符串的字符个数。例如：

let str = 'hello';
console.log(str.length); // 输出 5

此外，值得注意的是，对于Unicode字符，每个字符可能由多个字节组成。因此，对于包含Unicode字符的字符串，length属性并不总是等同于字符串的实际长度。例如：

let str = '😊';
console.log(str.length); // 输出 2

在这个示例中，字符串'😊'实际上只包含一个表情符号，但其length属性为2，因为表情符号由两个字节组成。

除了数组和字符串，一些对象也具有类数组的特性，可以使用length属性。例如，DOM中的NodeList对象就有length属性，表示节点列表的长度。例如：

let nodeList = document.querySelectorAll('div');
console.log(nodeList.length); // 输出节点列表中div元素的个数

需要注意的是，虽然NodeList对象具有类数组的特性，但它并非真正的数组，因此使用length属性时需要注意一些细节。

在函数中，arguments对象是一个类数组对象，其中存储了函数被调用时传入的参数。arguments对象也具有length属性，表示传入参数的个数。例如：

function foo() {
    console.log(arguments.length);
}

foo(1, 2, 3); // 输出 3

在这个示例中，函数foo被调用时传入了3个参数，因此arguments.length为3。

需要注意的是，arguments对象是一个类数组对象，可以通过索引来访问其中的参数。但在ES6之后，推荐使用Rest参数来获取函数的传入参数，而不是依赖arguments对象。

本文详细讨论了JavaScript中的length属性在不同情况下的表现，包括数组、字符串、类数组对象以及函数中的arguments对象等。length属性在不同情况下有不同的含义和行为，使用时需要根据具体情况加以区分和注意。