讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript的变量和数据类型有哪些_如何正确声明和使用它们【教程】

雨伟小哥_3725

雨伟小哥_3725

发布时间:2026-01-17 19:17:02

|

511人浏览过

|

来源于php中文网

原创

JavaScript变量与数据类型需持续实践:var/let/const核心区别在作用域、提升和重复声明规则;原始类型7种,typeof和instanceof有局限;TDZ导致let/const块内提前访问报错;BigInt和Symbol各有使用边界;类型安全依赖工具而非死记。

javascript的变量和数据类型有哪些_如何正确声明和使用它们【教程】

JavaScript 的变量和数据类型不是“学完就一劳永逸”的知识,而是日常写代码时高频踩坑的源头。能不能正确声明、用对类型、避开隐式转换陷阱,直接决定你写的逻辑是否可靠。

var / let / const 到底该选哪个?

三者本质区别不在“能不能重新赋值”,而在**作用域、提升(hoisting)行为和重复声明规则**:

  • var 会函数作用域提升,且允许重复声明 —— 容易导致意外覆盖或 undefined 访问
  • let 和 const 是块级作用域,不提升(但存在“暂时性死区”),不允许重复声明
  • const 不代表“值不可变”,只代表“绑定不可重赋”;对象/数组本身仍可修改属性或元素

实操建议:

Browser Js
Browser Js

轻量级CDP浏览器控制,适用于AI代理。相较于内置浏览器工具,token消耗降低3‑10倍,仅在浏览时使用。

下载
  • 默认用 const,除非明确需要重新赋值(比如循环计数器),再换 let
  • 彻底弃用 var,尤其在函数外或嵌套块中,它带来的混乱远大于兼容性收益
  • 声明即初始化,避免 const obj = {}; 后又反复 obj.a = 1 这类弱约束写法 —— 改用 Object.freeze() 或 TypeScript 类型约束更可靠

7 种原始类型 + Object,但 typeof 和 instanceof 经常撒谎

原始类型有:string、number、boolean、null、undefined、symbol、bigint;其余都是 object(包括 Array、Date、RegExp、Promise,甚至 null!)

立即学习“Java免费学习笔记(深入)”;

这意味着:

  • typeof null === 'object' 是历史 bug,至今未修复
  • typeof []、typeof new Date()、typeof /abc/ 全是 'object',无法区分
  • instanceof 在跨 iframe 场景下失效(不同全局环境的 Array 构造函数不等价)

实操建议:

  • 判断数组用 Array.isArray(),别信 typeof 或 instanceof Array
  • 判断日期、正则等内置对象,优先用 Object.prototype.toString.call(x),例如:
    Object.prototype.toString.call(new Date()) // '[object Date]'
  • 检查 null 必须显式写 x === null,不能靠 !x(因为 undefined、0、'' 也假)

let 声明的变量为什么在块内访问会报 ReferenceError?

这不是 bug,是设计:let 和 const 存在“暂时性死区”(TDZ)。从块开始到声明语句执行前,变量处于不可访问状态。

常见错误现象:

  • console.log(a); // ReferenceError
    let a = 1;
  • 在 for 循环中误以为每次迭代都新建变量,实际是每次迭代绑定新值 —— 闭包里取 i 仍是最后一个值(需用 let 声明在循环体内才真正隔离)

实操建议:

  • 声明尽量靠近首次使用位置,避免跨多行“悬空”声明
  • 不要依赖 TDZ 报错来检测变量是否存在 —— 应该用 in 操作符或 hasOwnProperty 查属性,用 typeof x === 'undefined' 查变量是否声明(仅限 var)
  • 想实现“块级私有”,用 { let x = ... } 包裹,而不是靠注释或命名约定

BigInt 和 Symbol 容易被忽略的使用边界

BigInt 解决大整数精度丢失,但代价是不能和 number 混算;Symbol 保证唯一性,但不等于“私有”。

常见误区:

  • 1n + 1 直接报错,必须写成 1n + 1n;Math.max(1n, 2n) 也不行 —— BigInt 不参与大多数内置数学函数
  • Symbol('foo') === Symbol('foo') 是 false,但 Symbol.for('foo') === Symbol.for('foo') 是 true —— 后者注册到全局符号注册表,慎用
  • Symbol 属性不会出现在 for...in、Object.keys() 中,但能被 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 拿到 —— 所谓“隐藏”只是遍历 API 的盲区

实操建议:

  • 处理 ID、时间戳、加密哈希等可能超 Number.MAX_SAFE_INTEGER(9007199254740991)的整数时,才引入 BigInt;日常计数、索引继续用 number
  • 用 Symbol 做对象属性名时,把 symbol 存在模块顶层常量里,避免散落各处造成维护困难
  • 别指望 Symbol 防止外部访问 —— 真要封装,用闭包或 #privateField(ES2022 私有字段)

类型系统松散是 JavaScript 的特点,也是它的负担。真正难的不是记住 typeof null 返回什么,而是在读别人代码或调试异步链时,能一眼识别出某个 value 是 string 还是 number 还是 Promise<string> —— 这时候,类型注解(JSDoc)、运行时校验(如 zod)、或者直接上 TypeScript,比死记规则管用得多。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

292

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

500

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

351

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

266

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

538

2026.06.16

数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2711

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

534

2025.10.31

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

462

2026.02.12

C++运算符基础入门
C++运算符基础入门

本专题详细讲解了C++运算符的类型、语法与使用方法,涵盖算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符、条件运算符及其他特殊运算符,并通过代码示例解析优先级与结合性。

0

2026.10.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn