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结果是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语句