前端三剑客 —— JavaScript （第二节）

news2024/11/23 13:10:33

目录

内容回顾

数据类型

基本数据类型：

引用数据类型：

常见运算

算术运算符

比较运算符

逻辑运算符

赋值运算符

自增/减运算符

三目运算符

位运算符

内容回顾

        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 变为 1，false 变为 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。

位运算符

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

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

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

相关文章

通信安全之数据加密

通信安全之数据加密

数据安全的需求如今越来越重要&#xff0c;本篇简单举例给日常的TCP/UDP通信加密&#xff0c;至少能让想干坏事的崽犯罪的成本更高一些&#xff08;如果会一些BPF的&#xff0c;可能难不住这些崽&#xff09;&#xff0c;能让我们的数据更安全一点。 经典TCP socket编程 下面…
阅读更多...
佑雅的小布谷数据平台获取token如何实现

佑雅的小布谷数据平台获取token如何实现

小博股数据开放平台是面向全部用户的股票数据开放平台&#xff0c;通过调用接口可以获取股票的历史数据。在调用之前需要进行下面的准备工作&#xff0c;第一步注册&#xff1a; 用户在注册之后&#xff0c;登录点击头像进入个人中心&#xff0c;在功能模块的最下方有一个创建应…
阅读更多...
IntelliJ IDEA 2024.1安装与激活[破解]

IntelliJ IDEA 2024.1安装与激活[破解]

一&#xff1a;IDEA官方下载 ①如题&#xff0c;先到IDEA官方下载&#xff0c;简简单单 ②IDEA官方&#xff1a;IntelliJ IDEA – the Leading Java and Kotlin IDE 二&#xff1a;获取脚本 &#x1f31f;网盘下载&#xff1a;jetbra (密码&#xff1a;lzh7) &#x1f31f;获取…
阅读更多...
51单片机入门_江协科技_25~26_OB记录的笔记_蜂鸣器教程

51单片机入门_江协科技_25~26_OB记录的笔记_蜂鸣器教程

25. 蜂鸣器 25.1. 蜂鸣器介绍 •蜂鸣器是一种将电信号转换为声音信号的器件&#xff0c;常用来产生设备的按键音、报警音等提示信号 •蜂鸣器按驱动方式可分为有源蜂鸣器和无源蜂鸣器&#xff08;开发板上用的无源蜂鸣器&#xff09; •有源蜂鸣器&#xff1a;内部自带振荡源&a…
阅读更多...
报文 消息

报文 消息

报文消息域 MsgField name 域名称 length 长度 fillChar 填充字符 fillSide 填充位置 报文消息片 MsgPiece 由多个消息域按一定的顺序组成 private List<MsgField> itemList new LinkedList<~>();组装消息 报文消息包 MsgPackage 由多个消息片组成 String[]…
阅读更多...
FreeRTOS启动任务调度器

FreeRTOS启动任务调度器

FreeRTOS启动任务调度器 这部分内容就要去深入了解源码以及熟悉汇编语言的操作。依旧正点原子的视频。下面首先看开启任务调度器这部分源码&#xff1a; 1开启任务调度器 任务调度器用于启动任务调度器&#xff0c;任务调度器启动后&#xff0c; FreeRTOS 便会开始进行任务调…
阅读更多...
MyBatis 应用的组成

MyBatis 应用的组成

王有志&#xff0c;一个分享硬核Java技术的互金摸鱼侠 加入Java人的提桶跑路群&#xff1a;共同富裕的Java人 大家好&#xff0c;我是王有志。在上一篇文章的最后&#xff0c;我们写了一个简单的例子&#xff0c;今天我们就通过这个例子来看一看一个标准的 MyBatis 应用程序由哪…
阅读更多...
PS入门｜如何使用“主体”功能进行抠图？

PS入门｜如何使用“主体”功能进行抠图？

前言 前段时间讲到给各种图标和LOGO抠图的办法&#xff0c;分别使用的是 钢笔工具蒙版 PS入门&#xff5c;规规矩矩的图形怎么抠出来&#xff1f; 魔棒工具蒙版 PS入门&#xff5c;黑白色的图标怎么抠成透明背景 色阶蒙版 PS入门&#xff5c;目标比较复杂&#xff0c;但背景…
阅读更多...
HTML+CSS+JS复习回顾

HTML+CSS+JS复习回顾

环境搭建 下载VScode&#xff0c;依次下载插件&#xff1a;HTML CSS support、Live Server、Auto Rename Tag 一、HTML篇 HTML通过一系列的标签&#xff08;元素&#xff09;来定义文本、图像、链接等。HTML标签是由尖括号包围的关键字。标签通常成对出现&#xff0c;包括开…
阅读更多...
在Spring中使用Redis

