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

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

学习目标

• 能列举逻辑与 &&、逻辑或 ||、逻辑非 ! 的符号与含义，并依据“一假则假、一真则真、取反”判断给定表达式的结果。
• 能结合取余运算、比较运算符和逻辑与，编写程序判断某数是否为 4 的倍数且不是 100 的倍数，并用 alert 输出 true 或 false。
• 能按运算符优先级正确计算含小括号、算术运算、比较运算、逻辑运算和赋值的表达式，并说明其执行顺序。
• 能按“输入数据—处理数据—输出数据”三步实现商品订单案例，声明变量接收单价、数量和收货地址，并计算总价。
• 能使用模板字符串将单价、数量、总价和收货地址填充到页面表格的指定单元格中，并保留单位字符完成页面渲染。

知识点

算术运算符

为什么需要：页面里算价格、数量、总价，都离不开加减乘除；判断一个数能否被另一个数整除，则常用取余。

怎么想：先按数学运算理解，再注意 JavaScript 里 % 不是百分号，而是“取余数”。例如 5 % 3 余 2，说明 5 不能被 3 整除；4 % 2 余 0，说明能被 2 整除。

怎么做：

// 算术运算符
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

易错点：计算失败会得到 NaN（not a number）。'pink' + 2 不是数学加法，而是字符串拼接，结果是 pink2；-、* 等无法计算时才出现 NaN。

赋值运算符

为什么需要：变量值经常要在原值基础上变化，例如数量加 1、总价累加。每次都写 num = num + 1 较啰嗦，于是用赋值运算符简化。

怎么想：= 是把右边值赋给左边，左边必须是变量容器；+= 表示“先加再存回去”。

怎么做：

运算符	作用
+=	加法赋值
-=	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

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

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

易错点：num += 1 等价于 num = num + 1，不是比较相等；= 是赋值，判断相等要用比较运算符。

自增/自减运算符

为什么需要：循环、计数时经常让变量自身加 1 或减 1，++、-- 写起来更短。

怎么想：单独写 x++ 或 ++x 都是让 x 加 1；参与其他运算时，前缀式先加再运算，后缀式先运算再加。

怎么做：

// 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++；单独使用时前后缀无差别，参与赋值时结果不同。

比较运算符

为什么需要：判断大小、是否相等，结果要返回 true 或 false，供条件判断使用。

怎么想：>、<、>=、<= 比大小；判断相等优先用 ===，要求类型和值都相等。

怎么做：

// 比较运算符： 根据比较结果返回 布尔值 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

易错点：3 = 3 是赋值写法，比较相等要用 ===；3 == '3' 为 true，3 === '3' 为 false，开发中提倡全等。

逻辑运算符

为什么需要：筛选商品时往往有多个条件，例如“型号满足并且内存满足”“会 Vue 或者会 React 都可以”。多个布尔值要合在一起判断。

怎么想：&& 读“并且”，一假则假；|| 读“或者”，一真则真；! 取反，真变假、假变真。

怎么做：

// 逻辑运算符:  逻辑与 &&  逻辑或 ||  逻辑非 ! 
// 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

易错点：判断区间不能写成 8096 <= num <= 36999，要写成 num >= 8096 && num <= 36999。转写稿中调试：num = 1000 时前半为假，结果为 false；改成 10000 时两个条件都真，结果为 true。判断倍数案例中，number % 4 === 0 && number % 100 !== 0：输入 100，第一条件真、第二条件假，输出 false；输入 2008，两条件都真，输出 true。

运算符优先级

为什么需要：一行里同时出现算术、比较、逻辑运算符时，必须知道谁先算，否则结果会理解错。

怎么想：有小括号先算小括号；自增自减、! 较靠前；算术里先乘除取余后加减；再比较；逻辑里 ! > && > ||；赋值最低。

怎么做：转写稿中的表达式可拆成三段理解：(2000 % 4 === 0) && (2000 % 100 !== 0) || (2000 % 400 === 0)。先算小括号：第一段 true，第二段 false，第三段 true；再算 true && false 得 false；最后 false || true 得 true。

易错点：不要以为 && 和 || 同级，&& 优先于 ||；不确定时主动加小括号，让执行顺序清晰。

案例目标与页面效果

本节做一个“商品订单信息页面”：用户依次输入商品单价、商品数量和收货地址，页面自动计算总价，并把订单信息渲染成表格。效果如下图。

为什么需要：这个案例把变量、运算符、模板字符串、document.write 串起来，是典型的“输入数据 → 处理数据 → 输出数据”交互流程。
怎么想：不要一上来写表格，先按三步拆：要输入几个数据？要计算什么？最后输出到哪里？
怎么做：输入 3 个数据，用 3 个变量保存；总价 = 单价 × 数量；输出时用模板字符串把变量填进表格。
易错点：变量名要对应清楚；总价不要手写死；表格里的“元”要保留，变量只替换数字部分。

