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

 

 

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

🎉博客主页：阿猫的故乡

🎉系列专栏：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的值已经变为6let num2 = 5;
console.log(++num2); // 输出：6，先将num2的值加1，然后输出新的值
console.log(num2); // 输出：6，num2的值已经变为6let 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); // 输出：14result = (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.mzph.cn/news/578101.shtml

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

相关文章

智能优化算法应用：基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于驾驶训练算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.驾驶训练算法4.实验参数设定5.算法结果6.…
阅读更多...
Springboot整合MVC进阶篇

Springboot整合MVC进阶篇

一、概述 1.1SpringBoot整合SpringMVC配置 SpringBoot对SpringMVC的配置主要包括以下几个方面&#xff1a; 自动配置&#xff1a;SpringBoot会自动配置一个嵌入式的Servlet容器&#xff08;如Tomcat&#xff09;&#xff0c;并为我们提供默认的SpringMVC配置。这样我们无需手动…
阅读更多...
深圳锐科达SIP矿用电话模块SV-2801VP

深圳锐科达SIP矿用电话模块SV-2801VP

深圳锐科达SIP矿用电话模块SV-2801VP 一、简介 SV-2800VP系列模块是我司设计研发的一款用于井下的矿用IP音频传输模块&#xff0c;可用此模块打造一套低延迟、高效率、高灵活和多扩展的IP矿用广播对讲系统&#xff0c;亦可对传统煤矿电话系统加装此模块&#xff0c;进行智能化…
阅读更多...
基于5G智能网关的智慧塔吊监测方案

基于5G智能网关的智慧塔吊监测方案

塔吊是建筑施工中必不可少的设施&#xff0c;由于塔吊工作重心高、起重载荷大、人工视距/视角受限等因素&#xff0c;也使得塔吊在工作过程中着较多的危险因素。对此&#xff0c;可以部署基于工业5G智能网关搭建智慧塔吊安全监测系统&#xff0c;实现对塔吊运行的全局精细监测感…
阅读更多...
TP-Link路由器桥接设置

TP-Link路由器桥接设置

本文介绍了TP-Link路由器无线桥接设置方法&#xff1b;无线桥接指的就是通过无线的方式&#xff0c;把两台(多台)无线路由器连接起来&#xff0c;进行桥接的几台路由器中&#xff0c;只要有一台可以上网&#xff0c;剩下的也就可以上网了&#xff1b;主要作用是用来扩大无线WiF…
阅读更多...
【STM32单片机】电子木鱼设计

【STM32单片机】电子木鱼设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103/F407单片机控制器&#xff0c;TFTLCD触摸屏、蜂鸣器等。 主要功能&#xff1a; 系统运行后&#xff0c;TFTLCD显示画面&#xff0c;可触摸木鱼区域&#xff0c;功德计数加1&#xf…
阅读更多...
漏刻有时数据可视化Echarts组件开发(46)散点图颜色判断

漏刻有时数据可视化Echarts组件开发(46)散点图颜色判断

