js学习笔记(2)

一、函数

1.JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

function functionname()
{// 执行代码
}

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

2.调用带参数的函数

在调用函数时,可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

可以发送任意多的参数,由逗号 (,) 分隔:

myFunction(argument1,argument2)

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

<button onclick="myFunction('helloWorld')">点击这里</button><script>function myFunction(hello){document.write(hello);}</script>

二、JavaScript对象

JavaScript中的对象有很多,主要可以分为如下3大类:
第一类:基本对象,我们主要学习Array和JSON和String

第二类:BOM对象,主要是和浏览器相关的几个对象

第三类:DOM对象,JavaScript中将html的每一个标签都封装成一个对象

1.基本对象

1.1 array对象

Array对象时用来定义数组的。常用语法格式有如下2种:

方式1:

var arr1 = new Array(1,2,3,4,5);

方式2:

var arr2 = [5,6,7,8,9];

使用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// Array对象的定义和使用 var arr1 = new Array(1,2,3,4,5);var arr2 = [5,6,7,8,9];document.write(arr1[0]+"<br>");document.write(arr2[0]+"<br>");</script>
</body>
</html>

特点
与java中不一样的是,JavaScript中数组相当于java中的集合,数组的长度是可以变化的。而且
JavaScript是弱数据类型的语言,所以数组中可以存储任意数据类型的值。接下来我们通过代码来演
示上述特点。
注释掉之前的代码,添加如下代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// Array对象的定义和使用 // var arr1 = new Array(1,2,3,4,5);// var arr2 = [5,6,7,8,9];// document.write(arr1[0]+"<br>");// document.write(arr2[0]+"<br>");var arr = [1,2,3,4,5,6,7,8,9,10];arr[20] = 100;document.write(arr[20]+"<br>");document.write(arr.length+"<br>");document.write(arr[18])+"<br>";</script>
</body>
</html>

因为索引18的位置没有值,所以输出内容undefined,当然,我们也可以给数组添加其他类型的值,
添加代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// Array对象的定义和使用 // var arr1 = new Array(1,2,3,4,5);// var arr2 = [5,6,7,8,9];// document.write(arr1[0]+"<br>");// document.write(arr2[0]+"<br>");var arr = [1,2,3,4,5,6,7,8,9,10];arr[20] = 100;arr[18] = 'A';arr[19] =true;document.write(arr[20]+"<br>");document.write(arr.length+"<br>");document.write(arr[18]+"<br>");document.write(arr[19]+"<br>");</script>
</body>
</html>

属性和方法
Array作为一个对象,那么对象是有属性和方法的,所以接下来我们介绍一下Array对象的属性和方法
官方文档中提供了Array的很多属性和方法,但是我们只学习常用的属性和方法,如下图所示:
属性:

属性描述
length设置或返回数组中元素的数量。

方法:

方法描述
forEach()遍历数组中的每个有值得元素,并调用一次传入的函数
push()将新元素添加到数组的末尾,并返回新的长度
splice()从数组中删除元素

forEach()

arr.forEach(function(e){document.write(e+"<br>");})

或者使用箭头函数

arr.forEach((e)=>{document.write(e+"<br>")})

push()

arr.push(11);document.write(arr);

splice()

有两个参数,第一个参数为从哪个元素开始,第二个参数是删除几个元素

document.write(arr);
arr.splice(2,17);
document.write(arr);

1.2 String字符串

String对象的创建方式有2种:

方式1:

var strr1 = new String("hello world"); 

方式2:

var strr2 = 'Hello String';

输出:

        document.write(strr1+"<br>");document.write(strr2+"<br>");

属性和方法

属性描述
length表示字符串中字符的数量,通过该属性可以获取字符串的长度。例如,对于字符串 "Hello",其length属性的值为5。

方法描述示例
charAt()返回在指定位置的字符。let str = "Hello"; console.log(str.charAt(1)); // 输出 "e"
indexOf()检索字符串,返回指定子字符串首次出现的索引,如果未找到则返回 -1。let str = "Hello"; console.log(str.indexOf("l")); // 输出 2
trim()去除字符串两边的空格。let str = " Hello "; console.log(str.trim()); // 输出 "Hello"
substring()提取字符串中两个指定的索引号之间的字符。let str = "Hello"; console.log(str.substring(1, 3)); // 输出 "el"

