1-4JavaScript操作符及案例（一）

本页对应 第一章JavaScript基础，共 5 段视频，约 44 分钟。

学习目标

1. 能正确书写并使用 JavaScript 算术运算符 +、-、*、/、%，计算含优先级和括号的表达式，并说明取余运算在判断整除、奇偶场景中的作用。
2. 能独立完成“商品小计”案例：使用 prompt 获取单价和数量，保存到变量，用 * 计算小计，并通过模板字符串将结果输出到页面。
3. 能使用赋值运算符 =、+= 等修改变量值，并说明 number += 1 与 number = number + 1 的等价关系。
4. 能使用自增、自减运算符 ++、--，区分单独使用与参与运算时前缀式、后缀式的执行结果，并避免对字面量使用自增自减。
5. 能使用比较运算符 >、<、>=、<=、==、===、!=、!== 比较数据，说明结果为布尔值，并区分 == 与 === 在值和数据类型判断上的差异。
6. 能识别算术计算中出现 NaN 的常见原因，说明字符串与数字使用 + 时发生拼接、使用其他算术运算符时可能导致计算失败。

知识点

从“万物皆数据”开始建立类型意识

计算机程序要处理大量数据，生活中也会把不同物品归类；写程序同样要先分清“这是什么类型的数据”，否则计算和输出就容易出错。笔记用下图提示我们先建立分类意识：

为什么需要： 不同类型的数据，能做的事不同。数字适合计算，字符串适合保存文字，布尔值表示肯定/否定。
怎么想： 先看数据长什么样，再用 typeof 检测；不要凭变量名猜。
怎么做： 写一个值，打印 typeof 值 或 typeof 变量。
易错点： 转写稿里大量内容是算术运算符、赋值、自增、比较运算符，和本节“数据类型”不是同一主题；这里只采用其中与数字计算、字符串拼接、模板字符串有关的调试线索，不把运算符内容硬写成数据类型知识。转写稿中“算出运算符”应纠正为“算术运算符”，“取膜”应理解为“取模/取余”。

数字型：先确认类型，再参与计算

为什么需要： 数学中的整数、小数、正数、负数都要参与计算，程序必须知道它们是数字。
怎么想： 看到 18、-18、18.88 这类值，先想到数字型；用 typeof 验证。
怎么做： 运行下面代码，观察输出 number。
易错点： 转写稿演示过“字符串减数字”得到 NaN，说明混用类型可能导致计算失败；遇到结果不对，先查 typeof。

// 1. 数字型： 用于计算的， js数字类型包含： 整数、小数
// let num1 = 18
// let num1 = -18
let num1 = 18.88
// let num1 = -18.88
console.log(typeof num1)  // number   typeof 关键字检测数据类型

// 2. 字符串类型: 被引号包裹的一段文字信息   单引号 双引号  反引号
let goods = '笔记本电脑'
let address = "黑马程序员"
console.log(typeof goods)  // string
console.log(typeof address)  // string
let color = `粉红色`
let tel = '13612342234'
// 2.1 变量是不能加引号的,变量加了引号就不是盒子了，是一个字符串
console.log('goods')
// 2.2 字符串嵌套的问题. 不能嵌套自己, 外单内双  或者 外双内单
console.log('今日特价"跳楼大甩卖"速速抢购')
console.log("今日特价'跳楼大甩卖'速速抢购")

字符串型：引号是边界，变量不是字符串

为什么需要： 姓名、地址、商品名、电话等文字信息不能当数字算，要用字符串保存。
怎么想： 被单引号、双引号或反引号包裹的一段文字，就是字符串；单双引号本质区别不大，推荐单引号。
怎么做： 用引号包住文字；需要嵌套时记“外双内单”或“外单内双”。
易错点： 变量名不要加引号。goods 是变量，'goods' 是字符串；上面代码中 console.log('goods') 输出的是文字，不是变量里的“笔记本电脑”。

模板字符串：拼接变量更清楚

