你不知道的 length属性之JavaScript基础

实例属性:在面向对象编程（OOP）中，实例属性是指属于对象（实例）的属性。它们是类的一个实例特有的数据，用于存储对象的状态或特征。每个实例属性都是特定对象的一部分，不同的对象可以有不同的实例属性值，即使它们是由同一个类创建的。

1. Array.length (实例属性)

length 是 Array 的实例属性，表示该数组中元素的个数。该值是一个无符号 32 位整数，并且其数值总是大于数组最大索引。

值: 一个小于 2^32 的非负整数。

`Array：length` 的属性特性
可写	是
可枚举	否
可配置	否

数组对象会观察 length 属性，并自动将 length 值与数组的内容同步。这意味着：

设置 length 小于当前长度的值将会截断数组——超过新 length 的元素将被删除。
设置超过当前 length 的任何数组索引（小于 232 的非负整数）将会扩展数组——length 属性增加以反映新的最高索引。
将 length 设置为无效值（例如负数或非整数）会引发 RangeError 异常。

当 length 被设置为比当前长度更大的值时，数组通过添加空槽来扩展，而不是实际的 undefined 值。空槽与数组方法有一些特殊的交互作用；详见数组方法和空槽。

扩展数组

javascript" style="color:rgb(56,58,66);background:rgb(250,250,250);line-height:22px;font-size:14px;font-family:'Source Code Pro', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Anonymous Pro', 'Droid Sans Mono', Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif;">const arr = [1, 2];
console.log(arr);
// [ 1, 2 ]arr.length = 5; // 将数组长度设置为 5，而当前为 2。
console.log(arr);
// [ 1, 2, <3 empty items> ]arr.forEach((element) => console.log(element));
// 1
// 2

截断数组

javascript" style="color:rgb(56,58,66);background:rgb(250,250,250);line-height:22px;font-size:14px;font-family:'Source Code Pro', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Anonymous Pro', 'Droid Sans Mono', Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif;">const numbers = [1, 2, 3, 4, 5];if (numbers.length > 3) {numbers.length = 3;
}console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3
console.log(numbers[3]); // undefined；多余的元素会被删除

创建固定长度的空数组

将 length 设置为大于当前长度的值将会创建一个稀疏数组。

javascript" style="color:rgb(56,58,66);background:rgb(250,250,250);line-height:22px;font-size:14px;font-family:'Source Code Pro', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Anonymous Pro', 'Droid Sans Mono', Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif;">const numbers = [];
numbers.length = 3;
console.log(numbers); // [empty x 3]

String：length (实例属性)

String 类型的 length 数据属性表示字符串的 UTF-16 码元长度。

值:一个非负整数

`string：length` 的属性特性
可写	否
可枚举	否
可配置	否

对于空字符串，length 为 0。

静态属性 String.length 与字符串的长度无关。它是 String 函数的参数数量（简单地说，就是它有多少个形参），也就是 1。

由于 length 统计的是码元而不是字符 --> 码原是指在字符编码中用于表示一个字符的基本单位。它是字符在计算机内存中存储的最小单元,有兴趣的可以去了解下

基本用法

javascript" style="color:rgb(56,58,66);background:rgb(250,250,250);line-height:22px;font-size:14px;font-family:'Source Code Pro', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Anonymous Pro', 'Droid Sans Mono', Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif;">const x = "Mozilla";
const empty = "";console.log(`${x} 有 ${x.length} 个码元`);
// Mozilla 有 7 个码元console.log(`空字符串的 length 为 ${empty.length}`);
// 空字符串的 length 为 0

长度不等于字符数的字符串(了解即可)

javascript" style="color:rgb(56,58,66);background:rgb(250,250,250);line-height:22px;font-size:14px;font-family:'Source Code Pro', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Anonymous Pro', 'Droid Sans Mono', Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif;">const emoji = "😄";
console.log(emoji.length); // 2
console.log([...emoji].length); // 1
const adlam = "𞤲𞥋𞤣𞤫";
console.log(adlam.length); // 8
console.log([...adlam].length); // 4
const formula = "∀𝑥∈ℝ,𝑥²≥0";
console.log(formula.length); // 11
console.log([...formula].length); // 9

Function：length

funtion 实例的 length 数据属性表示函数期望的参数数量。

值:一个数字。

`Function：length` 的属性特性
可写	否
可枚举	否
可配置	是

一个 Funtion 对象的 length 属性表示函数期望的参数个数，即形参的个数。这个数字不包括剩余参数，只包括在第一个具有默认值的参数之前的参数。相比之下，arguments.length 是局限于函数内部的，它提供了实际传递给函数的参数个数。

示例

javascript" style="color:rgb(56,58,66);background:rgb(250,250,250);line-height:22px;font-size:14px;font-family:'Source Code Pro', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Anonymous Pro', 'Droid Sans Mono', Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif;">console.log(Function.length); // 1console.log((() => {}).length); // 0
console.log(((a) => {}).length); // 1
console.log(((a, b) => {}).length); // 2，依此类推console.log(((...args) => {}).length);
// 0，剩余参数不计算在内console.log(((a, b = 1, c) => {}).length);
// 1，只计算第一个具有默认值的参数之前的参数