当前位置： 首页 > news >正文

前端学习第三天笔记 JavaScript JavaScript的引入 数据类型 运算符 条件语句 字符串

news 文章来源：https://blog.csdn.net/samroom/article/details/142707450 2025/5/6 8:35:37

这里写自定义目录标题

    • JavaScript
      • JavaScript引入到文件
        • 嵌入到HTML文件中
        • 引入本地独立js文件
        • 引入网络来源文件
      • JavaScript的注释方式
      • 嵌入在HTML文件中的注释
      • JavaScript的输出方式
      • 数据类型
        • 原始类型（基础类型）
        • 合成类型（复合类型）
    • 运算符
      • typeof运算符
      • 算术运算符
      • 赋值运算符
      • 比较运算符
      • 布尔运算符
      • 条件语句
        • if语句
        • if-else条件语句
        • Switch语句
        • 三元运算符
      • 字符串
        • length属性
        • 字符串方法：charAt()
        • 字符串方法：concat()
        • concat和+的区别
        • 字符串方法：substring()
        • 字符串方法：substr()
        • 字符串方法：indexOf()
        • 字符串方法：trim()
        • 字符串方法：split()

JavaScript

JavaScript引入到文件

嵌入到HTML文件中
<body><script>var age = 20;</script>
</body>
引入本地独立js文件
<body><script type="text/javascript" src="./hello.js"
</body>
引入网络来源文件
<body><script scr="https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
</body>

JavaScript的注释方式

  • 单行：//
  • 多行：/* 内容*/

嵌入在HTML文件中的注释

<!-- 注释 -->

温馨提示
注释快捷键：ctrl+/

JavaScript的输出方式

在这里插入图片描述

数据类型

  • JavaScript的数据类型一共有6种，分别是：数值、字符串、布尔值、null、undefined、对象
  • ES6又新增了两种数据类型，分别是：Symbol类型的值和BigInt类型
原始类型（基础类型）
  • 数值、字符串、布尔值
合成类型（复合类型）
  • 对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器
var user{name:"复合类型",age:20,learn:true
}

运算符

typeof运算符

  • 用来判断一个变量的类型
var num = 20;
console.log(typeof num);
//会打印“number”

算术运算符

在这里插入图片描述

赋值运算符

在这里插入图片描述

比较运算符

在这里插入图片描述

布尔运算符

在这里插入图片描述

条件语句

if语句

在这里插入图片描述

if-else条件语句

在这里插入图片描述

Switch语句

在这里插入图片描述

三元运算符

在这里插入图片描述

字符串

  • 可以单引号嵌套双引号，也可以双引号嵌套单引号，但是注意不可以双引号中嵌套双引号，单引号中嵌套单引号。
  • 如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义，双引号字符串内部使用双引号，也是如此。
var str = "我们知道\"阅读\"是很重要的";
  • 字符串默认只能一行显示，如果要换行，需要转义。
length属性
  • length属性返回字符串的长度，该属性也是无法改变的。
  • 注意：length后不用加小括号
var str = '123456';
console.log(str.length)
//会打印出来6
字符串方法：charAt()
  • charAt方法返回指定位置的字符，参数是从0开始编号的。
  • 如果参数为负数，或者大于等于字符串的长度,charAt返回空字符串。
字符串方法：concat()
  • concat方法用于连接两个字符串，返回一个新的字符串，不改变原字符串。
  • 该方法可以接收多个参数
<script>
var str1 = "hello";
var str2 = "world";
var str3 = "!";
console.log(str1.concat(str2,str3));
//会打印出"helloworld!"
</script>
  • 做字符串相加时，是不需要使用concat的，可以使用+连接字符串。
concat和+的区别
  • concat不管什么类型直接合并成字符串
  • +是遇到数字类型直接做运算，遇到字符串和字符串相连接。
字符串方法：substring()
  • substring方法用于从原字符串取出子字符串并返回，不改变原字符串，它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）
  • (左闭右开区间)
  • 如果省略第二个参数，则表示子字符串一直到原字符串的结束。
  • 如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置
"itbaizhan".substring(8,2);
//等同于
"itbaizhan".substring(2,8);
  • 如果参数是负数，substring方法会自动将负数转为0
字符串方法：substr()
  • substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟substring方法的作用相同
  • substr方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度。
"itbaizhan".substr(2,7)//baizhan
  • 如果省略第二个参数，则表示子字符串一直到原字符串的结束
"itbaizhan".substr(2)//baizhan
  • 如果第一个参数是负数，表示倒数计算的字符位置，如果第二个参数是负数，将被自动转为0，因此会返回空字符串。