为什么需要： 字符串和变量拼接时，用 + 容易看乱；模板字符串更直观，还能保留换行。
怎么想： 只要出现“文字 + 变量 + 文字”，优先想反引号和 \${变量}。
怎么做： 用反引号包裹，把变量放进 ${}；转写稿的商品小计也用类似写法输出“人民币 + 结果”。
易错点： 反引号不是单引号；${} 里放变量名，不要再多加引号。

// 1. 字符串拼接
let age = 91
// console.log('pink今年' + age + '岁')
console.log('pink今年' + age + '岁')

// 2. 模板字符串
console.log(`pink今年\${age}岁`)
// 3. 模板字符串里面的字符串可以换行

布尔类型：表示肯定或否定

为什么需要： 程序经常要表达“是/否”“真/假”，例如判断帅不帅、是否通过。
怎么想： 只有两个固定值：true 表示肯定，false 表示否定。
怎么做： 用变量保存布尔值，再用 typeof 检测，结果是 boolean。
易错点： true、false 不要加引号；加了引号就变成字符串。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>

undefined：声明了但没赋值

为什么需要： 变量只声明、不赋值时，程序也要有一个默认状态。
怎么想： undefined 是特殊类型，只有一个值 undefined；一般很少直接给变量赋 undefined。
怎么做： 声明变量但不赋值，打印 typeof 观察结果。
易错点： 不要把它和字符串 'undefined' 混淆；变量最终是什么类型，由它的值决定。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

小结：先看值，再检测，后使用

本节要抓住一个顺序：先判断数据的值长什么样，再用 typeof 检测类型，最后决定能不能计算或拼接。数字型用于计算；字符串型用引号包裹；模板字符串用反引号和 ${}；布尔型只有 true、false；只声明未赋值得到 undefined。JavaScript 中变量的值决定了变量的数据类型，变量名本身不是字符串。

本节把 JS 中常用运算符串起来：先会算，再会更新变量，最后会组合条件判断。每个知识点都按“为什么需要 → 怎么想 → 怎么做 → 易错点”来理解。

算术运算符

为什么需要：数字要参与加减乘除、取余等计算。怎么想：先乘除后加减，有括号先算括号；取模就是取余数，常用来判断能否整除。怎么做：调试 1 + 2 * 3 / 2 时，先算 2 * 3 得 6，再 6 / 2 得 3，最后 1 + 3 得 4；4 % 2 商 2 余 0，3 % 5 因前小后大，余数就是 3。易错点：% 是取模不是百分号；计算失败返回 NaN（not a number）；+ 遇到字符串会拼接，而减、乘可能得到 NaN。

// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 
let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20

// 1. 取模(取余数)  使用场景：  用来判断某个数是否能够被整除
console.log(4 % 2) //  0  
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3

// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
console.log('pink' - 2)
console.log('pink' * 2)
console.log('pink' + 2)   // pink2

赋值运算符

为什么需要：变量经常要“自己更新自己”，如价格累加。怎么想：num = num + 1 可简写为 num += 1。怎么做：num 初值为 1，执行 num += 1 后输出 2，等价于把右边计算结果再赋值给左边。易错点：笔记表格中的“-+”应为“-=”；等号左边必须是变量容器；+= 不只能加 1，也能 num += 5。

// 赋值运算符
let num = 1
// 1. 需求 我们想要num变量里面的值 + 1， 加完之后再把计算结果存到num里面
// num = num + 1
// console.log(num)

// 2. += 赋值运算符
num += 1   // 当前情况下是等价于  num = num + 1
console.log(num)

自增/自减运算符

为什么需要：商品数量点一下加一、减一，用自增自减更方便。怎么想：单独使用时 x++ 和 ++x 没区别；参与运算时，前缀式先加一再运算，后缀式先运算再加一。怎么做：let x=3; let y=x++，先把 3 赋给 y，再让 x 变 4，所以 y 是 3、x 是 4。易错点：只能对变量使用，不能写 5++；开发中多单独使用，且后缀式更常见。

