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

news2025/2/6 21:35:16

 

 

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

🎉博客主页：阿猫的故乡

🎉系列专栏：JavaScript专题栏

🎉ajax专栏：ajax知识点

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

学习目标：

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 里面
 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1336590.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue使用Element table表格格式化GMT时间为Shanghai时间

Vue使用Element table表格格式化GMT时间为Shanghai时间

Vue使用Element表格格式化GMT时间为Shanghai时间 说明 阿里巴巴java开发规范规定&#xff0c;数据库必备gmt_create、gmt_modified字段&#xff0c;使用的是GMT时间&#xff0c;在中国使用必然要转换我中国时间。 在阿里巴巴的Java开发规范中&#xff0c;要求每个表都必备三…
阅读更多...
英特尔A770显卡介绍与解读

英特尔A770显卡介绍与解读

基础介绍 英特尔A770显卡。这是英特尔推出的一款高性能显卡&#xff0c;属于他们的Arc系列。这个系列的显卡主要面向游戏玩家和专业内容创作者&#xff0c;提供高性能图形处理能力。 A770显卡配备了先进的特性&#xff0c;例如支持硬件级光线追踪、AI加速技术&#xff0c;以及…
阅读更多...
【小白专用】C# 压缩文件 ICSharpCode.SharpZipLib.dll效果：

【小白专用】C# 压缩文件 ICSharpCode.SharpZipLib.dll效果：

插件描述&#xff1a; ICSharpCode.SharpZipLib.dll 是一个完全由c#编写的Zip, GZip、Tar 、 BZip2 类库,可以方便地支持这几种格式的压缩解压缩, SharpZipLib 的许可是经过修改的GPL&#xff0c;底线是允许用在不开源商业软件中&#xff0c;意思就是免费使用。具体可访问ICSha…
阅读更多...
【数据结构】——期末复习题题库（2）

【数据结构】——期末复习题题库（2）

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…
阅读更多...
基于Java SSM框架实现宜百丰超市进销存购物商城系统项目【项目源码+论文说明】计算机毕业设计

基于Java SSM框架实现宜百丰超市进销存购物商城系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现宜百丰超市进销存购物商城系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被…
阅读更多...
【温故而知新】HTML回流和重绘

【温故而知新】HTML回流和重绘

概念 HTML回流和重绘是浏览器渲染页面时的两个重要过程。 回流&#xff08;reflow&#xff09;指的是浏览器在渲染页面时&#xff0c;根据页面的结构和样式计算元素的布局和位置。当页面布局或元素位置发生变化时&#xff0c;浏览器需要重新计算元素的布局&#xff0c;这个过…
阅读更多...
编写fastapi接口服务

编写fastapi接口服务

FastAPI是一个基于 Python 的后端框架&#xff0c;该框架鼓励使用 Pydantic 和 OpenAPI (以前称为 Swagger) 进行文档编制&#xff0c;使用 Docker 进行快速开发和部署以及基于 Starlette 框架进行的简单测试。 step1&#xff1a;安装必要库 pip install fastapi uvicorn st…
阅读更多...
解决Pycharm pip安装模块太慢问题，pycharm2022没有manage repositories配置镜像源

解决Pycharm pip安装模块太慢问题，pycharm2022没有manage repositories配置镜像源

解决方案 方法清华阿里云中国科技大学华中理工大学 方法 URL写下面任意一个 清华 https://pypi.tuna.tsinghua.edu.cn/simple阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/华中理工大学 http://pypi.hustunique.c…
阅读更多...
数字化时代的探索：学生为何对数据可视化趋之若鹜？

数字化时代的探索：学生为何对数据可视化趋之若鹜？

随着信息时代的迅猛发展&#xff0c;数据已经成为我们生活中不可或缺的一部分。而在这个数字化浪潮中&#xff0c;越来越多的学生开始关注数据可视化&#xff0c;这并非偶然。下面&#xff0c;我就从可视化从业者的角度出发&#xff0c;简单聊聊为什么越来越多的学生开始关注数…
阅读更多...
边缘计算云边端全览—边缘计算系统设计与实践【文末送书-10】

边缘计算云边端全览—边缘计算系统设计与实践【文末送书-10】

