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

ops/2024/10/21 11:56:28/

这里写自定义目录标题

    • 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>javascript">var age = 20;</script>
</body>
引入本地独立js文件
<body><script type="text/javascript" src="./hello.js"
</body>
引入网络来源文件
<body><script scr="https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx">javascript"></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方法还可以接受第二个参数,限定返回数组的最大成员数。
    在这里插入图片描述

http://www.ppmy.cn/ops/121242.html

相关文章

银河麒麟系统内存清理

银河麒麟系统内存清理 1、操作步骤2、注意事项 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 当银河麒麟系统运行较长时间&#xff0c;内存中的缓存可能会积累过多&#xff0c;影响系统性能。此时&#xff0c;你可以通过简单的命令来清理这…

前端知识汇总(持续更新)

见&#xff1a;GitHub - eHackyd/Front-End: 前端知识汇总 包含&#xff1a;html&#xff0c;css&#xff0c;js&#xff0c;ts等等&#xff08;语法使用实例&#xff09;

滚雪球学Oracle[8.1讲]:高级主题与未来趋势

全文目录&#xff1a; 前言0. 上期回顾1. Oracle数据库中的大数据与分析1.1 Oracle与大数据平台的集成1.2 Oracle Advanced Analytics的使用1.3 Hadoop与Oracle的混合架构设计 2. 机器学习与Oracle数据库2.1 使用Oracle Machine Learning进行预测分析2.2 数据库内置机器学习模型…

[C语言]--编译和链接

文章目录 目录 文章目录 前言 一、环境介绍 二、翻译环境 1.预处理&#xff08;预编译&#xff09; 2.编译 3.汇编 4.链接 三、运行环境 前言 对编译和链接 进行简单的介绍 一、环境介绍 在ANSIC的任何⼀种实现中&#xff0c;存在两个不同的环境。 翻译环境&#xff0c;在这…

SpringBoot整合RabbitMQ

流程图概括 1.引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency> 2. 配置RabbitMQ连接 在application.properties或application.yml中配置RabbitMQ服务…

在Ubuntu 20.04中安装CARLA

0. 引言 CARLA (Car Learning to Act) 是一款开源自动驾驶模拟器&#xff0c;其支持自动驾驶系统全管线的开发、训练和验证&#xff08;Development, Training, and Validation of autonomous driving systems&#xff09;。Carla提供了丰富的数字资产&#xff0c;例如城市布局…

Apache NiFi最全面试题及参考答案

目录 解释什么是Apache NiFi以及它的主要用途。 NiFi 的数据处理流程是怎样的? NiFi 的架构包括哪些组件? 解释 NiFi 的 “FlowFile” 概念及其组成部分。 NiFi 的 “Processor” 是什么?有哪些类型? 如何在 NiFi 中创建一个新的数据流? NiFi 的 “Connection” 有…

MFC工控项目实例之十九手动测试界面输出信号切换

承接专栏《MFC工控项目实例之十八手动测试界面输入信号实时检测》 根据板卡设置界面组合框选项设定的输出信号&#xff0c;通过读取文件中保存的键值&#xff0c;用单选按钮切换输出信号接通、关闭。 1、在Data_1.h文件中添加代码 CString COMB_Data_O_1[]{"夹紧",&…