在Spring中使用Redis

端口怎么设置&#xff0c;看我前一篇文章 前面使用jedis&#xff0c;通过Jedis对象中各种方法来操作redis的。 此处Spring中则是通过StringRedisTemplate来操作redis。 最原始提供的类是RedisTemplate StringRedisTemplate是RedisTemplate的子类&#xff0c;专门处理文本数据的…
阅读更多...
2014最新AIGC创作系统ChatGPT网站源码+AI绘画网站源码+GPT4-All联网搜索模型

2014最新AIGC创作系统ChatGPT网站源码+AI绘画网站源码+GPT4-All联网搜索模型

一、文章前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持…
阅读更多...
无重复的最长字串

无重复的最长字串

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 问题 给定一个字符串&#xff0c;我们需要找到该字符串中的最长无重复子串的长度。 示例 让我们以一个具体的示例来说明这个问题&#…
阅读更多...
四、书城开发--3、书城图书部分的开发

四、书城开发--3、书城图书部分的开发

书城图书部分 首先我们做书城首页搜索栏下面的图片展示 我们在书城首页组件中通过home请求方法中获取回来的数据中&#xff0c;打印出来可以看到那个banner就是我们现在要的图片 我们在data中定义一个变量banner用来存放获取回来的数据中的banner 然后把它展示出来就可以了&a…
阅读更多...
B. Burning Midnight Oil Codeforces Round 112 (Div. 2)

B. Burning Midnight Oil Codeforces Round 112 (Div. 2)

题目链接&#xff1a; Problem - 165B - Codeforceshttps://codeforces.com/problemset/problem/165/B 题目大意&#xff1a; 最后写了至少n个&#xff0c;每次衰减k倍&#xff08;/k&#xff09;&#xff0c;问最初的v最小为多少。 思路&方法&#xff1a; 二分答案。 AC代…
阅读更多...
想要品牌传播有效，先清楚这三个本质问题

想要品牌传播有效，先清楚这三个本质问题

在互联网时代&#xff0c;企业想要提高市场竞争力就需要做好品牌传播。然而有许多企业在做品牌传播时都会踩坑&#xff0c;原因是因为忽视了这三点&#xff0c;接下来就让媒介盒子和大家分享&#xff1a; 一、 文案本质是“购买理由” 在文案技巧中经常会出现一些词&#xff…
阅读更多...
重学Java，JDK安装，Java环境配置，Could not find Java SE Runtime Environment问题解决

重学Java，JDK安装，Java环境配置，Could not find Java SE Runtime Environment问题解决

文章目录 前言JDK下载什么是JDK下载JDK官网下载历史版本下载 JDK安装生成JRE配置环境变量进入环境变量配置界面新建系统变量JAVA_HOME编辑系统变量PATHPath编辑界面1Path编辑界面2 配置CLASSPATH 验证安装情况问题反馈Error: opening registry key Software\JavaSoft\Java Runt…
阅读更多...
WordPress网站备份和迁移教程

WordPress网站备份和迁移教程

我们之前遇到购买了hostease的客户需要进行wordpress的网站备份的迁移操作。 以下是一份完整的指南&#xff0c;介绍了备份和迁移WordPress网站的步骤&#xff1a; 步骤一&#xff1a;备份WordPress网站 使用插件进行备份&#xff1a; 安装并激活备份插件&#xff0c;例如Up…
阅读更多...
SSH远程登陆系统(RedHat9)

SSH远程登陆系统(RedHat9)

ssh的基本用法 ssh hostname/IP # 如果没有指定用什么用户进行连接&#xff0c;默认使用当前用户登录 ssh –l username hostname/IP ssh usernamehostname ssh usernameIP在第一次连接到服务器时&#xff0c;会自动记录服务器的公钥指纹信息 如果出现密钥变更导致错误可以…
阅读更多...
Spring Cloud 集成 Redis 发布订阅

Spring Cloud 集成 Redis 发布订阅

目录 前言步骤引入相关maven依赖添加相关配置 使用方法发布订阅发布一个消息 注意总结 前言 在当今的软件开发领域&#xff0c;分布式系统已经成为一种主流的架构模式&#xff0c;尤其是在处理大规模、高并发、高可用的业务场景时。然而&#xff0c;随着系统复杂性的增加&…
阅读更多...
Training - Kubeflow 的 PyTorchJob 配置 DDP 分布式训练 (ncclInternalError)

Training - Kubeflow 的 PyTorchJob 配置 DDP 分布式训练 (ncclInternalError)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/137569332 Kubeflow 的 PyTorchJob 是 Kubernetes 自定义资源&#xff0c;用于在 Kubernetes 上运行 PyTorch 训练任务&#xff0c;是 K…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023