// 1. 自增运算符： 可以让变量里面的值加1
// let x = 3
// // x++   // x = x + 1 或者  x += 1 
// ++x
// console.log(x)

// 2. ++在前和++在后的区别。 如果单独使用，没有区别，如果参与了运算就有区别
// 2.1 ++在前  前缀式 ： 先对变量值+1， 然后拿着变量值做运算
// let x = 3
// let y = ++x
// console.log(y) // 4
// console.log(x) // 4

// 2.2 ++在后 后缀式 ： 先拿着变量值运算，再对变量值+1 
let x = 3
let y = x++
console.log(y) // 3
console.log(x) // 4

比较运算符

为什么需要：比较两个数据大小或是否相等，并返回布尔值。怎么想：判断相等优先用 === 全等，要求值和类型都相等；== 只比值，使用较少。怎么做：3 === 3 为 true，3 === '3' 为 false，因为类型不同；3 != 3 为 false。易错点：= 是赋值不是比较；3 == '3' 为 true，容易误判；推荐使用 ===。

// 比较运算符： 根据比较结果返回 布尔值 true / false 
console.log(3 > 5)  // false
console.log(3 < 5) // true
console.log(3 >= 5)  //  false 
console.log(3 >= 3)  // true
console.log(3 <= 5)  // true

// console.log(3 = 3)  // 错误
// 1. 判断是否相等我们使用 ===  要求 值 和 数据类型都相等返回的结果才是true,提倡使用三等  全等
console.log(3 === 3)    // true 
console.log(3 === '3') //  false 

console.log(3 !== 3)  // false 
console.log(3 !== '3') // true

// 2. == 判断是否相等，使用较少, 判断值是否相等，并不判断数据类型是否相等
console.log(3 == 3)  // true 
console.log(3 == '3') //  true 
console.log(3 != 3) // false

逻辑运算符

为什么需要：把多个条件组合起来判断，如“数字在 8096 到 36999 之间”。怎么想：&& 一假则假，|| 一真则真，! 取反。怎么做：num=1000 时，num >= 8096 && num <= 36999 为 false，因为第一个条件不满足。易错点：&& 和 || 不要混用；条件要写完整；! 优先级较高。

// 逻辑运算符:  逻辑与 &&  逻辑或 ||  逻辑非 ! 
// 1.逻辑与 &&  一假则假
console.log(false && false)  // false
console.log(false && true)  // false
console.log(true && false)  // false
console.log(true && true)  // true
console.log(3 > 5 && 2 < 4)  // false 
// 判断某个数字是否在 8096到36999 之间： 数字大于等于 8096 并且小于等于36999
let num = 1000
console.log(num >= 8096 && num <= 36999)  // false

console.log('------')
// 2. 逻辑或 ||   一真则真
console.log(true || false)  // true
console.log(false || true)  // true
console.log(true || true)  // true
console.log(false || false)  // false
console.log('------')

// 3. 逻辑非 取反
console.log(!false)  // true
console.log(!true)  // false

运算符优先级

为什么需要：复杂表达式必须确定先算谁。怎么想：先括号，再乘除取模，后加减；逻辑运算符优先级是 ! > && > ||。怎么做：拿不准就加小括号，让代码按人的意图执行。易错点：不要凭感觉判断优先级；逻辑组合多时，括号最稳妥。

逻辑运算符优先级：! > && > ||

课件图示

代码示例

示例一：数据类型与模板字符串（HTML + JS）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  <script>
    // 1. 数字型：整数、小数、正数、负数
    let num1 = 18.88
    console.log(typeof num1)   // number

    // 2. 字符串型：单引号 / 双引号 / 反引号
    let goods = '笔记本电脑'
    let address = "黑马程序员"
    let color = `粉红色`
    console.log(typeof goods)    // string
    console.log(typeof address)  // string

    // 变量加引号就变成字符串了
    console.log('goods')         // goods

    // 字符串嵌套：外单内双 或 外双内单
    console.log('今日特价"跳楼大甩卖"速速抢购')
    console.log("今日特价'跳楼大甩卖'速速抢购")

    // 3. 模板字符串：拼接字符串和变量
    let age = 91
    console.log('pink今年' + age + '岁')
    console.log(`pink今年${age}岁`)

    // 4. 布尔类型
    let isCool = true
    isCool = false
    document.write(typeof isCool)  // boolean

    // 5. undefined：只声明不赋值
    let tmp
    document.write(typeof tmp)     // undefined
  </script>
