作为刚入门 JavaScript 的新手是不是总被各种数据类型、运算符绕得晕头转向一会儿typeof null返回object一会儿自增运算符前置后置结果不一样今天就用最接地气的大白话把 JS 变量、数据类型和运算符的核心知识点掰开揉碎讲清楚搭配实战代码新手也能轻松拿捏一、先搞懂JS 变量和数据类型到底是啥1. 变量存放数据的 “小盒子”变量就像我们生活中装东西的盒子给盒子起个名字变量名就能把不同类型的数据放进去。在 JS 里用var声明变量新手先掌握这个后续再学let/const比如var str Good morning!就是把字符串 “Good morning!” 放进叫str的盒子里。2. 核心数据类型实战 解析先看完整代码再逐个拆解新手直接复制代码到 HTML 文件就能运行控制台看结果!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的变量和数据类型/title /head body script //字符串 string var strGood morning!; console.log(str - 数据类型 typeof str br); //双引号包含带单引号的字符串 string var str2This is Tom; console.log(str2 - 数据类型 typeof str2 br); //单引号包含带双引号的字符串 string var str3This is Tom; console.log(str3 - 数据类型 typeof str3 br); // 数字 number var x165.30; console.log(x1 - 数据类型 typeof x1 br); // 数字 number var x265; console.log(x2 - 数据类型 typeof x2 br); // 数字 number var y117e3; console.log(y - 数据类型 typeof y br); // 数字 number var z117e-3; console.log(z - 数据类型 typeof z br); // 布尔值 boolean var xtrue; console.log(x - 数据类型 typeof x br); // 对象 object 对象类型下的数组注意没有独立的数组类型 var personsnew Array(Tom,Jack,Kate); console.log(persons - 数据类型 typeof persons br); // 未定义类型 undefined var person1; console.log(person1 - 数据类型 typeof person1 br); // 特殊情况尽管 null 是一个表示空值的特殊关键字但 typeof null 会返回 object。 // 这是一个著名的 JavaScript 特性虽然有些令人困惑但已经存在了很长时间知道一下就行不必理会 var person2null; console.log(person2 - 数据类型 typeof person2 br); /script /body /html3. 数据类型核心特点、优缺点及注意事项数据类型核心特点优点缺点 / 注意事项字符串单 / 双引号包裹可互相嵌套写法灵活满足不同字符串场景比如包含引号的内容注意引号配对别漏写比如单引号开头必须单引号结尾数字整数、小数、科学计数法都兼容不用区分整数 / 浮点数类型计算方便科学计数法新手容易懵记住e3是 ×10³e-3是 ×10⁻³ 就行布尔值只有 true/false极简做条件判断比如 if 语句的核心逻辑清晰别把 true/false 写成 True/False大小写敏感错了会报错数组本质是 object可存多个值批量管理同类型数据比如多个名字方便遍历typeof 检测不出数组类型返回 object新手别靠 typeof 判断数组undefined变量声明未赋值的默认值能快速识别 “未初始化” 的变量容易和 null 混淆undefined 是 “没赋值”null 是 “主动赋值为空”null表示空值typeof 返回 object主动清空变量时用比如 var a null历史遗留 bug 导致 typeof 返回 object不用纠结记结论即可二、搞透 JS 运算符新手最容易踩坑的地方都在这运算符就是 JS 里做 “计算 / 判断” 的符号比如加减乘除、比较大小、逻辑判断直接上完整代码再逐个讲重点!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的算术运算符/title /head body !-- 加减乘除运算符 -- script console.log(10 10); // 20 console.log(100 - 10); // 90 console.log(10 * 2); // 20 console.log(10 / 5); // 2 /script !-- 取余运算符 -- script console.log(13 % 5); // 3 /script !-- 自增自减运算符 -- !-- 自增和自减运算符有一个需要注意的地方就是放在变量之后会 先返回变量操作前的值再进行自增/自减操作放在变量之前会 先进行自增/自减操作再返回变量操作后的值。 即 后置返回变量原值再递增/递减 前置先递增/递减再返回变量操作后的值。 -- script var a 1; var b 1; console.log(a); // 2 console.log(--b); // 0 /script script var x 1; var y 1; // 放在变量后 console.log(x); // 1 即返回 x console.log(x); // 2 // 放在变量前 console.log(y); // 2 即返回 y1 /script !-- 算术赋值结合运算符 -- script // 等同于 x x y var x 2; var y 1; console.log(x y); //3 // 等同于 x x - y var x 2; var y 1; console.log(x - y); //1 // 等同于 x x * y var x 2; var y 1; console.log(x * y); //2 // 等同于 x x / y var x 2; var y 1; console.log(x / y); //2 // 等同于 x x % y var x 2; var y 1; console.log(x % y); //0 /script !-- 比较运算符 -- !-- (宽松相等) 与 (严格相等) 的核心区别 运算符‌会执行隐式类型转换后再比较值 ‌ 运算符‌不执行任何类型转换 -- script var num1 10 ; var num2 10 ; var num3 10; console.log(num1 num2); // true console.log(num1 num2); // true console.log(num1 num3); // 返回true因为字符串10会被转换为数字10 console.log(num1 num3); // 返回false因为类型不同数字 vs 字符串 /script !-- 取反运算符 以下值在布尔上下文中会被转换为false其他所有值都会被转换为true false (布尔值false本身) 0 (数字零) (空字符串) null undefined NaN (特殊的非数字值) -- script console.log(!undefined); // true undefined在布尔上下文中被视为false console.log(!null); // true null在布尔上下文中也被视为false console.log(!0); // true 数字0在布尔上下文中被视为false // NaN的意思是“Not a Number”即“非数值”或“不是一个数值” // 它用于表示一个本来要返回数值的操作数未返回数值的情况。 // NaN通常出现在数学运算中以下几种情况可能导致NaN的产生 // 除以0在进行除法运算时如果除数为0那么结果就无法定义通常会被设置为NaN。 // 非法数学运算当进行一些非法数学运算时比如对负数进行平方根运算结果也会被设置为NaN。 // 数据类型不匹配在类型转换时如果类型转换失败或者转换后的结果不是有效数值结果也会被设置为NaN。 // 数值溢出当进行数值计算时如果计算结果超出了所能表示的范围结果也会被设置为NaN。 // 缺失数据在某些数据分析任务中如果数据中存在缺失值那么在进行数据计算时结果也会被设置为NaN。 console.log(!NaN); // true console.log(!); // true console.log(!888); // false console.log(!you are my baby); // false /script !-- 【超级重点】且运算符参与“且运算”的项必须同时为真才返回真否则返回假 -- script console.log(10 20 10 5); // true console.log(10 20 10 5); // false /script !-- 【超级重点】或运算符||参与“或运算”的项有一个为真即返回真否则返回假 -- script console.log(10 20 || 10 5); // true console.log(10 20 || 10 5); // true console.log(10 20 || 10 5); // false /script /body /html运算符核心知识点1. 基础运算加减乘除 / 取余取余运算符%新手别只记 “求余数”实际用途超广比如判断奇偶num % 2 0就是偶数、限制数值范围。优点简单直观和小学数学一致缺点除法要注意比如10/3会返回小数不是整数。2. 自增 / 自减/--前置后置差在哪新手口诀前置先变后用后置先用后变前置a先把 a 的值 1再用这个新值比如 a1a 直接返回 2后置a先返回 a 的原值再把 a1比如 a1a 先返回 1之后 a 才变成 2坑点新手别在一行代码里多次用自增比如console.log(a a)容易算错尽量拆行写。3. 算术赋值运算符/-/*/%核心作用简化代码比如x y就是x x y的简写少写代码还易读优点代码更简洁新手写多了会觉得香缺点新手初期容易混淆和记住是 “赋值”只是 “计算”。4. 比较运算符 和 选哪个宽松相等像 “马大哈”会先把不同类型转成同一类型再比比如字符串 10 转成数字 10严格相等像 “细节控”值和类型必须全一样才返回 true新手建议永远优先用 避免类型转换导致的坑比如0 返回 true新手根本想不到。5. 逻辑运算符! / / ||做判断的核心取反把 “假值”undefined/null/0/NaN转成 true把 “真值” 转成 false且 必须所有条件都满足才返回 true比如 “考试分数 60 且 出勤 80%” 才及格或 ||只要有一个条件满足就返回 true比如 “有学生证 或 有准考证” 就能进考场注意 和 || 会 “短路求值”比如false 任意值直接返回 false后面的任意值不计算新手可以先不用深究知道有这回事就行。6.综上所言接下来看实操!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body script var r 10.0; //定义圆的半径变量 var cir 2*Math.PI*r; //定义圆的周长变量 (Math是 JavaScript 的原生对象提供各种数学功能) var area Math.PI*r*r;//定义圆的面积变量 document.write(已知圆的半径为: r br); //输出圆的半径 document.write(则圆的周长为: cir br); //输出圆的周长 document.write(则圆的面积为: area); //输出圆的面积 /script /body /html运行结果三、新手避坑总结划重点数据类型别纠结typeof null返回 object记结论判断数组别用 typeof后续学Array.isArray()运算符自增后置前置别搞反比较用 不用 逻辑运算符记住 “且要全对、或要一个对”实战建议新手写代码时每写一个运算符 / 数据类型都用 console.log 打印结果看是否和自己想的一样多试几次就熟了最后JS 的变量、数据类型和运算符是入门的基石今天用大白话 完整代码讲了核心知识点和避坑点新手一定要把代码复制下来跑一遍亲手改改数值看看结果变化 —— 看一百遍不如亲手敲一遍后续还会讲流程控制、函数等知识点关注我新手也能轻松学 JS