JavaScript基础知识点总结：从零开始学习JavaScript（二）

如果大家感感兴趣也可以去看：

🎉博客主页：阿猫的故乡

🎉系列专栏：JavaScript专题栏

🎉ajax专栏：ajax知识点

🎉欢迎关注：👍点赞🙌收藏✍️留言

目录

学习目标：

学习内容：

学习时间：

学习产出：

运算符

• 赋值运算符

• 一元运算符

自增运算符的用法：

​编辑

• 比较运算符

• 逻辑运算符

• 运算符优先级 

语句 

• 表达式和语句

• 分支语句

Ø If分支语句

• 循环语句

 断点调试

练习 

---

 

学习目标：

1. 掌握常见运算符，为程序“能思考”做准备
2. 掌握分支语句，让程序具备判断能力
3. 掌握循环语句，让程序具备重复执行能力

---

学习内容：

运算符
语句
综合案例

---

学习时间：

• 周一至周五晚上 7 点—晚上9点
• 周六上午 9 点-上午 11 点
• 周日下午 3 点-下午 6 点

---

学习产出：

运算符

• • 赋值运算符

目标： 能够使用赋值运算符简化代码
l 赋值运算符：对变量进行赋值的运算符
        Ø 已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器
        Ø 其他赋值运算符：
                Ø +=
                Ø -=
                Ø /=
                Ø %=
l 使用这些运算符可以在对变量赋值时进行快速操作

赋值运算符（Assignment Operators）用于将一个值或表达式赋给一个变量。

常见的赋值运算符有：

• =：将右边的值或表达式赋给左边的变量。
• +=：将右边的值或表达式加到左边的变量，并将结果赋给左边的变量。
• -=：将右边的值或表达式减去左边的变量，并将结果赋给左边的变量。
• *=：将右边的值或表达式乘以左边的变量，并将结果赋给左边的变量。
• /=：将左边的变量除以右边的值或表达式，并将结果赋给左边的变量。
• %=：将左边的变量对右边的值或表达式取模，并将结果赋给左边的变量。

例如：

int a = 5; // 使用赋值运算符将值5赋给变量a
a += 2; // 将变量a的值加上2，并将结果赋给变量a，即a的值变为7
a *= 3; // 将变量a的值乘以3，并将结果赋给变量a，即a的值变为21

赋值运算符的优先级较低，通常在其他运算符之后执行。

• • 一元运算符

目标： 能够使用一元运算符做自增运算
众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
l 二元运算符：
        Ø 例：

l 一元运算符：
        Ø 例： 正负号
l 问题：我们以 前让一个变量每次+1 ，以前我们做的呢？

整体给大家的整体总结：

以前我们可以使用赋值运算符和加法运算符来实现变量每次加1的操作。

例如：

var num = 5;
num = num + 1; // 使用赋值运算符和加法运算符将变量num的值加1，即num的值变为6

但是在JavaScript中，我们还可以使用一元运算符来实现变量的自增操作。

一元运算符是只需要一个操作数的运算符，自增运算符++就是其中之一。它可以用来将变量的值加1。

例如：

var num = 5;
num++; // 使用自增运算符将变量num的值加1，即num的值变为6

其中num++表示先使用num的值，然后将num的值加1。也可以使用++num，表示先将num的值加1，然后使用新的值。

自增运算符++也可以放在变量的前面进行使用，例如++num，表示先将num的值加1，然后使用新的值。

需要注意的是，自增运算符可以应用于数字类型的变量，但不适用于字符串类型的变量。

自增运算符的用法：

ES6语法中，自增运算符的使用与之前的语法相同。下面是使用ES6语法的示例：

let num = 5;
console.log(num++); // 输出：5，先输出num的值，然后将num的值加1
console.log(num); // 输出：6，num的值已经变为6

let num2 = 5;
console.log(++num2); // 输出：6，先将num2的值加1，然后输出新的值
console.log(num2); // 输出：6，num2的值已经变为6

let result = 10 + num++; // 先将num的值加1，然后与10相加，赋给result
console.log(num); // 输出：7，num的值已经变为7
console.log(result); // 输出：16，result的值为10与num自增之前的值相加的结果

需要注意的是，在使用ES6语法时，可以使用let或const关键字声明变量，分别表示可变和不可变的变量。在上述示例中，我使用了let关键字来声明变量num和num2，你也可以根据需求使用let或const关键字来声明变量。

 留给大家一个思考题：

• • 比较运算符

