Web-Dev-For-Beginners JavaScript 数据类型详解变量、常量与核心类型实战指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文是 Web-Dev-For-Beginners 课程12 周、24 课时中第 04 课JavaScript Basics: Data Types的完整技术解析。内容聚焦 JavaScript 数据类型这一语言基石let/const声明与赋值语义、7 种原始类型、算术运算符、字符串拼接与模板字符串、布尔值与 truthy/falsy 规则并结合本课程 typing game、terrarium 项目的真实源码验证这些基础知识在实际 Web 项目中的用法。读完后你将能够独立声明与使用变量、区分常量的引用保护与值可变性、解释1 1 11等隐式类型转换行为并能用浏览器控制台快速验证一切概念。课程定位数据类型在 Web 开发中的角色在课程的 JavaScript 基础模块总览 中数据类型是 4 个 JS 基础课时中的第一课后续依次是函数与方法、条件判断、数组与循环。数据类型之所以被放在最前面是因为不同运算作用于不同类型的数据正如无法对人的姓名做算术运算JavaScript 也要求每种操作使用恰当的数据类型。理解这一点能避免错误、让代码更可靠——这是后续所有 JS 课程以及 terrarium、typing game、space game 等项目的前提。本课的学习路径可概括为三个阶段阶段掌握目标Foundation基础变量与常量、声明语法、赋值概念Core Types核心类型数字与数学运算、字符串与文本、布尔与逻辑Apply Knowledge应用类型转换、真实场景示例、最佳实践原课程配有课前/课后测验与配套视频本仓库中所有课程测验均收录在quiz-app目录下共 48 套、每套 3 题可本地运行或部署参见 quiz-app 说明。变量声明、赋值与重新赋值变量是编程的基本构件让你把信息存起来并起一个描述性名字以便日后引用记一个人的年龄就存在age里追踪用户名就存在userName里。创建并声明变量的语法为[关键字] [名字]由两部分组成关键字会变化的值用let固定不变的值用const变量名自己选择的、有描述性的名字。let是 ES6 引入的关键字为变量提供所谓的块级作用域block scope因此推荐用let或const代替老旧的var块级作用域在课程后续章节深入讲解。声明 → 赋值 → 重新赋值原课程将变量操作拆成四个递进步骤完整继承如下1. 声明变量let myVariable;这一步完成的事告诉 JavaScript 创建一个叫myVariable的存储位置JavaScript 为它在内存中分配空间此时变量还没有值即undefined。2. 赋初值myVariable 123;是赋值运算符把值 123 赋给变量注意这里的不是数学里的相等而是赋值变量不再处于 undefined 状态之后可以在代码任何位置用myVariable引用这个值。3. 一步到位标准做法let myVariable 123;声明和赋值合并为一条语句是开发者的标准实践代码更短且保持清晰。4. 重新赋值可变性myVariable 321;变量现在包含 321 而非 123——变量同一时刻只保存一个值旧值被替换。可被重新赋值正是let声明变量的核心特征。原课程给出的变量状态流转可表述为let myVar声明无值→myVar 123含值 123→myVar 456更新值。动手验证在浏览器中打开开发者工具F12的控制台输入let myVariable 123回车后再输入myVariable即可看到 123。控制台是本课程所有概念的天然实验场。变量自检问题能否解释声明变量与给变量赋值的区别在未声明前就使用变量会发生什么什么场景下你选let而不是const常量引用受保护但值不一定不可变需要存储程序运行期间绝不应改变的信息时用常量。常量的不可变性防止关键值被意外修改。常量声明与变量概念相同只是关键字换成const且命名惯例是全大写const MY_VARIABLE 123;这行代码创建了名为MY_VARIABLE的常量值为 123并禁止后续任何更改。常量有两条核心规则必须立即赋值——不允许空常量值永远不能变——JavaScript 会抛错。但这里的值需要精确理解原课程用三组对比代码讲清楚了边界简单值重新赋值不允许const PI 3; PI 4; // 报错not allowed对常量重新赋值的尝试会引发错误保护重要值免于被意外更改确保值在整个程序中保持一致。对象引用替换整个对象不允许const obj { a: 3 }; obj { b: 5 } // 报错not allowed防止用新对象替换整个对象保护的是对原对象的引用维持该对象在内存中的身份不变。对象内容修改属性允许const obj { a: 3 }; obj.a 5; // 允许allowed修改的是对象内部的属性值对象引用保持不变说明对象内容可以变化而引用保持恒定。关键结论const保护的是引用不被重新赋值值本身并非 immutable——尤其当它是对象这类复杂结构时。这一点在 space game 课程 处理游戏状态时会被反复用到。7 种原始数据类型JavaScript 把信息组织成不同类别即数据类型。变量可以存储数字、文本等不同类型的值这些值的种类就是数据类型。数据类型之所以重要是因为它帮助开发者决定代码如何写、软件如何运行且某些类型有独特能力帮助转换值或从中提取更多信息。原始类型primitiveJavaScript data primitives是语言提供的最底层数据类型共7 种类型示例说明stringHello、World、Template文本单引号、双引号或反引号界定number42、3.14、-5整数与浮点数统一处理bigint9007199254740991n超大整数进阶booleantrue、false二值逻辑undefinedundefined声明了但未赋值的变量nullnull有意表示空symbolSymbol(id)唯一标识符进阶本课程的后续课时还会引入两种引用类型object与array可先预习 数组与循环 与 函数与方法。数字number数字是最直接的数据类型整数 42、小数 3.14、负数 -5JavaScript 一律统一处理。前面let myVariable 123;里的 123 就是一个 number 类型。关键特征JavaScript 自动识别数值无需显式声明类型这些变量可直接参与数学运算。变量可以存储所有类型的数字包括小数和负数。算术运算符数字与算术运算符配合运算符遵循传统数学规则符号说明示例加法计算两个数的和1 2预期结果 3-减法计算两个数的差1 - 2预期结果 -1*乘法计算两个数的积1 * 2预期结果 2/除法计算两个数的商1 / 2预期结果 0.5%取余除法后的余数1 % 2预期结果 1动手验证在浏览器控制台里试一条算术运算看看结果是否出乎意料比如10 % 3是 1 而不是 3.33…。实用价值%取余运算符在判断奇偶、生成图案、数组轮转cycling中极其常用。字符串stringJavaScript 中的文本数据用字符串表示。string 一词源于字符串在一起的概念。字符串对 Web 开发至关重要——网站上显示的每一段文字用户名、按钮标签、错误信息、正文内容——都作为字符串数据处理。字符串是位于单引号或双引号之间的一组字符This is a string This is also a string let myString This is a string value stored in a variable;要点用单引号或双引号界定字符串可以包含字母、数字和符号赋值给变量以便后续使用必须加引号——否则 JavaScript 会把它当成变量名。字符串格式化拼接与模板字符串字符串操作用于组合文本、嵌入变量、构造随程序状态变化的动态内容。拼接concatenation用运算符把两个或多个字符串连起来。let myString1 Hello; let myString2 World; myString1 myString2 !; // HelloWorld! myString1 myString2 !; // Hello World! myString1 , myString2 !; // Hello, World!逐行理解第一段无空格直接相连得到HelloWorld!中间插入 空格得到Hello World!插入, 得到Hello, World!。原课程此处埋了一个思考题为什么1 1 2而1 1 11再想想1 1会怎样提示遇到字符串时执行拼接而非加法这是隐式类型转换的典型体现。模板字符串template literals另一种格式化方式用反引号代替引号非纯文本部分放入${ }占位符包括变量let myString1 Hello; let myString2 World; ${myString1} ${myString2}! // Hello World! ${myString1}, ${myString2}! // Hello, World!逐部分理解用反引号而非普通引号创建模板字符串通过${}占位符语法直接嵌入变量精确保留所写的空格与格式为含变量的复杂字符串提供了更干净的写法。两种方法都能达成格式化目标但模板字符串会尊重空格与换行——构建复杂字符串时通常优先选择它因为它更易读且能优雅处理多行文本。布尔boolean与 truthy / falsy布尔是最简单的数据只能取true或false两个值。let myTrueBool true; let myFalseBool false;要点创建了存储布尔值true的变量并演示了如何存储false使用的正是关键字true/false不需要引号加了引号的true是字符串这些变量为条件语句做准备——布尔帮助程序决定满足某些条件时运行哪些代码行。在很多场景运算符如比较运算符会帮助设置布尔值你会经常看到变量用运算符初始化或更新。truthy 与 falsy一个变量如果求值结果为true就称为 truthy。JavaScript 的有趣之处在于几乎所有值都是 truthy只有 6 个值天生是 falsyfalsy 值说明false布尔假值0数字零注意字符串0是 truthy空字符串null有意为空undefined未定义NaNNot-a-Number其余一切hello、42、[]、{}甚至false这个字符串都是 truthy。这条规则在 条件判断课程 编写if语句时是核心知识。仓库实证课程项目源码中的数据类型上述概念并非纸上谈兵——本课程后续项目的参考实现里随处可见数据类型的典型用法。typing game 参考实现4-typing-game/solution/index.js几乎是一份数据类型速查表第 4 行const quotes [...]——常量数组存放引用文本第 15–17 行let words []、let wordIndex 0、let startTime 0——会随游戏进程变化的状态用let初始值分别为空数组和数字 0正是 number 与数组类型的实际落地第 27 行success: (seconds) \ Congratulations! You finished in ${seconds.toFixed(2)} seconds.——模板字符串嵌入数字运算结果正是本课字符串格式化的直接应用第 71 行(Date.now() - startTime) / 1000——除法运算符求耗时第 69 行typedValue currentWord则依赖字符串比较返回布尔值驱动分支逻辑。terrarium 参考实现3-terrarium/solution/script.js展示了数值与字符串的交互第 25–28 行let pos1 0, pos2 0, pos3 0, pos4 0;——4 个位置变量用let声明并初始化为数字 0随拖动事件不断重新赋值体现了let的可变性第 55–56 行terrariumElement.style.top terrariumElement.offsetTop - pos2 px;——这是本课1 1 思考题的真实工程版数字与字符串px相加发生隐式类型转换得到123px这样的合法 CSS 值。若顺序写成px (offsetTop - pos2)同样得到正确字符串——这正是类型决定运算行为的实例。从源码结构看整个课程的 JS 参考实现terrarium、typing game、space game一致地遵循本课倡导的现代实践只使用let/const不出现var。综合挑战与练习原课程提供了三层练习完整保留如下。经典陷阱挑战在浏览器控制台输入let age 1; let Age 2; age Age结果是false——能解释为什么吗提示变量名是区分大小写的age和Age是两个不同变量而的宽松比较与的严格比较之间的差异值得用一小时深入探索。熟悉这些怪癖行为会帮助你写出更可靠的代码、更高效地排查问题。Copilot Agent 实战挑战课程在各章节新增了 GitHub Copilot Agent Challenge。本章的挑战是构建一个个人信息管理器要求创建用户资料对象包含姓名string、年龄number、是否学生boolean、最喜欢的颜色数组、以及包含 street/city/zip code 属性的地址对象并编写函数展示资料、更新单个字段同时演示字符串拼接、模板字符串、对年龄做算术运算、基于学生状态的布尔逻辑。这道题恰好覆盖本课全部核心类型。配套作业电商购物车课后作业要求你以电商购物车系统为场景逐一分析7 种原始类型 对象 数组在真实业务中的用途每个类型需说明用途Purpose、为何选它Why、可运行的代码示例Code Example、真实场景Real-world Usage、与其他数据的交互Interactions并覆盖类型强制转换如5 10、数据校验、性能权衡三个加项挑战。详细要求与评分标准见 购物车作业。分阶段练习清单5 分钟内可做打开浏览器控制台创建 3 个不同数据类型的变量完成上面的age Age挑战并解释原因用字符串拼接处理你的名字和喜欢的数字测试数字 字符串会发生什么。1 小时内可做完成课后测验复盘模糊概念写一个迷你计算器对两个数做加减乘除用模板字符串实现一个姓名格式化器探索与的差异练习不同类型之间的转换。一周内可做完成作业并发挥创意用本课全部数据类型构建个人档案对象用布尔逻辑做一个简单表单校验器预告性实验数组与对象类型构建管理不同类型用户数据的小型应用。小结本课的知识地图可以浓缩为四组要素变量let可变、const引用不可变是赋值而非相等数字42、3.14、-5统一处理配 - * / %五个算术运算符字符串单引号、双引号、模板字符串 ${}拼接与模板插值两种方式布尔true/false驱动条件逻辑牢记仅有的 6 个 falsy 值false、0、、null、undefined、NaN。以及四条关键结论类型决定运算行为JavaScript 是动态类型语言变量的类型可以改变变量命名区分大小写。理解数据类型如同写故事前先学字母表——你将编写的每一个 JavaScript 程序都会用到这些基础概念。下一步进入 函数与方法把本课的存储能力封装成行为。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考