</body>
</html>

关键行与易错点

• typeof 变量 用来检测数据类型，结果是字符串，如 'number'、'string'、'boolean'、'undefined'。
• console.log('goods') 输出的是字符串 goods，不是变量里的值——变量名一定不要加引号。
• 引号嵌套口诀：外双内单，或外单内双，不能自己嵌套自己。
• 模板字符串必须用反引号，变量放在 \${ } 中，且反引号内的字符串可以换行。
• JavaScript 中变量的值决定了变量的数据类型。

---

示例二：算术运算符 + 商品小计案例（HTML + JS）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品小计</title>
</head>
<body>
  <script>
    // 1. 算术运算符
    console.log(1 + 2 * 3 / 2)   // 4，先乘除后加减
    let num = 10
    console.log(num + 10)        // 20
    console.log(num + num)       // 20

    // 2. 取模（取余数）：判断某个数能否被整除
    console.log(4 % 2)           // 0
    console.log(6 % 3)           // 0
    console.log(5 % 3)           // 2
    console.log(3 % 5)           // 3，前数比后数小，余数就是前数

    // 3. 计算失败返回 NaN（not a number）
    console.log('pink' - 2)  // NaN
    console.log('pink' * 2)  // NaN
    console.log('pink' + 2)  // pink2（加号做字符串拼接）

    // 4. 商品小计：输入 → 处理 → 输出
    let price = prompt('请输入商品单价')
    let number = prompt('请输入购买的数量')
    let result = price * number
    document.write(`小计：人民币${result}元`)
  </script>
</body>
</html>

关键行与易错点

• 乘号是 *、除号是 /、取模是 %，写法与数学不同。
• 取模使用场景：判断某个数能否被整除，余数为 0 说明能整除。
• 计算失败返回 NaN；只要看到结果是 NaN，就说明很可能用错了数据类型做运算。
• + 是特殊的：一边是字符串时会变成拼接（'pink' + 2 得 'pink2'），而 -、*、/ 会得到 NaN。
• prompt 拿到的是字符串，参与 * 运算时会隐式转成数字；如果用户输入非数字，结果就会出现 NaN。

---

示例三：赋值、自增自减、比较、逻辑运算符（HTML + JS）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 运算符</title>
</head>
<body>
  <script>
    // 1. 赋值运算符
    let num = 1
    // num = num + 1
    num += 1          // 等价于 num = num + 1
    console.log(num)  // 2

    // 2. 自增：++ 在前（前缀式）与 ++ 在后（后缀式）
    let x = 3
    let y = x++       // 先拿 3 做运算，再对 x 加 1
    console.log(y)    // 3
    console.log(x)    // 4

    let a = 3
    let b = ++a       // 先对 a 加 1，再拿结果做运算
    console.log(b)    // 4
    console.log(a)    // 4

    // 3. 比较运算符：返回布尔值
    console.log(3 > 5)     // false
    console.log(3 >= 3)    // true
    console.log(3 === 3)   // true
    console.log(3 === '3') // false，全等要求值和类型都相等
    console.log(3 == '3')  // true，双等只比值，开发中少用
    console.log(3 !== '3') // true

    // 4. 逻辑运算符
    console.log(true && true)   // true，一假则假
    console.log(true || false)  // true，一真则真
    console.log(!false)         // true，真变假、假变真

    let n = 1000
    console.log(n >= 8096 && n <= 36999)  // false
  </script>
</body>
</html>

关键行与易错点