1.3 Json

自定义对象
在 JavaScript 中自定义对象特别简单,其语法格式如下:

var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};

我们可以通过如下语法调用属性:

对象名.属性名

通过如下语法调用函数:

对象名.函数名()

json对象
JSON对象:JavaScript Object Notation,JavaScript对象标记法。是通过JavaScript标
记法书写的文本。其格式如下:

{
"key":value,
"key":value,
"key":value
}

其中,key必须使用引号并且是双引号标记,value可以是任意数据类型。

定义:

var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';

因为上述是一个json字符串,不是json对象,所以我们需要借助如下函数来进行json字符
串和json对象的转换。

 var jsonobj = JSON.parse(jsonstr);document.write(jsonobj.name+"<br>");

当然了,我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码:

document.write(JSON.stringify(jsonobj)+"<br>");

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洛谷刷题1-3

比较巧妙&#xff0c;求最小公倍数&#xff0c;看多少个数一次循环&#xff0c;直接求解就好了&#xff0c;N的数量级比较大&#xff0c;一层循环也会超时&#xff0c;也用了点双指针的想法&#xff08;归并排序&#xff09; 这里很大的问题&#xff0c;主要是cin输入的时候遇到…

2025年数学建模美赛:A题分析(1)Testing Time: The Constant Wear On Stairs

2025年数学建模美赛 A题分析&#xff08;1&#xff09;Testing Time: The Constant Wear On Stairs 2025年数学建模美赛 A题分析&#xff08;2&#xff09;楼梯磨损分析模型 2025年数学建模美赛 A题分析&#xff08;3&#xff09;楼梯使用方向偏好模型 2025年数学建模美赛 A题分…

云原生时代,如何构建高效分布式监控系统

文章目录 一.监控现状二.Thanos原理分析SidecarQuerierStoreCompactor 三.Sidecar or ReceiverThanos Receiver工作原理 四.分布式运维架构 一.监控现状 Prometheus是CNCF基金会管理的一个开源监控项目&#xff0c;由于其良好的架构设计和完善的生态&#xff0c;迅速成为了监控…

每天五分钟深度学习pytorch:基于VGG神经网络完成CAFIR10的识别

本文重点 前面的所有模型我们都是使用VGG跑了mnist数据集,本次我们换一个数据集,我们使用CAFIR数据集,这个数据集我们前面介绍过,它和mnist不一样了,mnist是灰度图,这个是彩色图,所以它的通道数是3,这样我们再构建卷积神经网路的时候,第一个卷积层的输入通道数就应该…

力扣707题(2)——设计链表

#题目 #3,5和6的代码 今天看剩下几个题的代码&#xff0c;1,2,4的代码已经在上篇博客写过了想看的小伙伴移步到&#xff1a; 力扣707题——设计链表-CSDN博客 //第3题头插法 void addAtHead(int val){ //记录头结点ListNode nhead; //新节点的创建,并让它指向原本头结点的后…

STM32_SD卡的SDIO通信_基础读写

本篇将使用CubeMXKeil, 创建一个SD卡读写的工程。 目录 一、SD卡要点速读 二、SDIO要点速读 三、SD卡座接线原理图 四、CubeMX新建工程 五、CubeMX 生成 SD卡的SDIO通信部分 六、Keil 编辑工程代码 七、实验效果 实现效果&#xff0c;如下图&#xff1a; 一、SD卡 速读…

CPU 缓存基础知识

并发编程首先需要简单了解下现代CPU相关知识。通过一些简单的图&#xff0c;简单的代码&#xff0c;来认识CPU以及一些常见的问题。 目录 CPU存储与缓存的引入常见的三级缓存结构缓存一致性协议MESI协议缓存行 cache line 通过代码实例认识缓存行的重要性 CPU指令的乱序执行通过…

【博客之星】年度总结:在云影与墨香中探寻成长的足迹

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、年度回顾 1、创作历程 2、个人成长 3、个人生活与博客事业 二、技术总结 1、赛道选择 2、技术工具 3、实战项目 三、前景与展望 1、云原生未来…

2024 自主创业事业小结和2025展望

一 2024创业事业小结&#xff1a; 1.1 2024 自主创业项目小结&#xff1a; 2024年我们小团队主要做了两大类的项目&#xff1a; 1&#xff0c;工业类 在工业领域的项目&#xff0c;我们做了3个落地的视觉集成项目。 1.1 旋转角度的测量&#xff1a; 由于是外包项目&#…