比较运算符的介绍
Ø 使用场景：比较两个数据大小、是否相等
比较运算符：
Ø > ： 左边是否大于右边
Ø <： 左边是否小于右边
Ø >=： 左边是否大于或等于右边
Ø <=： 左边是否小于或等于右边
Ø ==： 左右两边值是否相等
Ø ===： 左右两边是否类型和值都相等
Ø !==： 左右两边是否不全等
Ø 比较结果为boolean类型，即只会得到 true 或 false
l 对比：
Ø = 单等是赋值
Ø == 是判断
Ø === 是全等
Ø判断是否相等，强烈推荐使用 === 

比较运算符用于比较两个值的大小或相等性，并返回一个布尔值。以下是JavaScript中常用的比较运算符：

• 相等运算符（==）：用于判断两个值是否相等，如果相等则返回true，否则返回false。
• 不相等运算符（!=）：用于判断两个值是否不相等，如果不相等则返回true，否则返回false。
• 全等运算符（===）：用于判断两个值的类型和值是否完全相等，如果相等则返回true，否则返回false。
• 不全等运算符（!==）：用于判断两个值的类型和值是否不完全相等，如果不相等则返回true，否则返回false。
• 大于运算符（>）：用于判断左边的值是否大于右边的值，如果是则返回true，否则返回false。
• 大于等于运算符（>=）：用于判断左边的值是否大于或等于右边的值，如果是则返回true，否则返回false。
• 小于运算符（<）：用于判断左边的值是否小于右边的值，如果是则返回true，否则返回false。
• 小于等于运算符（<=）：用于判断左边的值是否小于或等于右边的值，如果是则返回true，否则返回false。

以下是使用比较运算符的示例：

let a = 5;
let b = 10;

console.log(a == b); // 输出：false
console.log(a != b); // 输出：true
console.log(a === b); // 输出：false
console.log(a !== b); // 输出：true
console.log(a > b); // 输出：false
console.log(a >= b); // 输出：false
console.log(a < b); // 输出：true
console.log(a <= b); // 输出：true

需要注意的是，相等运算符（==）和不相等运算符（!=）会进行类型转换，而全等运算符（===）和不全等运算符（!==）不会进行类型转换。因此，建议在比较值的时候尽量使用全等运算符（===）和不全等运算符（!==）。

比较运算符用于比较两个值的大小或相等性，并返回一个布尔值。以下是JavaScript中常用的比较运算符：

• 相等运算符（==）：用于判断两个值是否相等，如果相等则返回true，否则返回false。
• 不相等运算符（!=）：用于判断两个值是否不相等，如果不相等则返回true，否则返回false。
• 全等运算符（===）：用于判断两个值的类型和值是否完全相等，如果相等则返回true，否则返回false。
• 不全等运算符（!==）：用于判断两个值的类型和值是否不完全相等，如果不相等则返回true，否则返回false。
• 大于运算符（>）：用于判断左边的值是否大于右边的值，如果是则返回true，否则返回false。
• 大于等于运算符（>=）：用于判断左边的值是否大于或等于右边的值，如果是则返回true，否则返回false。
• 小于运算符（<）：用于判断左边的值是否小于右边的值，如果是则返回true，否则返回false。
• 小于等于运算符（<=）：用于判断左边的值是否小于或等于右边的值，如果是则返回true，否则返回false。

以下是使用比较运算符的示例：

let a = 5;
let b = 10;

console.log(a == b); // 输出：false
console.log(a != b); // 输出：true
console.log(a === b); // 输出：false
console.log(a !== b); // 输出：true
console.log(a > b); // 输出：false
console.log(a >= b); // 输出：false
console.log(a < b); // 输出：true
console.log(a <= b); // 输出：true

需要注意的是，相等运算符（==）和不相等运算符（!=）会进行类型转换，而全等运算符（===）和不全等运算符（!==）不会进行类型转换。因此，建议在比较值的时候尽量使用全等运算符（===）和不全等运算符（!==）。

l 字符串比较，是比较的字符对应的ASCII码
        Ø 从左往右依次比较
        Ø 如果第一位一样再比较第二位，以此类推
        Ø 比较的少，了解即可
l NaN不等于任何值，包括它本身
        Ø 涉及到"NaN“ 都是false
l 尽量不要比较小数，因为小数有精度问题
l 不同类型之间比较会发生隐式转换
        Ø 最终把数据隐式转换转成number类型再比较
        Ø 所以开发中，如果进行准确的比较我们更喜欢 === 或者 !== 

• • 逻辑运算符

