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

news/2024/10/5 18:12:56 标签: 前端, 学习, 笔记, javascript

这里写自定义目录标题

    • 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.niftyadmin.cn/n/5691140.html

相关文章

Linux环境基础开发工具使用(2)

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Linux环境基础开发工具使用(2) 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. Li…

如何快速学习K8s

1.背景 最近在学习k8s相关&#xff0c;也写了相关的一些技术文。有童鞋私信我是怎么学k8s。我今天分享下相关的学习历程。 2.过程 工欲善其事必先利其器&#xff0c;除了电脑&#xff0c;还要有完整配套的资料去参考学习。所以大家应该先找一些比较完整的k8s资料去看&#xf…

Oracle SQL语句没有过滤条件,究竟是否会走索引??

答案是&#xff1a;可能走索引也可能不走索引&#xff0c;具体要看列的值可不可为null&#xff0c;Oracle不会为所有列的nullable属性都为Y的sql语句走索引。 例子&#xff1a; create table t as select * from dba_objects; CREATE INDEX ix_t_name ON t(object_id, objec…

数据集-目标检测系列- 货船 检测数据集 freighter>> DataBall

数据集-目标检测系列- 货船 检测数据集 freighter>> DataBall 数据集-目标检测系列- 货船 检测数据集 freighter>> DataBall 数据量&#xff1a;3k 想要进一步了解&#xff0c;请联系。 DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种…

python中的函数介绍

文章目录 1.函数1.1 语法格式1.2 函数参数1.3 函数的返回值1.4 变量作用域1.5 函数的执行过程1.6 链式调用1.7 嵌套调用1.8 函数栈帧1.9 函数递归1.10 参数默认值1.11 关键词参数 1.函数 无论是编程中的函数还是数学中的函数&#xff0c;本质都是差不多的&#xff0c;丢给函数…

软件设计师——数据结构

本博文所有内容来自于B站up主zst_2001 目录 时间复杂度 常规数据结构 链表 栈与队列 ​编辑 串 数组 树 卡特兰数&#xff1a; 平衡二叉树 哈夫曼 图 AOV 排序 顺序 折半 哈希 时间复杂度 常规数据结构 链表 栈与队列 串 找i位置前面的字符串&#xff0c…

优优嗨聚集团:债务纠纷下的个人财务困境揭秘

在当今社会&#xff0c;随着经济活动的日益频繁与复杂化&#xff0c;债务问题已成为许多人生活中难以回避的挑战之一。债务纠纷&#xff0c;作为这一问题的直接体现&#xff0c;不仅关乎金钱的得失&#xff0c;更深刻地影响着个人的生活方方面面&#xff0c;从心理健康、家庭关…

电器自动化入门08:隔离变压器、行程开关介绍及选型

视频链接&#xff1a;3.4 电工知识&#xff1a;三相交流异步电动机自动往返行程控制及控制变压器选型_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1PJ41117PW?p8&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 1.隔离&#xff08;控制&#xff09;变压器 2.行程开…