"itbaizhan".substr(-7)//baizhan
"itbaizhan".substr(4,-1)//""
字符串方法：indexOf()
  • indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置，如果返回-1，就表示不匹配。
  • indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。
字符串方法：trim()
  • trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串
  • 该方法去掉的不仅仅是空格，还包括制表符（\t, \v）、换行符（\n）和回车符（\r）。

trim方法不能去掉字符串中间的空格！！！！

  • ES6扩展方法，trimEnd()和trimStart()方法
  • trimEnd()：去掉字符串尾部空格。
  • trimStart()：去掉字符串头部空格。
字符串方法：split()
  • split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。
  • 如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
'a|b|c'.split("")//["a","|","b","|","c"]
  • 如果省略参数，则返回数组的唯一成员就是原字符串
'it|sxt|bz'.split()//[it|sxt|bz]
  • split方法还可以接受第二个参数，限定返回数组的最大成员数。
    在这里插入图片描述

相关文章：

前端学习第三天笔记 JavaScript JavaScript的引入 数据类型 运算符 条件语句 字符串

这里写自定义目录标题 JavaScriptJavaScript引入到文件嵌入到HTML文件中引入本地独立js文件引入网络来源文件 JavaScript的注释方式嵌入在HTML文件中的注释JavaScript的输出方式数据类型原始类型&#xff08;基础类型&#xff09;合成类型&#xff08;复合类型&#xff09; 运算…...

编程日记 2024/10/5 16:37:30

C++教程一口气讲完！（万字讲解）(￣y▽￣)╭ Ohohoho... 下

C 常量 常量是固定值&#xff0c;在程序执行期间不会改变。这些固定的值&#xff0c;又叫做字面量。 常量可以是任何的基本数据类型&#xff0c;可分为整型数字、浮点数字、字符、字符串和布尔值。 常量就像是常规的变量&#xff0c;只不过常量的值在定义后不能进行修改。 …...

编程日记 2024/10/5 16:35:28

unity软件安装教程

目录 一、Unity Hub的安装 二、Unity Hub的基础设置 语言切换 安装默认路径 安装unity编辑器和visual Studio 申请许可证 创建新项目 Unity和Visual Studio进行绑定 一、Unity Hub的安装 打开浏览器输入以下网址&#xff1a;unity.cn&#xff0c;打开unity官网 点击下载&#x…...

编程日记 2024/10/5 16:31:25