逻辑运算符：
 

符号	名称	日常读法	特点	口诀
&&	逻辑与	逻辑非	符号两边都为true 结果才为true	一假则假
||	逻辑或	或者	符号两边有一个 true就为true	一真则真
！	逻辑非	取反	true变false false变true	真变假，假变真

• • 运算符优先级 

运算符优先级是指在一个表达式中，不同运算符的执行顺序。 在 JavaScript 中，运算符优先级遵循一定的规则，例如算术运算符具有较高的优先级，逻辑运算符具有较低的优先级。

以下是常见的运算符优先级示例：

1. 括号运算符 ( )

2. 一元运算符 (++ -- + - ! typeof delete new void)

3. 算术运算符 (+ - * / %)

4. 关系运算符 (< <= > >=)

5. 相等性运算符 (== != === !==)

6. 逻辑运算符 (&& ||)

7. 赋值运算符 (= += -= *= /= %=)

需要注意的是，括号运算符具有最高的优先级，可以通过括号来改变表达式的执行顺序。

以下是一个示例，展示了运算符优先级的影响：

let a = 2;
let b = 3;
let c = 4;

let result = a + b * c;
console.log(result); // 输出：14

result = (a + b) * c;
console.log(result); // 输出：20

在第一个示例中，根据运算符优先级规则，先执行乘法运算，然后再执行加法运算。而在第二个示例中，由于括号具有最高的优先级，先执行括号内的加法运算，然后再执行乘法运算。因此，最终的结果不同。

了解运算符优先级可以帮助你编写更清晰和正确的表达式。如果遇到复杂的表达式，可以使用括号来明确指定运算顺序，避免产生歧义。

语句 

• • 表达式和语句

l 表达式：
表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果

在编程中，表达式和语句是两个重要的概念。

表达式 (Expression) 是一个计算出一个值的代码片段。它可以包含变量、常量、操作符和函数调用等。表达式可以作为一个值来使用，例如赋值给一个变量或作为函数的参数。

例如，下面是一些表达式的示例：

2 + 3
x * 5
Math.sqrt(9)

语句 (Statement) 是一段执行特定任务的代码。它可以包含表达式、变量声明、条件判断、循环等。语句一般会产生某种效果，例如改变变量的值、执行特定的操作或控制程序的流程。

例如，下面是一些语句的示例：

let x = 5; // 变量声明和赋值语句
if (x > 0) { // 条件语句
    console.log("x is positive");
} else {
    console.log("x is negative or zero");
}

for (let i = 0; i < 5; i++) { // 循环语句
    console.log(i);
}

需要注意的是，表达式可以用作语句的一部分，但语句本身不能作为一个值来使用。语句的主要目的是执行特定的操作，而不是产生一个值。

理解表达式和语句的区别是编程中的重要基础，它们在代码编写和理解程序执行流程方面起着关键的作用。

 区别：
表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。
        Ø 表达式 num = 3 + 4
语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
        Ø 语句 alert() 弹出对话框 console.log() 控制台打印输出
某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分 (例如continue语句
)

• • 分支语句

l 以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
l 有的时候要根据条件选择执行代码，这种就叫分支结构
l 某段代码被重复执行，就叫循环结构
l 分支语句可以让我们有选择性的执行想要的代码
l 分支语句包含：

Ø If分支语句

if语句有三种使用：单分支、双分支、多分支
l 单分支使用语法：

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~

多分支if语法：
使用场景： 适合于有多个结果的时候， 比如学习成绩可以分为： 优 良 中 差

释义：
Ø 找到跟小括号里数据全等的case值，并执行里面对应的代码
Ø 若没有全等 === 的则执行default里的代码
Ø 例：数据若跟值2全等，则执行代码2
1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用 没有break会造成case穿透

• • 循环语句

 断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
l 浏览器打开调试界面
        1. 按F12打开开发者工具
        2. 点到sources一栏
        3. 选择代码文件
l 断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

练习 

需求：使用while循环，页面中打印，可以添加换行效果
1. 页面输出1-100
        Ø 核心思路： 利用 i ,因为正好和 数字对应
2. 计算从1加到100的总和并输出
        Ø 核心思路：
        Ø 声明累加和的变量 sum
        Ø 每次把 i 加到 sum 里面
3. 计算1-100之间的所有偶数和
        Ø 核心思路：
        Ø 声明累加和的变量 sum
        Ø 首先利用if语句把 i 里面是偶数筛选出来
        Ø 把 筛选的 i 加到 sum 里面