• += 是 num = num + 1 的简写；同类的还有 -=、*=、/=、%=。
• 自增自减只能用于变量，写成 ++5 会报错；单独使用时 x++ 和 ++x 没有区别，只有参与运算时才有区别。
• 口诀：++ 在前先加一再用，++ 在后先用再加一。
• 判断相等用 ===（全等，值和类型都要相等），不要写成 =——= 是赋值，3 = 3 会直接报错。
• 逻辑运算符优先级：! > && > ||。

常见错误

1. 现象：console.log('goods') 输出 goods，误以为取到了变量值。
   原因：变量名加了引号后变成字符串字面量。
   修法：取变量值直接写 goods；检测类型写 typeof goods。

2. 现象：字符串里外层使用同一种引号，代码截断或报语法错误。
   原因：引号自嵌套。
   修法：改成“外单内双”或“外双内单”；复杂拼接直接用反引号模板字符串。

3. 现象：'pink' - 2 得到 NaN，误以为程序报错。
   原因：非数字型数据参与了减法/乘法/除法运算。
   修法：先用 typeof 定位操作数类型；计算前确保参与算术运算的是数字型，字符串拼接用 + 或模板字符串。

4. 现象：3 = 3 报“赋值左侧无效”。
   原因：单等号 = 是赋值运算符，不是相等判断。
   修法：相等判断用 ===，不等判断用 !==。

5. 现象：3 == '3' 返回 true，导致表单校验或条件判断误判。
   原因：== 只比较值并发生隐式类型转换。
   修法：项目中统一使用 === / !==，要求值和类型同时比较。

6. 现象：let y = x++ 与 let y = ++x 结果混淆。
   原因：前后缀参与运算时，“先取值还是先自增”的顺序不同。
   修法：自增自减尽量单独使用；必须参与运算时拆成两步写，避免依赖前后缀差异。

7. 现象：num += 1 写成 num =+ 1，结果变成 1。
   原因：=+ 被解析为赋值加正号，不是加法赋值。
   修法：检查符号顺序，正确写 +=；读代码时还原为 num = num + 1 验证。

8. 现象：只声明未赋值的变量参与计算，结果出现 NaN。
   原因：变量默认值为 undefined，参与算术运算失败。
   修法：使用前先初始化；排查时打印变量值和 typeof 结果。

练习

1. 改错：let price = 100; console.log('price'); 要求输出变量 price 的值，并再输出它的数据类型。

2. 预测输出并说明原因：

   let x = 5
   let y = x++
   console.log(y, x)
   let z = ++x
   console.log(z, x)

3. 用 prompt 输入商品单价和数量，用模板字符串输出：小计人民币xx元。要求单价和数量参与乘法计算。

4. 判断并改法：

   console.log(3 == '3')
   console.log(3 === '3')
   console.log(3 !== '3')

   说明项目中应优先使用哪一种相等判断写法。

5. 写表达式判断变量 n 是否既能被 2 整除、又能被 5 整除；再用一个表达式判断 n 是否为偶数。

原视频对照

#	视频	时长
1	算术运算符	11:49
2	商品小计案例	05:11
3	赋值运算符	07:59
4	自增运算符	10:38
5	比较运算符	08:56

小结

1. 变量的值决定数据类型，typeof 是定位类型问题的第一工具。
2. 字符串边界和嵌套优先用模板字符串，能同时规避引号嵌套和拼接漏 + 的问题。
3. 算术运算出现 NaN 时，先查操作数类型，不要先怀疑运算符本身。
4. 取模结果适合做整除、奇偶判断；余数为 0 才表示能整除。
5. 赋值类运算符先还原成 x = x op y 再读，自增自减尽量单独使用。
6. 相等判断默认用 === / !==，不要把 == 的隐式转换当成可靠比较。
7. 复杂逻辑表达式用括号明确优先级，不要依赖记忆。
8. 交互案例固定按“输入并保存 → 处理计算 → 输出展示”三步写，每步都用控制台验证。