本章定位上一章我们已经正式进入 JavaScript 学习阶段解决了一个非常关键的基础问题JavaScript 是什么。JavaScript 在前端里负责什么。JavaScript 可以在哪里运行。JavaScript 怎么进入网页。控制台和报错应该怎么看。也就是说你现在已经知道JavaScript 是一门会真正“执行逻辑”的语言。那接下来的问题就变成了代码到底在处理什么答案就是数据。比如用户名是什么年龄是多少商品价格是多少是否登录成功当前总价是不是超过预算这些都属于程序要处理的数据。而从这一章开始你会第一次正式接触怎么把数据存起来数据分成哪些类型数据之间怎么计算和比较这也是为什么“变量、数据类型与运算”几乎是所有编程入门都会最先讲的一组基础内容。本章学习目标学完这一章后你应该能做到理解变量是什么为什么程序需要变量。掌握let和const的基础用法与区别。理解变量名和值不是同一回事。认识 JavaScript 中最常见的数据类型数字、字符串、布尔值、undefined、null。学会使用typeof观察一个值的大致类型。掌握算术运算、比较运算、逻辑运算的最基础用法。能写出一个简单的“购物金额计算器”小练习。一、变量到底是什么变量可以先用一句最容易理解的话来记变量就是给一个值起名字方便后面继续使用。例如constuserName小白;你现在可以先把它理解成小白是一个值userName是这个值的名字之后你在代码里就可以通过userName来使用这个值而不用每次都重新写一遍小白。二、为什么程序需要变量如果没有变量很多代码会变得非常难写也很难维护。比如你想表示一个商品价格一个商品数量一个总价如果完全不用变量你就只能把值硬写死在代码里。例如console.log(99*3);这当然能算出结果但问题是99是什么3是什么后面如果数量改了怎么办如果换成变量constunitPrice99;constquantity3;console.log(unitPrice*quantity);你一下子就更容易看懂了。所以变量最大的价值之一是让代码更清楚也让数据更容易重复使用。1. 变量不是“高级写法”而是最基础的组织方式很多纯小白第一次看到变量会把它想得很复杂。其实你可以先把它理解成程序里的“带名字的小盒子”里面装着某个值。这个理解虽然不严格但对入门特别有帮助。2. 一个最直观的类比假设你桌上有三个盒子一个盒子写着“姓名”一个盒子写着“年龄”一个盒子写着“城市”盒子里分别装着小白18北京那你以后要用这些信息时就不用每次都重新找原始内容而是直接看盒子名字。这和变量的思路很像变量名像盒子上的标签变量值像盒子里装的东西三、如何声明变量let和const在现代 JavaScript 中初学阶段你最需要掌握的是两个关键字letconst它们都可以用来声明变量。1.let适合后面可能会变化的值例如letscore60;console.log(score);这里我们声明了一个变量score它当前的值是60。如果后面这个值需要改变你可以重新赋值letscore60;score80;console.log(score);最后输出的是80。你可以先把let理解成这个变量后面还可能会变。1.let常见适用场景例如数量可能变化总价可能变化当前页码可能变化输入内容可能变化如果一个值在程序执行过程中很可能被更新通常就可以考虑用let。2.const适合后面不打算重新赋值的值例如constsiteName从零开始学前端;console.log(siteName);这里的siteName用const声明表示这个变量后面不打算再改成别的值。如果你强行重新赋值例如constsiteName从零开始学前端;siteNameJavaScript 新站点;浏览器就会报错。1.const常见适用场景例如网站名称固定单价默认配置值不打算再改变的说明文本2. 初学阶段可以先记一个很实用的判断法你可以先这样用会变的值用let不打算变的值用const这是一个很适合新手的起步规则。3. 什么时候用let什么时候用const这是初学者几乎一定会问的问题。你可以先用一个很简单的思路来判断1. 如果这个值只是“存起来备用”后面不重新赋值优先考虑const2. 如果这个值后面还会更新优先考虑let例如constunitPrice99;letquantity2;lettotalPriceunitPrice*quantity;这里单价通常不变所以可以用const数量可能调整所以可以用let总价也可能跟着变化所以也可以用let4. 初学阶段先别急着用var你以后可能还会看到一种更老的写法varuserName小白;它确实存在但对纯小白来说当前阶段不建议优先学习它。你现在先专注掌握letconst就足够了。后面如果有需要再理解var的历史和区别会更合适。四、变量名和值不是一回事这是初学阶段特别容易混淆的一点。例如constuserName小白;这里userName是变量名小白是值你可以把它理解成变量名是“代号”值才是“真正装进去的内容”。1. 为什么这个区别很重要因为很多初学者一开始写代码时会把变量名字符串内容页面上看到的文字混在一起理解。如果你能早点把这三件事分清楚后面学变量、条件、函数时会轻松很多。2. 一个直观例子constcourseNameJavaScript 入门;console.log(courseName);你在控制台里看到的可能是JavaScript 入门但这不代表变量名就是“JavaScript 入门”。变量名仍然是courseName五、变量名应该怎么取从这一章开始变量命名习惯非常重要。因为你后面写的不是一两行代码而会越来越多。变量名如果乱写代码很快就会变得难懂。1. 一个最重要的原则变量名要表达含义例如推荐constuserName小白;constunitPrice99;lettotalPrice198;不推荐consta小白;constb99;letc198;后者虽然浏览器也能执行但对阅读代码的人几乎没有帮助。1. 为什么变量名不能太随便因为变量名本来就是帮你“看懂这段代码”的。如果名字没有含义变量的价值就会大打折扣。2. 尽量贴近业务含义例如你在写购物相关逻辑时变量名可以是productNameunitPricequantitytotalPrice如果你在写用户信息相关逻辑时变量名可以是userNameuserEmailcityName这会比随便写成data1item2value3清楚得多。六、数据类型是什么现在我们开始进入第二个核心概念数据类型。你可以先这样理解数据类型就是“这个值属于哪一类值”。例如18是数字小白是字符串true是布尔值为什么要区分类型因为不同类型的值能做的事情不一样。例如数字可以做加减乘除字符串更适合拼接文本布尔值通常用于表示真假如果你不区分类型后面很多运算结果就会让你觉得莫名其妙。七、数字类型number在 JavaScript 中数字类型通常叫number。例如constage18;constprice99.5;这些都属于数字。1. 数字可以是整数也可以是小数例如constcount3;constscore95.5;这两个都还是数字类型。2. 数字最常见的用途例如年龄数量价格分数长度只要你后面要做计算通常就会和数字打交道。八、字符串类型string字符串通常就是“文本”。例如constuserName小白;constcityName北京;constcourseName前端入门;这些值都属于字符串。1. 字符串通常要放在引号里例如constuserName小白;constjobTitle前端学习者;双引号和单引号都可以初学阶段只要保持一致就行。2. 字符串最常见的用途例如姓名城市页面标题提示文案按钮文字简单说只要是文本信息很多时候就是字符串。九、布尔值boolean布尔值只有两个可能truefalse你可以先把它理解成“是 / 否”“真 / 假”“成立 / 不成立”例如constisStudenttrue;consthasCouponfalse;1. 布尔值最常见的用途例如是否登录是否超过预算是否填写完成是否同意协议它特别适合表示“状态”。十、undefined有变量但还没有得到明确的值这是一个初学者第一次看到时容易觉得抽象的概念。你可以先这样理解undefined表示“现在还没有一个明确值”。例如letuserEmail;console.log(userEmail);这时输出通常是undefined因为这个变量虽然声明了但你还没有给它赋具体值。1. 不用把undefined想得太神秘你现在只要先记住变量存在但当前没有明确内容时经常会看到undefined。十一、null有意地表示“现在没有值”null和undefined很容易被混淆。你现在可以先做一个非常基础的区分undefined通常表示“还没有值”null通常表示“我明确知道这里现在没有值”例如constselectedCoursenull;你可以先把它理解成这个值现在是空的而且这是我明确写出来的。初学阶段你不用特别深究它们的底层差异只要先建立这个直观认识就很好。十二、怎么观察一个值是什么类型typeofJavaScript 里有一个很常见的工具typeof它可以帮助你大致查看一个值的类型。例如console.log(typeof18);console.log(typeof小白);console.log(typeoftrue);你通常会看到number string boolean1. 初学阶段怎么用typeof你不用把它想得特别复杂。现在它最主要的作用就是帮你观察一个值到底更接近哪一类数据。2. 一个适合练习的小例子constuserName小白;constage18;constisStudenttrue;console.log(typeofuserName);console.log(typeofage);console.log(typeofisStudent);这个练习很适合你用来建立“值和类型”的第一层直觉。十三、什么是运算现在我们开始进入第三个核心概念运算。你可以先把运算理解成对值做处理让程序得出新的结果。例如价格相加数量相乘比较两个值大小判断一个条件是否成立JavaScript 中最基础的运算可以先分成三类算术运算比较运算逻辑运算十四、算术运算做加减乘除这类最容易理解因为和我们平时算数最接近。1. 加、减、乘、除例如constpriceA100;constpriceB50;console.log(priceApriceB);// 加法console.log(priceA-priceB);// 减法console.log(priceA*priceB);// 乘法console.log(priceA/priceB);// 除法1. 最常见的购物场景例子constunitPrice99;constquantity3;consttotalPriceunitPrice*quantity;console.log(totalPrice);这里很容易看出单价是99数量是3总价是它们相乘的结果2. 取余运算%%表示取余也就是“除完之后剩多少”。例如console.log(10%3);结果是1因为10除以3商是3余数是1。1. 初学阶段为什么要知道取余你现在不一定马上大量使用它但它很常见。例如判断奇偶数某些循环规律判断所以现在先认识它就很好。十五、字符串拼接把文本连起来运算不只发生在数字上字符串也有常见的处理方式。例如constfirstName前端;constlastName学习者;console.log(firstNamelastName);结果会是前端学习者这就叫字符串拼接。1. 字符串拼接的常见用途例如组合提示文字组合用户名展示拼接输出结果2. 初学者要特别注意的一点加号在数字里表示加法在字符串里可能表示拼接。这也是后面容易产生混淆的地方。十六、模板字符串更推荐的新手写法在现代 JavaScript 中拼接文字时更推荐一种更清晰的方式模板字符串。它使用的是反引号不是单引号也不是双引号。例如constuserName小白;constcityName北京;console.log(你好我是${userName}我来自${cityName});输出结果会是你好我是小白我来自北京1. 为什么模板字符串对初学者很友好因为它更接近我们平时写一句完整话的方式不需要频繁地开字符串关字符串再加一个变量再继续开字符串相比之下下面这种写法就更容易乱console.log(你好我是userName我来自cityName);它当然也能用但在内容一长时会不如模板字符串清楚。十七、比较运算判断两个值之间的关系比较运算的结果通常是truefalse也就是说它最终会得到一个布尔值。1. 常见比较运算例如console.log(105);console.log(105);console.log(1010);console.log(108);这些分别表示大于小于大于等于小于等于1. 用购物预算举例consttotalPrice297;constbudget300;console.log(totalPricebudget);这表示总价是否超过预算结果通常会是false因为297没有超过300。2. 相等比较优先先用和!初学阶段你会看到多种“相等比较”写法。为了减少混淆你现在先优先掌握两种!例如console.log(1010);console.log(10!5);它们表示严格相等严格不相等1. 初学阶段为什么更推荐因为它更稳定也更少让你掉进“看起来一样但其实不一样”的坑里。所以你现在可以先形成一个很实用的习惯需要比较是否相等时优先先用。2. 一个很重要的提醒不是比较这点非常非常重要。很多小白刚开始会混淆赋值比较是否相等例如letscore80;这里的不是“判断”而是“把右边的值放进左边变量”。十八、逻辑运算把多个判断组合起来逻辑运算通常用于同时满足多个条件满足其中一个条件对真假做反转最常见的三个逻辑运算符是||!1.并且你可以先把它理解成左边成立并且右边也成立整个结果才成立。例如consthasAccounttrue;consthasPasswordtrue;console.log(hasAccounthasPassword);如果两边都为true结果就是true。2.||或者你可以先理解成左边和右边只要有一个成立结果就成立。例如constisVipUserfalse;consthasCoupontrue;console.log(isVipUser||hasCoupon);结果会是true因为虽然不是会员但有优惠券。3.!取反!可以先理解成把真假反过来。例如constisFinishedfalse;console.log(!isFinished);结果会是true因为false被反转成了true。十九、一个完整示例购物金额计算器这一节我们把前面学过的变量、数据类型和运算真正组合起来。注意这个版本我们先不引入条件判断if因为那会在下一章系统学习。这一章的重点是让你先把存值取值计算比较输出这几件事串起来。1. 示例代码constproductName前端入门课程;constunitPrice99;letquantity3;constshippingFee12;// 先计算商品总价constproductTotalPriceunitPrice*quantity;// 再计算最终支付金额constfinalTotalPriceproductTotalPriceshippingFee;// 用布尔值保存“是否超过预算”的判断结果后面继续学条件判断时会更常用到这种写法constisOverBudgetfinalTotalPrice300;console.log(商品名称${productName});console.log(商品单价${unitPrice}元);console.log(购买数量${quantity});console.log(商品总价${productTotalPrice}元);console.log(运费${shippingFee}元);console.log(最终总价${finalTotalPrice}元);console.log(是否超过 300 元预算${isOverBudget});这个例子里你能看到很多本章核心点字符串productName数字unitPrice、quantity、shippingFee布尔值isOverBudget算术运算乘法和加法比较运算模板字符串...${...}...二十、怎么逐步读懂这段代码如果你第一次看到这一段不要怕可以按顺序一点点读。1. 先看原始数据例如商品名称是什么单价是多少数量是多少运费是多少2. 再看中间计算结果例如商品总价是多少最终总价是多少3. 最后看判断结果例如最终是否超过预算你会发现程序并不是魔法它只是把“已知值 → 中间计算 → 最终结果”一步步写清楚。二十一、字符串和数字混用时要特别小心这是初学者很常见的坑之一。例如console.log(10020);结果通常会是10020而不是120因为这里的100是字符串不是数字。1. 为什么这件事值得现在就提醒因为你后面做表单、处理输入值时经常会碰到“看起来像数字实际上是字符串”的情况。现在你先建立这个警觉就很好值长得像数字不代表它一定就是数字类型。二十二、初学者最容易踩的坑1. 把变量名和值混为一谈例如constuserName小白;变量名是userName值是小白这两件事一定要分清。2.const声明后又想重新赋值例如constcityName北京;cityName上海;这会报错。如果后面值可能变化就应该考虑用let。3. 变量名太随意例如consta99;constb3;constca*b;虽然能运行但阅读体验非常差。4. 把和混淆再强调一次是赋值是比较5. 看到结果不对却不先看类型例如字符串和数字混用时最值得优先检查的一件事就是这个值到底是什么类型这时typeof就很有帮助。二十三、本章实践练习这一章非常适合通过小练习把“值、类型、运算”真正建立起直觉。1. 练习 1声明几个有意义的变量请你自己声明下面几类变量一个姓名字符串一个年龄数字一个是否是学生的布尔值一个当前城市字符串例如constuserName小白;constage18;constisStudenttrue;constcityName北京;然后用console.log打印它们。2. 练习 2观察不同值的类型请尝试打印下面这些值的类型console.log(typeof18);console.log(typeof18);console.log(typeoftrue);console.log(typeofundefined);console.log(typeofnull);重点不是一开始背答案而是开始建立“值长什么样”和“它属于什么类型”之间的联系。3. 练习 3练习字符串拼接和模板字符串请完成下面两种写法constuserName小白;constcityName北京;console.log(你好我是userName我来自cityName);console.log(你好我是${userName}我来自${cityName});然后感受一下哪种写法更容易读内容一长时哪种更不容易乱4. 练习 4编写一个购物金额计算器请自己写一段代码至少包含商品名单价数量运费商品总价最终总价是否超过预算你可以参考下面的思路但尽量自己重新写一遍constproductName前端课程;constunitPrice99;letquantity2;constshippingFee10;这个练习非常适合帮助你把本章知识串起来。二十四、学习重点提示这一章最重要的不是把所有术语硬背下来而是把“值、变量、类型、运算”这四件事真正分清楚。请重点记住变量是给值起名字方便后面继续使用。let通常用于后面可能变化的值const通常用于不打算重新赋值的值。变量名和值不是同一回事。常见数据类型包括数字、字符串、布尔值、undefined、null。算术运算是算结果比较运算是得出真假逻辑运算是组合真假。变量名要有意义尽量贴近业务含义。如果你只记一句话请记住JavaScript 代码本质上一直在处理“值”而变量、类型和运算就是你组织这些值的第一套基础工具。二十五、本章小结这一章我们正式进入了 JavaScript 中最基础、也最核心的一层内容。你已经学习了什么是变量let和const的区别什么是数据类型常见基础类型有哪些什么是算术运算、比较运算和逻辑运算如何通过一个购物金额计算器把这些概念串起来这一步非常关键因为后面你学习条件判断、循环、函数时本质上都还在继续处理这些值。如果变量、类型和运算这一步学扎实了后面很多内容都会顺很多如果这一步含糊后面就会经常感觉“代码在动但我不知道它在处理什么”。二十六、课后思考题请你思考下面几个问题为什么程序需要变量而不是把值全部硬写在代码里let和const的最直观区别你现在会怎么解释为什么说变量名和值不是一回事为什么100 20的结果和100 20不一样为什么比较运算的结果通常是true或false建议你用自己的话把答案写下来。只要你能把这些问题说清楚说明你已经开始真正建立 JavaScript 的数据思维了。二十七、下一章预告下一章我们会继续学习从零开始学前端 | 第十三章条件判断与循环到那时你会开始让程序根据不同情况走不同路径也会第一次写出“重复执行一段逻辑”的代码这会让你的 JavaScript 开始真正像“程序”。