Redis使用基础

1 redis介绍 Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务 ! 是完全开源的&#xff0c;遵守 BSD 协议&#xff0c;是一个高性能的 key-value 数据库。 使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并…

激光雷达和相机早期融合

通过外参和内参的标定将激光雷达的点云投影到图像上。 • 传感器标定 首先需要对激光雷达和相机&#xff08;用于获取 2D 图像&#xff09;进行外参和内参标定。这是为了确定激光雷达坐标系和相机坐标系之间的转换关系&#xff0c;包括旋转和平移。通常采用棋盘格等标定工具&…

HMV Challenges 022 Writeup

题目地址&#xff1a;https://hackmyvm.eu/challenges/challenge.php?c022 首先猜测是否为图片隐写&#xff0c;无果 盲猜图片上的小鸟是某种带符号的隐写 去这个网站找找看&#xff1a;https://www.dcode.fr/chiffres-symboles 找到了 参照原图片鸟儿的姿态选择并排放 所…

FPGA与ASIC:深度解析与职业选择

IC&#xff08;集成电路&#xff09;行业涵盖广泛&#xff0c;涉及数字、模拟等不同研究方向&#xff0c;以及设计、制造、封测等不同产业环节。其中&#xff0c;FPGA&#xff08;现场可编程门阵列&#xff09;和ASIC&#xff08;专用集成电路&#xff09;是两种重要的芯片类型…

【前端】Hexo 建站指南

文章目录 前言生成站点本地测试部署云端参考 前言 更好的阅读体验&#xff1a;https://blog.dwj601.cn/FrontEnd/Hexo/build-your-own-website-with-hexo/ 笔记记多了&#xff0c;想要分享给同学们一起交流进步&#xff0c;该怎么办&#xff1f;想要搭建一个属于自己的知识库…

抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目

写这篇文章的初衷并不是要大家真的不用node和vscode&#xff0c;说实话前端发展成今天这样&#xff0c;在实际开发中确实离不开node和vscode这类工具了&#xff0c;但往往工具用多了我们自己也成了一个工具人&#xff01; 这篇文章的缘由 最近在开发wordpress插件的时候&…

Gin 学习笔记

教程地址&#xff1a;https://www.bilibili.com/video/BV1FV4y1C72M?spm_id_from333.788.videopod.sections&vd_source707ec8983cc32e6e065d5496a7f79ee6 01-项目搭建 各常用目录的说明&#xff1a; https://github.com/golang-standards/project-layout/blob/master/REA…

麒麟操作系统服务架构保姆级教程(十四)iptables防火墙四表五链和防火墙应用案例

如果你想拥有你从未拥有过的东西&#xff0c;那么你必须去做你从未做过的事情 防火墙在运维工作中有着不可或缺的重要性。首先&#xff0c;它是保障网络安全的关键防线&#xff0c;通过设置访问控制规则&#xff0c;可精准过滤非法网络流量&#xff0c;有效阻挡外部黑客攻击、恶…

双目立体校正和Q矩阵

立体校正 对两个摄像机的图像平面重投影&#xff0c;使二者位于同一平面&#xff0c;而且左右图像的行对准。 Bouguet 该算法需要用到双目标定后外参(R&#xff0c;T) 从上图中可以看出&#xff0c;该算法主要分为两步&#xff1a; 使成像平面共面 这个办法很直观&#xff…

【C++】string类模拟实现

目录 &#x1f495;1.模拟string类构造函数 &#x1f495;2.模拟构造函数实现 &#x1f495;3.拷贝构造函数模拟实现 &#x1f495;4.析构函数模拟实现 &#x1f495;5.size函数&#xff0c;capacity函数模拟实现 &#x1f495;6.begin函数,end函数&#xff0c;模拟实…

微调Qwen2:7B模型,加入未知信息语料

对于QWen2这样的模型,在微调的时候,语料的投喂格式满足ChatML这样的格式!!! OpenAI - ChatML: 下面是ChatML格式的介绍: https://github.com/openai/openai-python/blob/release-v0.28.0/chatml.mdhttps://github.com/openai/openai-python/blob/release-v0.28.0/chat…