series组件 series: [{name: Top 5,type: scatter,coordinateSystem: bmap,data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: 20,encode: {value: 2},showEffectOn: render,rippleEffect: {brushType: stroke},label: {fo…
阅读更多...
分布式系统架构设计之分布式通信机制

分布式系统架构设计之分布式通信机制

二、分布式通信机制&#xff1a;保障系统正常运行基石 在分布式系统中&#xff0c;各个组件之间的通信是保障系统正常运行的基石&#xff0c;直接影响到系统的性能、可扩展性以及整体的可维护性。接下来我们就一起看看通信在分布式系统中的重要性&#xff0c;以及一些常用的技…
阅读更多...
Java---IO流讲解（2）

Java---IO流讲解（2）

文章目录 1. 字符流1.1 为什么出现字符流1.2 字符流写数据的5种方式1.3 字符流读数据的两种方式1.4 字符缓冲流1.5 字符缓冲流特有功能 2. IO流小结2.1 字节流2.2 字符流 1. 字符流 1.1 为什么出现字符流 由于字节流操作中文时不是特别方便&#xff0c;因此Java提供了字符流。…
阅读更多...
SpringBoot - Maven 打包合并一个胖 JAR 以及主项目 JAR 依赖 JAR 分离打包解决方案

SpringBoot - Maven 打包合并一个胖 JAR 以及主项目 JAR 依赖 JAR 分离打包解决方案

问题描述 <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.1.18.RELEASE</version><configuration><!--<classifier>exec</classifier>--…
阅读更多...
12.25广义分布外检测学习/代码复现

12.25广义分布外检测学习/代码复现

A model.getA().toarray() # b np.array(model.RHS) sense np.array(model.sense) f np.array(model.obj)Aineq np.vstack((-Ale, Age)) # 把所有的<和>组合在一起 bineq np.append(-ble, bge) # 这里用append使bineq为一个一维矩阵&#xff0c;而不是2行1列的二…
阅读更多...
SpringBoot 3.2.0 基于Spring Security+JWT实现动态鉴权

SpringBoot 3.2.0 基于Spring Security+JWT实现动态鉴权

依赖版本 JDK 17 Spring Boot 3.2.0 Spring Security 6.2.0 工程源码&#xff1a;Gitee 为了能够不需要额外配置就能启动项目&#xff0c;看到配置效果。用例采用模拟数据&#xff0c;可自行修改为对应的ORM操作 编写Spring Security基础配置 导入依赖 <properties>&l…
阅读更多...
java练习之abstract （抽象） final（最终） static（静态） 练习

java练习之abstract （抽象） final（最终） static（静态） 练习

1&#xff1a;分析总结&#xff1a;写出private、abstract、static、final之间能否联动使用&#xff0c;并写出分析原因 private static final 之间可以任意结合 abstract 不可以与private static final 结合使用 2&#xff1a;关于三个修饰符描述不正确的是(AD) A. static …
阅读更多...
Linux操作系统基础知识点

Linux操作系统基础知识点

Linux是一种计算机操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹&#xff08;Linus Benedict Torvalds&#xff09;于1991年首次发布。Linux操作系统通常与GNU套件一起使用&#xff0c;因此也被称为GNU/Linux。它是一种类UNIX的操作系统&#xff0c;设计为多用户、多任务…
阅读更多...
计算机组成原理综合6

计算机组成原理综合6

补码表示&#xff1a; X&#xff1a;1111 1111 1111 1101 Y&#xff1a;1111 1111 1101 1111 Z&#xff1a;0111 1111 1111 1100 转原码表示&#xff1a;从右往左找第一个“1”&#xff0c;左边的所有数值位按位取反 X&#xff1a;1111 1111 1111 1101 1000 0000 00…
阅读更多...
OGG-MySQL无法正常同步数据问题分析

OGG-MySQL无法正常同步数据问题分析

问题背景: 用户通过OGG从源端一个MySQL从库将数据同步到目标端的另一个MySQL数据库里面&#xff0c;后面由于源端的从库出现了长时间的同步延时&#xff0c;由于延时差距过大最后选择通过重建从库方式进行了修复 从库重建之后&#xff0c;源端的OGG出现了报错ERROR OGG-0014…
阅读更多...
关于Sneaky DogeRAT特洛伊木马病毒网络攻击的动态情报

关于Sneaky DogeRAT特洛伊木马病毒网络攻击的动态情报

一、基本内容 作为复杂恶意软件活动的一部分&#xff0c;一种名为DogeRAT的新开源远程访问特洛伊木马&#xff08;RAT&#xff09;主要针对位于印度的安卓用户发动了网络安全攻击。该恶意软件通过分享Opera Mini、OpenAI ChatGOT以及YouTube、Netfilx和Instagram的高级版本等合…
阅读更多...
《PySpark大数据分析实战》-19.NumPy介绍ndarray介绍

《PySpark大数据分析实战》-19.NumPy介绍ndarray介绍

&#x1f4cb; 博主简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是wux_labs。&#x1f61c; 热衷于各种主流技术&#xff0c;热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员&#xff08;PCTA&#xff09;、TiDB数据库专家&#xff08;PCTP…
阅读更多...
饥荒Mod 开发(二三)：显示物品栏详细信息

饥荒Mod 开发(二三)：显示物品栏详细信息

饥荒Mod 开发(二二)&#xff1a;显示物品信息 源码 前一篇介绍了如何获取 鼠标悬浮物品的信息&#xff0c;这一片介绍如何获取 物品栏的详细信息。 拦截 inventorybar 和 itemtile等设置字符串方法 在modmain.lua 文件中放入下面代码即可实现鼠标悬浮到 物品栏显示物品详细信…
阅读更多...
适合引流源码声音鉴定神器网站源码，轻松吸引用户关注

适合引流源码声音鉴定神器网站源码，轻松吸引用户关注

源码介绍 声鉴卡HTML5网页源码&#xff0c;完整可运转&#xff0c;调用wx录音&#xff0c;自动判断声音属性&#xff0c;输出结果 安装教程 只需要把源码上传至主机空间就可以 支持上传二级目录访问&#xff01;提示一下&#xff1a;wxvx打开效果是最佳的源码里面生成二维码…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023