第一步：输入数据

为什么需要：订单信息来自用户，不能写死在代码里，所以要用 prompt 接收输入。
怎么想：需要单价、数量、地址三个数据，就声明三个变量：price、num、address。
怎么做：

let price = prompt('请你输入商品单价:')
let num = prompt('请您输入商品数量:')
let address = prompt('请您输入收货地址:')

转写稿中先写三段注释：“输入数据、处理数据、输出数据”，再逐步补代码。这里 prompt 返回的是字符串，后面做乘法时 JavaScript 会按运算需要处理；如果输入的不是可计算数字，结果就可能不符合预期。
易错点：变量名不要拼错，例如 price 不要写成 priice；三个输入顺序要和提示语一致。

第二步：处理数据

为什么需要：页面要显示总价，而总价不能靠用户输入，必须由单价和数量计算得到。
怎么想：总价 = 单价 × 数量，用一个变量 total 保存。
怎么做：

let total = price * num  // 计算总价
// alert(total)

转写稿里的调试过程是：先写 alert(total) 验证计算是否正确。输入单价 100、数量 2，弹出 200，说明乘法逻辑正确；确认后再把 alert 注释掉，进入输出数据阶段。
易错点：不要写成 price + num；total 要在输出前计算好；调试完记得注释或删除 alert，避免每次刷新都弹窗。

第三步：输出数据

为什么需要：只算出总价还不够，最终要把订单信息展示在页面上。
怎么想：页面里要输出一整张表格，表格中又夹着变量，所以用模板字符串最合适：反引号包住 HTML，\${变量} 填数据。
怎么做：用 document.write() 把表格写入页面，把示例价格、数量、总价、地址替换成 \${price}、\${num}、\${total}、\${address}。注意“元”要保留在变量外面。
易错点：模板字符串必须用反引号，不是单引号；插值写法是 ${}；document.write 拼 HTML 时标签要闭合完整。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合案例-商品订单信息页面</title>
  <style>
    .title {
      text-align: center;
      color: #3e3e3e;
    }

    .order {
      /* 合并相邻边框 */
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
    }

    /* 给行添加渐变背景颜色 */
    .order tr:nth-child(1) {
      background-image: linear-gradient(to right, #f46e33, #f057a5);
    }

    .order tr:nth-child(2) {
      background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
    }

    .order tr:nth-child(2) :last-child {
      color: #f282bb;
    }

    .order th {
      padding: 5px 50px;
      color: #fff;
    }

    .order,
    th,
    td {
      border: 1px solid #fff;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <h2 class="title">订单详情页面</h2>

  <script>
    // 1. 输入数据
    let price = prompt('请你输入商品单价:')
    let num = prompt('请您输入商品数量:')
    let address = prompt('请您输入收货地址:')
    // 2. 处理数据
    let total = price * num  // 计算总价
    // alert(total)

    // 3. 输出数据
    document.write(`
    <table class="order">
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
      </tr>
      <tr>
        <td>小米青春版PLUS</td>
        <td>${price}元</td>
        <td>${num}</td>
        <td>${total}元</td>
        <td>${address}</td>
      </tr>
  </table>
  `)

  </script>
</body>

</html>

调试过程与易错点

转写稿中先完成输入和计算，用 alert(total) 验证；确认 100 × 2 = 200 后，再把表格 HTML 粘进模板字符串，逐个把示例数据替换成 \${price}、\${num}、\${total}、\${address}。最后刷新页面，输入 1 万、2 件，总价显示 2 万；再输入 1 万、5 件，总价显示 5 万，说明变量填充正确。
易错点：① prompt 提示语和变量顺序要对应；② 总价用 *，不要用 +；③ 模板字符串用反引号；④ 表格里的“元”不要删；⑤ 调试用的 alert 最后要注释掉。

课件图示

代码示例

示例 1：运算符全家桶（算术 / 赋值 / 自增 / 比较 / 逻辑 / 优先级）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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

    // 取模：判断能否被整除
    console.log(4 % 2)           // 0
    console.log(6 % 3)           // 0
    console.log(5 % 3)           // 2
    console.log(3 % 5)           // 3

    // 计算失败 → NaN
    console.log('pink' - 2)  // NaN
    console.log('pink' * 2)  // NaN
    console.log('pink' + 2)  // pink2（+ 变成了拼接）

    // ---------- 2. 赋值运算符 ----------
    let n = 1
    n += 1                       // 等价于 n = n + 1
    console.log(n)               // 2

    // ---------- 3. 自增自减 ----------
    let x = 3
    let y = x++                  // 后缀式：先赋值再 +1
    console.log(y)               // 3
    console.log(x)               // 4

    // ---------- 4. 比较运算符 ----------
    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

    // ---------- 5. 逻辑运算符 ----------
    console.log(false && true)   // false  一假则假
    console.log(true || false)   // true   一真则真
    console.log(!false)          // true   取反

    // 逻辑与 + 比较运算符：判断区间
    let price = 1000
    console.log(price >= 8096 && price <= 36999)   // false

    // ---------- 6. 运算符优先级 ----------
    console.log((2000 % 4 === 0) && (2000 % 100 !== 0) || (2000 % 400 === 0))
    // (true) && (false) || (true) → false || true → true
  </script>
</body>
</html>

关键行与易错点

• 1 + 2 * 3 / 2 得 4 而不是 4.5 之外的其它值，因为乘除取余优先级高于加减，同级从左往右算。
• 'pink' + 2 不会 NaN，+ 遇到字符串是拼接；只有 - * / 等运算失败才返回 NaN。
• n += 1 是 n = n + 1 的简写，别写成 n =+ 1。
• x++ 与 ++x 单独使用时没区别；参与运算时才有区别：后缀式先取值再 +1。
• 判断相等要用 ===（全等），3 === '3' 为 false；= 是赋值，3 = 3 直接报错。
• 逻辑非 ! 优先级最高，其次 &&，最后 ||，所以 true && false || true 结果是 true。
• 优先级记不住就加小括号，代码可读性更好。

---

示例 2：判断倍数案例（取余 + 全等 + 逻辑与）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>判断倍数</title>
</head>
<body>
  <script>
    // 1. 输入数据
    let number = prompt('请你输入一个数字:')

    // 2. 处理数据：是 4 的倍数，并且不是 100 的倍数
    let result = number % 4 === 0 && number % 100 !== 0

    // 3. 输出数据
    alert(result)
  </script>
</body>
</html>

关键行与易错点

• number % 4 === 0：余数为 0 说明能被 4 整除，即 4 的倍数。
• number % 100 !== 0：余数不等于 0 说明不能被 100 整除，即不是 100 的倍数。
• 两个条件用 && 连接，因为需求是“并且”，一假则假：输入 100 时第一条件 true、第二条件 false，最终 false。
• 判断相等一定写三等号 ===，写成 = 会变成赋值，逻辑全错。
• 不等于写 != 或 !==，不要漏掉叹号。
• 输入 2008 时两个条件都是 true，alert 弹出 true，验证逻辑与的“一真需全真”。

---

示例 3：综合案例 —— 商品订单信息页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合案例-商品订单信息页面</title>
  <style>
    .title {
      text-align: center;
      color: #3e3e3e;
    }

    .order {
      /* 合并相邻边框 */
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
    }

    /* 给行添加渐变背景颜色 */
    .order tr:nth-child(1) {
      background-image: linear-gradient(to right, #f46e33, #f057a5);
    }

    .order tr:nth-child(2) {
      background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
    }

    .order tr:nth-child(2) :last-child {
      color: #f282bb;
    }

    .order th {
      padding: 5px 50px;
      color: #fff;
    }

    .order,
    th,
    td {
      border: 1px solid #fff;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <h2 class="title">订单详情页面</h2>

  <script>
    // 1. 输入数据
    let price = prompt('请你输入商品单价:')
    let num = prompt('请您输入商品数量:')
    let address = prompt('请您输入收货地址:')

    // 2. 处理数据
    let total = price * num   // 计算总价

    // 3. 输出数据
    document.write(`
    <table class="order">
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
      </tr>
      <tr>
        <td>小米青春版PLUS</td>
        <td>${price}元</td>
        <td>${num}</td>
        <td>${total}元</td>
        <td>${address}</td>
      </tr>
  </table>
  `)
  </script>
</body>
</html>

关键行与易错点

• 三步思路固定：输入数据（prompt 拿 3 个变量）→ 处理数据（total = price * num）→ 输出数据（document.write 渲染表格）。
• prompt 返回的是字符串，price * num 靠隐式转换能算对；但如果写成 price + num 就变成字符串拼接，这是最容易踩的坑。
• 模板字符串必须用反引号 ` 包裹，变量用 \${变量名} 插入；用单双引号包裹则 \${} 会原样输出。
• \${price}元 里的“元”字要保留在花括号外面，变量本身只是数字。
• 表格 HTML 是整段写进 document.write 的，标签里的 class="order" 要和 CSS 对应，否则样式不生效。
• document.write 只能在页面加载阶段写，写在按钮点击等后续事件里会把整个页面覆盖掉。

常见错误

1. 把赋值当相等判断

• 现象：if (num = 0) 条件永远进不去（或永远进去），控制台也不报错。
• 原因：单个 = 是赋值运算符，把 0 赋给 num 后整个表达式的值就是 0，属于假值。
• 修法：判断相等一律写 ===；写完扫一眼条件里有没有孤零零的单个等号。

2. prompt 拿到的是字符串，加法变成拼接

• 现象：单价 100、数量 2，price + num 得到 "1002" 而不是 102；但 price * num 却算对了。
• 原因：prompt 返回字符串，+ 遇到字符串走拼接，* 会隐式转数字，所以两种运算符表现不一致。
• 修法：拿到输入后立刻 let price = Number(prompt('单价'))，或写 +prompt(...)，先转再算。

3. 区间判断照抄数学写法

• 现象：num >= 8096 && num <= 36999 想验证是否生效，改成 8096 <= num <= 36999 后，输入 1 也返回 true。
• 原因：<= 从左到右先算，8096 <= num 得到一个布尔值，再拿布尔值和 36999 比较，恒为 true。
• 修法：区间必须拆成两个比较，中间用 && 连接；记不住就用括号 (num >= 8096) && (num <= 36999)。

4. && 和 || 混用不加括号

• 现象：num > 5 || num < 10 && num !== 0 的结果和预期完全不同。
• 原因：&& 优先级高于 ||，实际执行顺序是 num > 5 || (num < 10 && num !== 0)。
• 修法：只要同一行同时出现 && 和 ||，无条件加括号表达意图，别靠优先级去赌。

5. 把自增写进表达式

• 现象：let y = x++ 后 y 比预期少 1；let y = ++x 又对不上；3++ 直接报错。
• 原因：后缀式先取值再自增，前缀式先自增再取值；且自增只能作用于变量。
• 修法：自增自减单独成行写（x++），需要取值时用 x = x + 1 或 x += 1 显式写。

6. 判断整除时把条件写反

• 现象：判断“不是 100 的倍数”写成 num % 100 === 0，结果全反了。
• 原因：% 结果为 0 表示能整除，!== 0 才表示不能整除。
• 修法：先在心里翻译成中文——num % 4 === 0 读作“能被 4 整除”，再决定用 === 还是 !==。

7. 模板字符串里单位被变量吃掉

• 现象：总价显示成 20000，后面的“元”没了。
• 原因：把单位写进了变量，或者替换时把单元格里的 元 一并删掉了。
• 修法：变量只存数字，单位写死在模板里：<td>\${total}元</td>。

练习

练习 1｜闰年判断 用 prompt 输入年份，判断是否闰年：能被 4 整除且不能被 100 整除，或能被 400 整除。用 alert 输出 true / false。 要求：一行表达式写完，并说明你加了几对括号、为什么。

练习 2｜手算优先级 先不运行，写出下面每行结果，再上机验证：

console.log(2 + 3 * 4 % 5 > 3 && !false || 1 > 2)
console.log('8' - 2, '8' + 2, '8' * '2')
console.log(4 % 2 === 0 && 4 / 2)

练习 3｜预测自增

let a = 5
let b = a++ + ++a
console.log(a, b)

先写答案再运行；若结果与预期不符，指出错在哪一步、前缀后缀各自取到了什么值。

练习 4｜改造订单案例 在商品订单案例基础上增加两条规则：

• 总价 ≥ 99 时，在表格里额外显示“包邮”，否则显示“运费 10 元”；
• 数量输入为 0 时，总价列显示“请至少购买 1 件”。 提示：只允许改“处理数据”和“输出数据”两段，输入段不动。

练习 5｜用取模做奇偶分组 输入一个数字，输出它“是奇数”还是“是偶数”，并额外输出它是否能同时被 3 和 5 整除。要求两个结论都用布尔值或三元判断给出，不许用 if 分支堆叠超过两层。

原视频对照

#	视频	时长
1	逻辑运算符	12:18
2	判断倍数案例	06:20
3	运算符优先级	05:36
4	综合案例-商品订单上	07:13
5	综合案例-商品订单下	04:31

小结

1. 判断相等只有一条默认规则：写 ===。== 出现在代码里就必须能说出为什么非它不可。
2. prompt 的返回值一律当字符串处理，做加法前先转换类型，否则 + 会静默变成拼接。
3. 区间判断在 JS 里没有数学简写，必须拆成两个比较再用 && 连接。
4. % 的结果是不是 0，是判断整除的唯一依据，也是倍数类题目的通用入口。
5. 优先级表只用来核对，不用来记忆——&& / || 混用、比较与逻辑混用时加括号，成本最低、可读性最好。
6. 自增自减只写独立语句，不塞进表达式，能避免九成的前后缀混淆问题。
7. 交互类需求固定走“输入 → 处理 → 输出”三段，先跑通 alert 验证数据，再做 document.write 渲染。
8. 模板字符串负责拼装，变量只装纯数据，单位、文案、标签都留在模板里。