文章目录 一.边缘计算1.1边缘计算的典型应用 二.边缘计算 VS 云计算三.边缘计算系统设计与实践【文末送书-10】3.1 粉丝福利&#xff1a;文末推荐与福利免费包邮送书&#xff01; 一.边缘计算 边缘计算是指在靠近物或数据源头的一侧&#xff0c;采用网络、计算、存储、应用核心…
阅读更多...
探索 WebRTC：数字世界的实时通信魔法

探索 WebRTC：数字世界的实时通信魔法

前言 在当今日常生活中&#xff0c;我们期望能够随时随地与朋友、同事或家人进行实时沟通。WebRTC&#xff08;Web实时通信&#xff09;技术就像一种魔法&#xff0c;让这些交流变得无比便捷&#xff0c;而且完全在浏览器中实现&#xff0c;无需下载任何额外应用或插件。 Web…
阅读更多...
基于时钟序列解决时钟回拨

基于时钟序列解决时钟回拨

一、背景 分布式 ID 生成算法用于在分布式系统中生成全局唯一的 ID 标识&#xff0c;而 twitter 提出的雪花算法便是其中一种知名的算法&#xff0c;其每次会生成一个 64 位的全局唯一整数&#xff0c;算法的基本思想非常巧妙&#xff1a; 二进制64位长整型数字&#xff1a;1…
阅读更多...
PostgreSQL 可观测性最佳实践

PostgreSQL 可观测性最佳实践

简介 软件简述 PostgreSQL 是一种开源的关系型数据库管理系统 (RDBMS)&#xff0c;它提供了许多可观测性选项&#xff0c;以确保数据库的稳定性和可靠性。 可观测性 可观测性&#xff08;Observability&#xff09;是指对数据库状态和操作进行监控和记录&#xff0c;以便在…
阅读更多...
哪些超声波清洗机的清洁力比较好？清洁力好的超声波清洗机推荐

哪些超声波清洗机的清洁力比较好？清洁力好的超声波清洗机推荐

超声波清洗机在我们日常生活中是越来越常见&#xff0c;它以强大的清洁力获得大众的青睐&#xff01;毕竟家里购入一款超声波清洗机还是一件非常方便的事情&#xff0c;免去了跑去眼镜店洗眼镜麻烦&#xff0c;免去了清洗一些耳钉、化妆刷这些小物件难清洁烦恼&#xff01;现在…
阅读更多...
如何进行快照管理

如何进行快照管理

目录 快照管理 手动创建快照 自动创建快照 快照管理 快照管理 传统的物理服务器&#xff0c;为了确保服务器中数据的安全&#xff0c;需要你自行定制备份策略&#xff0c;如果备份到服务器本地&#xff0c;如果存储损坏&#xff0c;备份会同正常数据一起丢失。也就是说需要…
阅读更多...
C++力扣题目232--用栈实现队列

C++力扣题目232--用栈实现队列

请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并返回元素int peek() 返回队列开头…
阅读更多...
Java经典框架之Spring MVC

Java经典框架之Spring MVC

Spring MVC Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台。 课程内容的介绍 1. Spring MVC 入门案例 2. 基…
阅读更多...
云计算1.0、云原生2.0、AI云计算3.0，是解除IT互联网人才35岁的危机之道？

云计算1.0、云原生2.0、AI云计算3.0，是解除IT互联网人才35岁的危机之道？

互联网员工的“35岁”危机&#xff0c;算不上一个新鲜的话题。年轻人不断涌入大厂的同时&#xff0c;老员工的受挫与焦虑也在同步发生。 “员工35岁被裁”“高龄员工劝退”&#xff0c;论坛、新闻里一些案例&#xff0c;更是放大了互联网人的35岁危机感。处在上有老、下有小的…
阅读更多...
ArcGIS 10.2开发eclipse切换java版本

ArcGIS 10.2开发eclipse切换java版本

阅读更多...
SpringBoot整合JWT+Spring Security+Redis实现登录拦截（二）权限认证

SpringBoot整合JWT+Spring Security+Redis实现登录拦截（二）权限认证

上篇博文中我们已经实现了登录拦截&#xff0c;接下来我们继续补充代码&#xff0c;实现权限的认证 一、RBAC权限模型 什么事RBAC权限模型&#xff1f; RBAC权限模型&#xff08;Role-Based Access Control&#xff09;即&#xff1a;基于角色的权限访问控制。在RBAC中&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023