JavaScript核心基础：深入理解与应用的全面指南

继续

本文章是 深入了解JavaScript：从基础语法到高级应用的全面指南 的接续。先看这篇文章有助于理解哦。

案例: 用户订单信息

编写HTML和CSS

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
</head>
<body>
    <h1 class="">订单确认</h1>
    <script src="script.js"></script>
</body>
</html>

✨ 提示: 表格生成可以在VSCode中使用快捷键 table>tr>th*5 来生成

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
h1 {
    text-align: center;
}

table, th, td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    height: 80px;
    margin: 0 auto;
    text-align: center;
}

th {
    padding: 5px 30px;
}

td {
    padding-left: 20px;
    padding-right: 20px;
}

编写JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 声明变量
let price = +prompt("商品价格")
let num = +prompt("商品数量")
let address = prompt("收货地址")

// 计算总额
let totle = price * num

document.write(`
    <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>${price}</td>
                <td>${num}</td>
                <td>${totle}</td>
                <td>${address}</td>
            </tr>
        </table>
`)

直接 document.write() 和模板字符串即可输出整个表格.

运算符

赋值运算符

对变量进行赋值的运算符

名称 表达式 描述
基本赋值运算符 x = y 将变量y 的值赋给 x
加法赋值运算符 x += y 等价于x = x + y
减法赋值运算符 x -= y 等价于x = x - y
乘法赋值运算符 x *= y 等价于x = x * y
除法赋值运算符 x /= y 等价于x = x / y
求余赋值运算符 x %= y 等价于x = x % y
指数赋值运算符 x **= y 等价于x = x ** y

这里以指数赋值运算符举个例子

1
2
3
4
5
6
let x = 5;
let y = 3;

x **= y; // 等价于 x = x ** y

console.log(x); // 输出 125，因为 5 的 3 次幂是 125

自增运算符

自增：++ ， 让变量的值加1
自减：-- ， 让变量的值减1

1
2
3
4
5
let num = 1;
// 前置自增（后置自增:num++）
++num
// 输出结果
console.log(num);

其作用相当于 num+=1

前置自增和后置自增有区别吗？
  • 前置自增和后置自增单独使用没有区别。
  • 但是进行运算时有区别，如下：
1
2
3
4
let num = 1;

console.log(++num + 1); // 输出3
console.log(num++ + 1); // 输出2

比较运算符

介绍

  • 比较运算符比较它的操作数并返回一个基于表达式是否为真的逻辑值。操作数可以是数字，字符串，逻辑，对象值。字符串比较是基于标准的字典顺序，使用 Unicode 值。在多数情况下，如果两个操作数不是相同的类型，JavaScript 会尝试转换它们为恰当的类型来比较。这种行为通常发生在数字作为操作数的比较。类型转换的例外是使用 === 和 !== 操作符，它们会执行严格的相等和不相等比较。这些运算符不会在检查相等之前转换操作数的类型。
  • 字符串比较，是比较字符串对应的 ASCII码
  • 使用场景：比较两个数据，是否相等。

参数

运算符 描述
== 等于
=== 值相等并且类型相等
!= 不相等
!== 值不相等或类型不相等
> 大于
< 小于
>= 大于或等于
<= 小于或等于

建议以后写相等时就用 === ，因为 == 有很多复杂情况，不利于开发。

1
2
3
4
5
6
7
console.log(3 > 5); // 输出 false
console.log(3 < 5); // 输出 true
console.log(3 == '3'); // 输出 true
console.log(3 === '3'); // 输出 false
console.log(undefined == null); // 输出 true
console.log(undefined === null); // 输出 false
console.log(NaN === NaN); // 输出 false ，注意：NaN不等于任何，包括它自己。（涉及到NaN的都是false）

对比

  • = 是赋值。
  • == 是判断。
  • === 是全等。
  • 开发中判断是否相等，强烈推荐使用 === 。尽量不要比较小数，因为有精度问题。

逻辑运算符

如果我想表达一个num大于5小于10，怎么办？

错误写法：5 < num <10
正确写法：num > 5 && num < 10

符号 名称 日常读法 特点 口诀
&& 逻辑与 并且 符号两边都为true结果才是true 一假则假
` ` 逻辑或 或者
! 逻辑非 取反 true变false，false变true 真变假，假变真 
1
2
3
4
5
6
console.log(true && true) // true
console.log(true && false) // false
console.log(true || false) // true
console.log(true || true) // true
console.log(false || false) // false
console.log(!true) // false
练习：判断一个数是4的倍数，且不是100的倍数。

题目：用户输入一个数字，判断一个数是4的倍数，且不是100的倍数。满足条件打True，不满足打False。
代码如下：

1
2
3
let num = prompt("请输入一个数字：")

alert(num % 4 === 0 && num %100 !== 0)

优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ – !
3 算数运算符 先 * / % 后 + -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先 && 后 ||
7 赋值运算符 =
8 逗号运算符 ,

分支语句

if语句

  1. 单分支使用用法

    1
    2
    3
    if (条件) {
        执行的代码
    }
    • 括号内的条件为true时，进入大括号里执行代码
    • 小括号内的结果若不是布尔类型时，会发生隐式转换为布尔类型

  2. 双分支使用方法

    1
    2
    3
    4
    5
    if (条件){
        满足条件后执行的代码
    } else {
        不满足条件后执行的代码
    }

  3. 多分支使用方法

    1
    2
    3
    4
    5
    6
    7
    if (条件1){
        满足条件1执行代码
    } else if(条件2){
        满足条件2执行代码
    } else {
        不满足条件执行代码
    }
    • 可以写N个 else if(){} 语句。

三元运算符

  • 使用场景：其实是比if双分支更简单的写法，可以使用三元表达式。一般用来取值。
  • 符号 ? 与 : 配合使用
  • 语法
1
条件?满足后执行的代码:不满足执行的代码
练习：用户输入两个数，输出最大的一个 
1
2
3
4
var1 = prompt('请输入一个值：')
var2 = prompt('请再输入一个值：')

console.log(var1 > var2 ? var1 : var2)

如果用户输入var1 = 1, var2 = 2 ；就会输出 2。

练习：数字补零案例 
1
2
3
4
5
// 用户输入
let num = +prompt("请输入一个数字：")

// 判断
num < 10 ? '0' + num : num

switch语句

switch 语句用于基于不同的条件来执行不同的动作。

1
2
3
4
5
6
7
8
9
10
11
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}
  1. 我们开发里面表达式我们经常写成变量
  2. 我们num的值和case里面的值相匹配的时候是全等必须是值和数据类型一致才可以num===1
  3. break如果当前的case里面没有 break则不会退出 switch是継执行下一个case
例：今天星期几？ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
}
例：default 关键词 
1
2
3
4
5
6
7
8
9
10
11
var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}
document.getElementById("demo").innerHTML=x;