JavaScript length 属性（建议收藏）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，length 属性是一个高频使用且功能强大的工具。无论是处理字符串、遍历数组，还是分析函数参数，length 属性都能帮助开发者快速获取数据的“尺寸”信息。然而，这个看似简单的属性背后，隐藏着许多细节和潜在的陷阱。本文将从基础概念出发，结合实例深入剖析 JavaScript length 属性 的使用场景、注意事项及进阶技巧，帮助开发者避免常见误区，提升代码质量。

一、length 属性的基础概念

length 属性是 JavaScript 中用于描述数据长度的核心属性之一，但它并非一个静态值，而是根据数据内容动态变化的。其核心作用是返回当前数据结构中元素或字符的数量。

适用的数据类型

length 属性在以下场景中会被广泛使用：

1. 字符串：返回字符串中字符的数量。
2. 数组：返回数组中元素的数量。
3. 函数：返回函数定义时声明的参数数量（不包括默认参数）。

二、字符串的 length 属性：字符数量与编码陷阱

字符串的 length 属性看似简单，但实际使用中需注意以下细节：

1. 基础用法

const str = "Hello World!";  
console.log(str.length); // 输出：12  

此代码返回字符串中字符的总数，每个字符（包括空格、标点符号）均计为 1。

2. Unicode 字符的特殊性

对于多字节字符（如表情符号或某些非拉丁字符），length 属性可能与直观认知不符。例如：

const emoji = "🌍"; // 地球表情符号  
console.log(emoji.length); // 输出：2（因 Unicode 编码占用 2 个代码单元）  

比喻：
可以将字符串想象成一串珠子，每个珠子代表一个字符。对于普通字符，每颗珠子占 1 个位置；但某些特殊字符可能由两颗珠子拼接而成，导致 length 值比预期大。

3. 不可修改性

字符串的 length 属性是只读的，尝试修改会导致错误：

let str = "JavaScript";  
str.length = 5; // 报错：Cannot set property 'length' of string  

三、数组的 length 属性：动态调整与元素管理

数组的 length 属性更灵活，它不仅是元素数量的“计数器”，还能通过修改 length 值实现数组的扩展或截断。

1. 获取元素数量

const arr = [10, 20, 30];  
console.log(arr.length); // 输出：3  

2. 修改 length 的影响

• 缩短数组：若将 length 设为比当前元素少的值，超出的部分将被删除。

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

• 扩展数组：若将 length 设为更大的值，数组会填充 undefined 元素。

  const arr = [1, 2];  
  arr.length = 5;  
  console.log(arr); // 输出：[1, 2, undefined, undefined, undefined]  
  

比喻：
数组的 length 属性就像一个可伸缩的书架，调整长度时，书架会自动扩展或收缩，超出部分的“隔间”会被清空或填充为空架子。

3. 结合循环遍历

通过 length 属性，可以高效遍历数组：

const arr = ["apple", "banana", "cherry"];  
for (let i = 0; i < arr.length; i++) {  
  console.log(arr[i]);  
}  
// 输出：apple, banana, cherry  

四、函数的 length 属性：参数数量的“指纹”

函数的 length 属性返回函数定义时声明的必需参数数量，但不包括默认参数或可选参数。

1. 基础示例

function add(a, b) {  
  return a + b;  
}  
console.log(add.length); // 输出：2  

2. 默认参数的影响

即使函数参数带有默认值，length 仍仅统计必需参数的数量：

function greet(name = "Guest") {  
  return `Hello, ${name}!`;  
}  
console.log(greet.length); // 输出：0（因为 name 有默认值，非必需）  

3. 动态参数与 arguments 的区别

函数的 length 属性与 arguments.length（函数内部的参数数量）不同：

function multiply(a, b) {  
  console.log(multiply.length); // 2  
  console.log(arguments.length); // 根据调用时的参数数量变化  
}  
multiply(3); // 输出：arguments.length → 1  

五、高级用法与常见误区

1. 数组的 length 与 push() 的结合

通过修改 length 可以快速填充数组，但需注意与 push() 的区别：

let arr = [1, 2];  
arr.length = 4; // 填充两个 undefined  
arr.push(3);    // 现在 arr → [1, 2, undefined, undefined, 3]  

2. 字符串截断的技巧

利用 length 属性可以实现字符串的截断功能：

function truncate(str, maxLength) {  
  return str.length > maxLength ? str.slice(0, maxLength) + "…" : str;  
}  
console.log(truncate("Hello JavaScript", 5)); // 输出："Hello…"  

3. 常见误区

• 误区 1：误以为所有数据类型都有 length 属性。

  const obj = { name: "Alice" };  
  console.log(obj.length); // 输出：undefined  
  

  注意：对象没有内置的 length 属性，需手动添加或通过其他方式统计。

• 误区 2：修改数组 length 后未处理 undefined 元素。

  const arr = [1, 2, 3];  
  arr.length = 5; // 此时 arr[3] 和 arr[4] 是 undefined  
  // 若后续需要遍历有效元素，建议使用 for...of 或 filter  
  

六、进阶应用场景

1. 动态调整数组大小

在需要动态扩容或缩小数组时，直接修改 length 属性比手动操作更高效：

let buffer = new Array(10); // 创建长度为 10 的空数组  
buffer.length = 0;         // 清空数组而不保留空元素  

2. 函数参数验证

利用函数的 length 属性确保参数数量符合预期：

function calculate(a, b) {  
  if (arguments.length < calculate.length) {  
    throw new Error("参数不足");  
  }  
  return a * b;  
}  
calculate(5); // 抛出错误  

结论

JavaScript length 属性 是开发者工具箱中的核心工具之一，其应用场景从基础的字符串操作到复杂的数组和函数管理均不可或缺。通过理解不同数据类型下 length 的行为差异，开发者可以避免常见陷阱，写出更健壮、高效的代码。

掌握 length 属性 的关键是：

1. 熟悉其在字符串、数组、函数中的不同表现；
2. 注意修改 length 带来的副作用（如数组填充 undefined）；
3. 结合实际需求，灵活运用其动态特性。

建议读者通过实际项目或练习，进一步巩固对 JavaScript length 属性 的理解，逐步将其内化为开发习惯。