前端三剑客 —— JavaScript (第二节)

目录

内容回顾

数据类型

基本数据类型:

引用数据类型:

常见运算

算术运算符

比较运算符

逻辑运算符

赋值运算符

自增/减运算符

三目运算符

位运算符


内容回顾

        1.概述

        2.基本数据

                1.使用方式(行内、页面、外部)

                2.对话框(警告、确认、输入)

                3.关键字(具有特殊意义的单词,它的特点是全部小写)

                4.注释(单选注释//、多行注释/**/、文档注释/*!*/)

                5.变量(定义变量我们需要使用的语法:let|const|var 变量名称 = 值)

                6.规则和规范(规则我们是需要遵守,而规范我们应该符合这个标准写法),只能是字母、数字、下划线和$符号,数字不能开头。

                7.数据类型

数据类型

在JS中有以下两大类:基本数据类型、引用数据类型

基本数据类型:

数值类型(Number)

整数(int)

浮点数(float)

布尔类型(Boolean),有两个值:true 和 false

字符串(String),它可以是单引号包裹的数据,也可以是双引号包裹的数据。在JS推荐使用单号

空(null),表示不存在

未定义(undefined),表示变量定义了,但是没有给它赋值就使用这个变量。

不是数字(NaN - Not a Number),判断是否为数字,如果不是返回true,如果是返回false

引用数据类型:

数组(Array),它用于存储一组相同类型的数据

对象(Object)在JS中万物皆对象!!!

判断数据类型我们在JS中是通过typeof运行符来实现的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>数据类型</title>

</head>

<body>

<script>

    // 1. 定义一个整数类型的变量

    let num = 10

    console.log(num, typeof num); // 在控制台中输出变量的值以及变量的类型

    // 2. 定义一个浮点类型的变量

    let money = 10000.5

    console.log(money, typeof money);

    // 3. 定义一个布尔类型的变量

    let bool = false

    console.log(bool, typeof bool);

    // 4. 定义一个字符串类型的变量

    let str1 = "hello"

    console.log(str1, typeof str1);

    let str2 = 'world'

    console.log(str2, typeof str2);

    // 5. 空值类型,它只有一个值 null

    let nullVal = null

    console.log(nullVal, typeof nullVal);

    // 6. 未定义

    let age

    console.log(age, typeof age)

    // 7. 判断是否为数字

    let n = 'a'

    console.log(isNaN(n), typeof isNaN(n))

</script>

</body>

</html>

常见运算

算术运算符

在JS算术运算符包含加、减、乘、除、取模等。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>算术运算数</title>

</head>

<body>

<script>

    // 数值类型的算术运算

    let a = 10

    let b = 2

    // 加法运算

    let r = a + b

    console.log(r);

    // 减法运算

    r = a - b

    console.log(r);

    // 乘法

    r = a * b

    console.log(r);

    // 除法

    r = a / b

    console.log(r);

    // 取模,得到除法的余数

    r = a % b

    console.log(r);

    // 幂运算

    r = a ** b

    console.log(r)

    console.log('-----------------------------')

    // 布尔类型的算术运算

    let b1 = true

    let b2 = true

    r = b1 + b2

    console.log(r)  // 当两个布尔值进行加法运算时,会把 true 变为 1false 变为 0 后再作运算

    r = b1 - b2

    console.log(r)

    r = b1 / b2

    console.log(r)

    r = b1 * b2

    console.log(r)

    // 字符串的算术运算

    let s1 = '30'

    let s2 = '20'

    r = s1 + s2

    console.log(r)   // 字符串作加法操作其实就是进行字符串拼接操作

    r = s1 - s2

    console.log(r, typeof r)  // 当字符串作减法操作时,它会看这个字符串能不能转换为数字,如果能则转换后再计算,如果不能则输出 NaN

    r = s1 * s2

    console.log(r, typeof r) // 当字符串作乘法时,也会先看这个字符串能不能转换为数字,如果能则按数值进行计算,否则输出 NaN

    console.log('-----------------------------')

    // 空值

    let n1 = null

    let n2 = null

    r = n1 + n2

    console.log(r, typeof r)

    let n3 = 5

    r = n1 + n3

    console.log(r, typeof r)  // 当空值进行算术运算时,它会转换为数值 0,然后再作计算

    // 未定义

    let un1 = undefined

    let un2 = undefined

    r = un1 + un2

    console.log(r)   // 未定义类型不能进行算术运算

</script>

</body>

</html>

比较运算符

比较运算也中关系运算。它是用于比较两个数之间的大小,结果为一个布尔类型的值。比较运算符包含:大于(>)、小于(<)、等于(==)、大于等于(>=)、小于等于(<=)、不等于(!=)、全等于(`===`)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>比较运算符</title>

</head>

<body>

<script>

    let n1 = 10

    let n2 = 20

    r = n1 > n2

    console.log(r, typeof r)

    r = n1 < n2

    console.log(r, typeof r)

    r = n1 >= n2

    console.log(r, typeof r)

    r = n1 <= n2

    console.log(r, typeof r)

    r = n1 == n2

    console.log(r, typeof r)

    r = n1 != n2

    console.log(r, typeof r)

    console.log('-------------------------------')

    let n3 = 5

    let n4 = 5

    let n5 = '5'

    r = n3 == n4

    console.log(r)

    r = n3 === n4

    console.log(r)

    r = n3 == n5  // 使用 == 等号的方式来进行比较时,是比较的两个变量转换为数值类型后的值的大小。

    console.log(r)

    r = n3 === n5 // 使用 === 等号的方式进行比较时,比较的是值的大小以及它的类型是否相同。只两者都相同才为 true,否则为 false

    console.log(r)

    console.log('-----------------------------')

    //----------布尔类型的比较运算---------------------

    let b1 = true

    let b2 = false

    r = b1 === b2

    console.log(r)    // 使用布尔值来做比较运算是没有意义的,因为比较运算的结果本身就是布尔类型的值。

    console.log('-----------------------------')

    let s1 = 'hello'

    let s2 = 'hallo'

    s1 = '100'

    s2 = '10'

    s1 = 'World'

    s2 = 'world'

    r = s1 === s2

    r = s1 > s2

    console.log(r)

</script>

</body>

</html>

逻辑运算符

逻辑运算符主要是指多个条件之间的关联关系,逻辑运算符有:与(&&)、或(||)以及非(!)这三种。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>逻辑运算符</title>

</head>

<body>

<script>

    let n1 = 5

    let n2 = 6

    let b1 = true

    let b2 = false

    let r = n1 && n2 && b1

    console.log(r, typeof r) // 使用与运算时,只有全部都是 true ,结果才是 true,否则结果为 false

    r = n1 > n2 || b1 || b2

    console.log(r)   // 使用或运算时,只有全部为 false,结果才是 false,否则结果为 true

    r = !b1

    console.log(r)

    r = !b2

    console.log(r)  // 使用非运算时,如果本身为 true 则结果为 false,如果本身为 false 则结果为 true,即取反

    r = n1 < n2 & b2

    console.log(r)

    r = b1 & b2

    console.log(r)

    r = b1 | b2

    console.log(r)

</script>

</body>

</html>

在逻辑运算符中,也可以使用 & 号来表示运算使用 | 符号来表示或运算。它们与 && 以及 || 是有区别的。

赋值运算符

在 JS 中赋值运算符有以下几种:

1.=:将它这符号右边的值赋给这个符号左边的变量

2.+=:把符号右边的值与这个变量之前的值相加后再赋给这个变量

3.-=:把符号右边的值与这个变量之前的值相减后再赋给这个变量

4.*=:把符号右边的值与这个变量之前的值相乘后再赋给这个变量

5./=:把符号右边的值与这个变量之前的值相除后再赋给这个变量

6.%=:把符号右边的值与这个变量之前的值取模后再赋给这个变量

7.**=:把符号右边的值与这个变量之前的值幂运算后再赋给这个变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>赋值运算符</title>

</head>

<body>

<pre>

 =:将它这符号右边的值赋给这个符号左边的变量

 +=:把符号右边的值与这个变量之前的值相加后再赋给这个变量

 -=:把符号右边的值与这个变量之前的值相减后再赋给这个变量

 *=:把符号右边的值与这个变量之前的值相乘后再赋给这个变量

 /=:把符号右边的值与这个变量之前的值相除后再赋给这个变量

 %=:把符号右边的值与这个变量之前的值取模后再赋给这个变量

 **=:把符号右边的值与这个变量之前的值幂运算后再赋给这个变量

  </pre>

<script>

    let a = 10   // 使用 = 进行赋值运算,它是将等号右边的值赋给等号左边的变量

    console.log(a)

    a += 10  // 它等价于 a = a + 10

    console.log(a)

    a -= 10   // 它等价于 a = a - 10

    console.log(a)

    a *= 10   // 它等价于 a = a * 10

    console.log(a)

    a /= 10   // 它等价于 a = a / 10

    console.log(a)

    a %= 10  // 它等价于 a = a % 10

    console.log(a)

    a **= 10  // 它等价于 a = a ** 10 0 10 次方

    console.log(a)

</script>

</body>

</html>

自增/减运算符

严格来说,它是属于算术运算符中,我们在这里把单独拿出来进行讲。

问题:a++ 和 ++a 有什么区别?

根据上面的代码运行的结果以及分析的过程,我们发现:++ 后是先使用它的值,然后自己再加 1,而 ++ 在前是先自己加 1 后,再把结果进行相加。

总结:++在前是先自增再运算,++在后是先运算再自增!!!!!!!!!!!!!

三目运算符

三目运算符出现的目的是为了简化 if 语句。它的语法格式为:`变量 = 表达式 ? 值1 : 值2`。当表达为 true 时,取值1,否则取值2。

位运算符

位运算符会涉及到二进制的计算,会有补码、原码、反码。位运算符有 & 、| 、^ 、<< 、>> 以及 >>>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Facebook直播延迟过高是为什么?

在进行Facebook直播 时&#xff0c;高延迟可能会成为一个显著的问题&#xff0c;影响观众的观看体验和互动效果。以下是一些导致Facebook直播延迟过高的可能原因&#xff1a; 1、网络连接问题 网络连接不稳定或带宽不足可能是导致Facebook直播延迟的主要原因之一。如果您的网络…

华为机试题

目录 第一章、HJ1计算字符串最后一个单词的长度&#xff0c;单词以空格隔开。1.1&#xff09;描述1.2&#xff09;解题第二章、算法题HJ2 计算某字符出现次数1.1&#xff09;题目描述1.2&#xff09;解题思路与答案第三章、算法题HJ3 明明的随机数1.1&#xff09;题目描述1.2&a…

机器学习工程师 |面试作业题记录|本科水平 | 附个人解答

如是我闻&#xff1a; 面试的是一家在加拿大的初创公司&#xff0c;我想他们是需要清纯质朴的廉价劳动力干点杂活&#xff0c;非常符合我目前的情况。祝我成功吧。以下是他们的面试作业题&#xff08;take home questions&#xff09;&#xff0c;主要考察了一些基础知识&#…

Linux虚拟内存简介

Linux&#xff0c;像多数现代内核一样&#xff0c;采用了虚拟内存管理技术。该技术利用了大多数程序的一个典型特征&#xff0c;即访问局部性&#xff08;locality of reference&#xff09;&#xff0c;以求高效使用CPU和RAM&#xff08;物理内存&#xff09;资源。大多数程序…

查看 Linux 接入的 USB 设备速率是 USB2 还是 USB3

查看接入 usb 设备的速率 使用以下命令查看接入的 USB 设备速率&#xff08;每一行最后的 xxM 字样&#xff09;。插入设备前查看一次&#xff0c;插入设备后查看一次&#xff0c;对比即可定位到刚插入的设备是哪一条。 lsusb -t命令输出如下图 对照 USB 速率表 对照 USB 速…

【TensorRT】TensorRT C# API 项目更新 (1):支持动态Bath输入模型推理(下篇)

4. 接口应用 关于该项目的调用方式在上一篇文章中已经进行了详细介绍&#xff0c;具体使用可以参考《最新发布&#xff01;TensorRT C# API &#xff1a;基于C#与TensorRT部署深度学习模型》&#xff0c;下面结合Yolov8-cls模型详细介绍一下更新的接口使用方法。 4.1 创建并配…

构建智能生态:详解同城O2O外卖跑腿APP的开发技术

同城O2O外卖跑腿APP作为这一新型服务的代表&#xff0c;其开发技术成为了当下技术界的热点之一。小编将深入讲解同城O2O外卖跑腿APP的开发技术&#xff0c;以期为开发者提供一些有益的参考和指导。 需求分析与功能设计 在开发同城O2O外卖跑腿APP之前&#xff0c;首先需要进行充…

openlayer实现webgis端绘制制图及编辑

在WebGIS端制图是指通过Web浏览器界面实现地理信息数据的可视化、编辑、分析以及地图产品的制作。这一过程通常涉及以下几个关键环节&#xff1a; **1. 前端技术栈&#xff1a; •HTML/CSS/JavaScript&#xff1a;作为Web开发的基础&#xff0c;用于构建用户界面布局、样式设…

Go —— channel (二)

一个空的 channel 会产生哪些问题 读写nil管道均会阻塞触发死锁。关闭的管道仍然可以读取数据&#xff0c;向关闭的管道写数据会触发panic。 问&#xff1a;如果有多个协程同时读取一个channel&#xff0c;channel会如何选择消费者 channel 会按照维护的 recvq 等待读消息的…

vue canvas绘制信令图,动态显示标题、宽度、高度

需求: 1、 根据后端返回的数据&#xff0c;动态绘制出信令图 2、根据 dataStatus 返回值&#xff1a; 0 和 1&#xff0c; 判断 文字内容的颜色&#xff0c;0&#xff1a;#000&#xff0c;1&#xff1a;red 3.、根据 lineType 返回值&#xff1a; 0 和 1&#xff0c; 判断 箭…

栈的详解和例题(力扣有效括号)

感谢各位大佬的光临&#xff0c;希望和大家一起进步&#xff0c;望得到你的三连&#xff0c;互三支持&#xff0c;一起进步 个人主页&#xff1a;LaNzikinh-CSDN博客 收入专栏:初阶数据结构_LaNzikinh篮子的博客-CSDN博客 文章目录 前言一.什么是栈二.栈的实现三.例题&#xff…

推荐系统(唐宇迪)含具体代码

一、推荐系统介绍 用户冷启动 1.1 经典流程 1.2 涉及的技术点 二、协同过滤与矩阵分解 2.1 基于物品流行度&#xff08;排行榜榜单&#xff09;的推荐算法 class popularity_recommender_py():def __init__(self):self.train_data Noneself.user_id Noneself.item_id None…

Java每日一题(三道同一类型的题)

前言 本文一共有三道题:1.两数之和 2.三数之和 3. 四数之和 为什么把这三道题放一起呢&#xff0c;因为三数之和是可以根据两数之和进行推导&#xff0c;四数之和可以根据三数之和进行推导。 两数之和 思路分析: 我的思路: 1.排序 2.使用左右指针 3.处理细节问题 先让数组…

人工智能——深度学习

4. 深度学习 4.1. 概念 深度学习是一种机器学习的分支&#xff0c;旨在通过构建和训练多层神经网络模型来实现数据的高级特征表达和复杂模式识别。与传统机器学习算法相比&#xff0c;深度学习具有以下特点&#xff1a; 多层表示学习&#xff1a;深度学习使用深层神经网络&a…

Java后端常见场景业务问题

目录 单点登录如何实现权限认证如何实现上传数据的安全性如何保证订单表每天新增500W数据,分库分表的方案应该如何设计?订单表每天新增500W数据,分库分表的方案应该如何设计?*********************项目日志如何采集已经上线的bug如何排查如何快速定位系统瓶颈单点登录如何实…

Golang使用PGO优化程序性能

文章目录 参考文章PGO是什么使用PGO的好处PGO做了什么热函数内联什么是内联内联的好处Go默认的内联策略PGO的热函数内联 去虚拟化调用指令高速缓存 PGO有什么缺点可执行程序变大构建时间变长 PGO怎么使用典型的工作流程收集CPU配置文件生产环境启动PGO代码改动重新生成CPU配置文…

基于Whisper语音识别的实时视频字幕生成 (一): 流式显示视频帧和音频帧

Whishow Whistream&#xff08;微流&#xff09;是基于Whisper语音识别的的在线字幕生成工具&#xff0c;支持rtsp/rtmp/mp4等视频流在线语音识别 1. whishow介绍 whishow&#xff08;微秀&#xff09;是在线音视频流播放python实现&#xff0c;支持rtsp/rtmp/mp4等输入&…

人工智能——大语言模型

5. 大语言模型 5.1. 语言模型历史 20世纪90年代以前的语言模型都是基于语法分析这种方法&#xff0c;效果一直不佳。到了20世纪90年代&#xff0c;采用统计学方法分析语言&#xff0c;取得了重大进展。但是在庞大而复杂的语言信息上&#xff0c;基于传统统计的因为计算量巨大…

【Docker】Docker概述及引擎

一、docker概述 DevOps DevOps是一种执行标准&#xff08;思想&#xff09;&#xff0c;主要用于促进开发、测试与运维的整合 容器与虚拟机的区别 最大的区别是&#xff0c;虚拟机中存在独立的硬件系统与操作系统&#xff0c;容器中全部是共享的宿主机中的操作系统与硬件系…