[大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠

[大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠 目录 文章目录 [大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠目录0. 摘要1. 核心内容3. 创新点4. 算法模型5. 实验效果6. 重要数据与实验结论7. 推荐阅读指数&#xff1a;8. 推荐理由 后记 论文…...

编程日记 2024/10/5 16:29:23

云手机可以解决TikTok运营的哪些问题？

随着社交媒体的飞速发展&#xff0c;TikTok迅速崛起&#xff0c;成为个人和企业进行品牌宣传和内容创作的首选平台。然而&#xff0c;在运营TikTok账号的过程中&#xff0c;不少用户会遇到各种问题。本文将详细阐述云手机如何帮助解决这些问题。 1. 多账号管理的高效便捷 通过云…...

编程日记 2024/10/5 16:25:20

Redis基础三(redis的高级配置)

Redis进阶配置 一、Redis持久化操作 ​ 持久化就是把内存的数据写到磁盘中去&#xff0c;防止服务宕机了内存数据丢失。&#xff08;Redis 数据都放在内存中。如果机器挂掉&#xff0c;内存的数据就不存在。所以需要做持久化&#xff0c;将内存中的数据保存在磁盘&#xff0c…...

编程日记 2024/10/5 16:23:18

Telnet、SSH、RDP和VNC

Telnet、SSH、RDP和VNC都是远程访问和管理的协议或工具&#xff0c;它们各自具有不同的特点和适用场景。 一、基本概念与用途 Telnet 定义&#xff1a;一种基于命令行界面的远程管理协议&#xff0c;允许用户通过网络远程访问和管理计算机。用途&#xff1a;主要用于远程登录和…...

编程日记 2024/10/5 16:21:16

FiBiNET模型实现推荐算法

1. 项目简介 A031-FiBiNET模型项目是一个基于深度学习的推荐系统算法实现&#xff0c;旨在提升推荐系统的性能和精度。该项目的背景源于当今互联网平台中&#xff0c;推荐算法在电商、社交、内容分发等领域的广泛应用。推荐系统通过分析用户的历史行为和兴趣偏好&#xff0c;预…...

编程日记 2024/10/5 16:16:12

影刀RPA:Excel内容填充指令

1.实战目标 本次主要介绍影刀RPA如何操作内容相关的填充与替换指令。主要包含以下 这些指令在数据处理方面有着重要的作用&#xff0c;可以对数据做运算&#xff0c;填充&#xff0c;替换&#xff0c;实现数据格式统一&#xff0c;便于最终的数据分析。在操作的过程中&#xf…...

编程日记 2024/10/5 16:13:09

Threejs创建正多边体

上一章节实现了球体的绘制&#xff0c;这节来绘制多面体&#xff0c;包括正多面体&#xff0c;平面中&#xff0c;每条边一样长组成的图形叫正多边形&#xff0c;这里每个面一样&#xff0c;叫正多面体。如上文一样&#xff0c;先要创建出基础的组件&#xff0c;包括场景&#…...

编程日记 2024/10/5 16:12:08

链表——单链表

题目描述 实现一个单链表&#xff0c;链表初始为空&#xff0c;支持三种操作&#xff1a; (1) 向链表头插入一个数&#xff1b; (2) 删除第 k 个插入的数后面的数&#xff1b; (3) 在第 k 个插入的数后插入一个数 现在要对该链表进行 M 次操作&#xff0c;进行完所有操作后&am…...

编程日记 2024/10/5 16:10:05

【YOLO学习】YOLOv5口罩检测实战

文章目录 1. 环境配置2. 下载代码3. 安装库3.1 安装pytorch3.2 安装其他库 4. 测试5. 数据标注6. 模型训练7. 界面可视化 1. 环境配置 1. 先参考其他文章安装 Anaconda 或者 Miniconda&#xff0c;我安装的是 Miniconda。 2. 更换国内源&#xff0c;以加快速度 。可以参考下面这…...

编程日记 2024/10/5 16:09:03

场景题1-设计redis的key和value的原则

在设计 Redis 的 key 和 value 时&#xff0c;遵循一些最佳实践和设计原则可以确保系统的性能、可扩展性和易维护性。以下是设计 Redis key 和 value 时的常见原则&#xff1a; 1.RedisKey的设计原则 1.1.简短有意义 1&#xff09;Redis 是内存数据库&#xff0c;key 越短&am…...

编程日记 2024/10/5 16:01:57

Shell-使用函数

在 Shell 脚本中&#xff0c;函数是由一段代码定义的&#xff0c;可以被重复调用。Shell 函数的定义和调用相对简单&#xff0c;并且它支持参数传递和返回值。错误处理在 Shell 中也非常重要&#xff0c;通常通过检查返回的状态码来判断是否有错误发生。 1.Shell 函数的定义和…...

编程日记 2024/10/5 16:00:55

Git介绍--github/gitee/gitlab使用

一、Git的介绍 1.1、学习Git的原因&#xff1a;资源管理 1.2、SCM软件的介绍 软件配置管理(SCM)是指通过执行版本控制、变更控制的规程&#xff0c;以及使用合适的配置管理软件来保证所有配置项的完整性和可跟踪性。配置管理是对工作成果的一种有效保护。 二、版本控制软件 …...

编程日记 2024/10/5 15:56:51

【ubuntu】【VirtualBox】VirtualBox无法加载USB移动设备的解决方法(支持U盘启动盘)

TOC 提示&#xff1a;测试可用 一、安装VirtualBox VirtualBox-7.1.2-164945-Win。 下载路径。 Download_Old_Builds_7_0 – Oracle VirtualBox 二、安装Oracle_VirtualBox_Extension_Pack-7.1.2 下载路径见上文。 三、安装增强功能 四、挂载USB 4.1 设置USB协议 4.2 挂…...

编程日记 2024/10/5 15:55:50

Koa2+mongodb项目实战1（项目搭建）

前言 在正式开始之前&#xff0c;需要先知道用到的东西&#xff1a; koa&#xff1a;Koa 是一个基于 Node.js 的 Web 应用框架&#xff0c;非常适合开发API服务&#xff0c;可以与前端框架&#xff08;如 Vue.js、React.js&#xff09;结合使用&#xff0c;实现前后端分离的开…...

编程日记 2024/10/5 15:54:48

Pyhton爬虫使用Selenium实现浏览器自动化操作抓取网页

第三方库Selenium主要是用来抓取动态生成的网页数据&#xff0c;有些网站的内容要下拉网页才会动态加载&#xff0c;特别是那些使用javaScript渲染的内容。当然Selenium还可用于自动化浏览器操作&#xff0c;比如编写一个自动抢火车票的python脚本&#xff0c;这并不难实现。接…...

编程日记 2024/10/5 15:51:45

矩阵学习过程中的一些思考

2024.09.27&#xff08;学习鸢尾花书_矩阵力量_Ch20&#xff09; &#xff08;1&#xff09;所有中心过原点的椭圆都可以用一个二维矩阵表示&#xff0c;且特征值表示长短轴长度&#xff0c;特征向量表示长短轴所在方向的单位向量&#xff08;表征椭圆旋转方向&#xff09;&am…...

编程日记 2024/10/5 15:50:44

初识Django

前言: 各位观众老爷们好&#xff0c;最近几个月都没怎么更新&#xff0c;主要是最近的事情太多了&#xff0c;我也在继续学习Django框架&#xff0c;之前还参加了一些比赛&#xff0c;现在我会开始持续更新Django的学习&#xff0c;这个过程会比较久&#xff0c;我会把我学习的…...

编程日记 2024/10/5 15:49:43

VirtualBox虚拟机连接宿主机并能够上网(小白向)

现存问题 windows系统主要使用vmare和virtualbox两种虚拟机&#xff0c;virtualbox相对于vmare更加轻便&#xff0c;但少有博客能够详细说明使用virtualbox的教程。踩了网上的坑后&#xff0c;决定写一篇文章介绍virtualbox虚拟机上网的流程。 需求 1. virtualbox虚拟机与宿主机…...

编程日记 2024/10/5 15:47:42

深度学习每周学习总结J1（ResNet-50算法实战与解析 - 鸟类识别）

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数&#xff1a;定义损失函数&#xff0c;学习率&a…...

编程日记 2024/10/5 15:44:38

商家营销工具架构升级总结

今年以来&#xff0c;商家营销工具业务需求井喷&#xff0c;需求数量多且耗时都比较长&#xff0c;技术侧面临很大的压力。因此这篇文章主要讨论营销工具前端要如何应对这样大规模的业务需求。 问题拆解 我们核心面对的问题主要如下&#xff1a; 1. 人力有限 我们除了要支撑存量…...

编程日记 2024/10/5 15:43:37

移动硬盘无法读取：问题解析与高效数据恢复实战

一、移动硬盘无法读取的困扰 在数字化时代&#xff0c;移动硬盘作为数据存储和传输的重要媒介&#xff0c;承载着大量珍贵的数据资源。然而&#xff0c;当移动硬盘突然无法读取时&#xff0c;我们往往会陷入深深的困扰之中。这种无法读取的现象可能表现为插入电脑后毫无反应、…...

编程日记 2024/10/5 15:42:36

20241005给荣品RD-RK3588-AHD开发板刷Rockchip原厂的Android12时使用iperf3测网速

20241005给荣品RD-RK3588-AHD开发板刷Rockchip原厂的Android12时使用iperf3测网速 2024/10/5 14:06 对于荣品RD-RK3588-AHD开发板&#xff0c;eth1位置上的PCIE转RJ458的以太网卡是默认好用的&#xff01; PCIE TO RJ45&#xff1a;RTL8111HS 被识别成为eth0了。inet addr:192.…...

编程日记 2024/10/5 15:41:35

node配置swagger

安装swagger npm install swagger-jsdoc swagger-ui-express 创建 swagger.js 配置文件 ​ const path require(path); const express require(express); const swaggerUI require(swagger-ui-express); const swaggerJsDoc require(swagger-jsdoc); // 修改 swaggerDoc…...

编程日记 2024/10/5 15:40:33

MATLAB plot画线的颜色 形状

文章目录 前言一、MATLAB plot画线的颜色 形状&#xff1f;颜色选项标记选项示例代码详细说明 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 项目需要&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、MA…...

编程日记 2024/10/5 15:35:28

Goland使用SSH远程Linux进行断点调试 (兼容私有库)

① 前置需求 ssh远程的 Linux 服务器必须安装 高于本地的 Go推荐golang 安装方式使用 apt yum snap 等系统自管理方式&#xff0c;&#xff08;要安装最新版本的可以找找第三方源&#xff09;&#xff0c;如无特殊需求不要自行编译安装golang ② Goland设置 2.1、设置项处理…...

编程日记 2024/10/5 15:33:24

LLM | Ollama WebUI 安装使用（pip 版）

Open WebUI (Formerly Ollama WebUI) 也可以通过 docker 来安装使用 1. 详细步骤 1.1 安装 Open WebUI # 官方建议使用 python3.11&#xff08;2024.09.27&#xff09;&#xff0c;conda 的使用参考其他文章 conda create -n open-webui python3.11 conda activate open-web…...

编程日记 2024/10/5 15:29:21

Three.js基础内容(一)

目录 一、几何体顶点和模型 1.1、点模型对象(Points)渲染顶点数据 1.2、线模型(Line)渲染顶点数据&#xff08;画个心&#xff09; 1.3、网格模型(Mesh)渲染顶点数据(三角形概念) 1.4、构建一个矩形平面几何体 1.5、几何顶点索引数据 1.6、顶点法线数据 1.7、查看three…...

编程日记 2024/10/5 15:27:19