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>");

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自动驾驶之DriveMM: All-in-One Large Multimodal Model for Autonomous Driving

1. 写在前面 工作之后,主要从事于偏工程比较多的内容, 很少有机会读论文了,但2025年,由于之前有些算法的背景, 后面可能会接触一些多模态大模型相关的工作,所以又调头有点往算法的方向偏移, 而算法呢,很重要的一点就是阅读论文。2025年,再拾起论文这块的工作。 今天…

机器学习-数据集划分

文章目录 一. 为什么要划分数据集二. 数据集划分的方法1. 留出法&#xff1a;2. 交叉验证&#xff1a;将数据集划分为训练集&#xff0c;验证集&#xff0c;测试集3. 留一法&#xff1a;4. 自助法&#xff1a; 一. 为什么要划分数据集 为了能够评估模型的泛化能力&#xff0c;可…

最新-CentOS 7 基于1 Panel面板安装 JumpServer 堡垒机

CentOS 7 基于1 Panel面板安装 JumpServer 堡垒机 一、前言二、设备要求三、环境要求四、安装4.1 环境安装4.2 JumpServer安装4.3 访问JumpServerWeb端&#xff0c;进行登录 五、登录Web控制台 一、前言 JumpServer是广受欢迎的开源堡垒机。运维必备神器&#xff01;JumpServe…

解决CentOS9系统下Zabbix 7.2图形中文字符乱码问题

操作系统&#xff1a;CentOS 9 Zabbix版本&#xff1a;Zabbix7.2 问题描述&#xff1a;主机图形中文字符乱码 解决方案&#xff1a; # 安装字体配置和中文语言包 sudo yum install -y fontconfig langpacks-zh_CN.noarch # 检查是否已有中文字体&#xff1a; fc-list :lan…

JAVA-快速排序

一、快速排序基本思想 快速排序是 Hoare 于 1962 年提出的一种二叉树结构的交换排序方法&#xff0c;其基本思想为&#xff1a; 任取待排序元素序列中的某元 素作为基准值&#xff0c;按照该排序码将待排序集合分割成两子序列&#xff0c;左子序列中所有元素均小于基准值&#…

WPF1-从最简单的xaml开始

1. 最简单的WPF应用 1.1. App.config1.2. App.xaml 和 App.xaml.cs1.3. MainWindow.xaml 和 MainWindow.xaml.cs 2. 正式开始分析 2.1. 声明即定义2.2. 命名空间 2.2.1. xaml的Property和Attribute2.2.2. xaml中命名空间2.2.3. partial关键字 学习WPF&#xff0c;肯定要先学…

Spring 框架:配置缓存管理器、注解参数与过期时间

在 Spring 框架中&#xff0c;可通过多种方式配置缓存具体行为&#xff0c;常见配置方法如下。 1. 缓存管理器&#xff08;CacheManager&#xff09;配置 基于内存的缓存管理器配置&#xff08;以SimpleCacheManager为例&#xff09; SimpleCacheManager 是 Spring 提供的简单…

【专题】为2025制定可付诸实践的IT战略规划报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p39055 在当今瞬息万变的商业环境中&#xff0c;制定有效的 IT 战略规划对于企业的成功与可持续发展至关重要。本报告深入探讨了制定 IT 战略规划的关键活动&#xff0c;旨在为企业和决策者提供全面且实用的指导。 Gartner的《为202…

计算机图形学:实验二 三维模型读取与控制

一、程序功能设计 通过键盘和鼠标结合实现了对三维牛模型的变换控制&#xff0c;可以灵活调整旋转的轴、方向、速度以及暂停或复位三维牛模型状态。 动画启动和暂停&#xff1a; 按键&#xff1a;鼠标左键&#xff08;启动&#xff09;&#xff0c;鼠标右键&#xff08;暂停…

代码随想录算法训练营day34

代码随想录算法训练营 —day34 文章目录 代码随想录算法训练营前言一、62.不同路径动态规划动态规划空间优化 二、63. 不同路径 II动态规划动态规划优化空间版 三、343. 整数拆分动态规划贪心算法 96.不同的二叉搜索树总结 前言 今天是算法营的第34天&#xff0c;希望自己能够…

DAY6,使用互斥锁 和 信号量分别实现5个线程之间的同步

题目 请使用互斥锁 和 信号量分别实现5个线程之间的同步 代码&#xff1a;信号量实现 void* task1(void* arg); void* task2(void* arg); void* task3(void* arg); void* task4(void* arg); void* task5(void* arg);sem_t sem[5]; //信号量变量int main(int argc, const …

不写Sql进行CRUD——MybatisPlus的基本用法

目录 使用步骤 引入依赖 在XXXMapper接口里实现BaseMapper<>接口&#xff08;找爸爸&#xff09; 之后就可以在项目中直接使用XXXMapper内定义的crud方法了 使用mabatis-plus时常用的注解 常见配置 核心功能 条件构造器 查询数据 修改数据 条件构造器的用法&a…

go-zero框架基本配置和错误码封装

文章目录 加载配置信息配置 env加载.env文件配置servicecontext 查询数据生成model文件执行查询操作 错误码封装配置拦截器错误码封装 接上一篇&#xff1a;《go-zero框架快速入门》 加载配置信息 配置 env 在项目根目录下新增 .env 文件&#xff0c;可以配置当前读取哪个环…

JavaScript学习笔记(1)

html 完成了架子&#xff0c; css 做了美化&#xff0c;但是网页是死的&#xff0c;我们需要给他注入灵魂&#xff0c;所以接下来我们需要学习 JavaScript&#xff0c;这门语言会让我们的页面能够和用户进行交互。 一、引入方式 1.内部脚本 将 JS 代码定义在 HTML 页面中 Jav…

FPGA自分频产生的时钟如何使用?

对于频率比较小的时钟&#xff0c;使用clocking wizard IP往往不能产生&#xff0c;此时就需要我们使用代码进行自分频&#xff0c;自分频产生的时钟首先应该经过BUFG处理&#xff0c;然后还需要进行时钟约束&#xff0c;处理之后才能使用。

(1)STM32 USB设备开发-基础知识

开篇感谢&#xff1a; 【经验分享】STM32 USB相关知识扫盲 - STM32团队 ST意法半导体中文论坛 单片机学习记录_桃成蹊2.0的博客-CSDN博客 USB_不吃鱼的猫丿的博客-CSDN博客 1、USB鼠标_哔哩哔哩_bilibili usb_冰糖葫的博客-CSDN博客 USB_lqonlylove的博客-CSDN博客 USB …

9、Docker环境安装Nginx

一、拉取镜像 docker pull nginx:1.24.0二、创建映射目录 作用&#xff1a;是将docker中nginx的相关配置信息映射到外面&#xff0c;方便修改配置文件 1、创建目录 # cd home/ # mkdir nginx/ # cd nginx/ # mkdir conf html log2、生成容器 docker run -p 80:80 -d --name…

linux 下tensorrt的yolov8的前向推理(c++ 版本)的实现

一、环境搭建 cuda 11.4 ubuntu 20.04 opencv-4.5.2 1.1 配置tensorrt 根据本机的硬件配置及cuda的版本&#xff0c;选择TensorRT-8.6.1.6的版本&#xff0c;下载网址为: TensorRT SDK | NVIDIA Developer 根据官网的说明&#xff0c;下载对应的压缩包即可。解压后&…

【前端】Hexo 建站指南

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

LetsWave脑电数据简单时频分析及画图matlab(二)

在笔记&#xff08;一&#xff09;中的文档链接&#xff0c;有很详细的介绍时频分析。这里简单描述&#xff0c;letswave7中有两种方法&#xff0c;一种是STFT&#xff08;短时傅里叶变换&#xff09;和CWT&#xff08;连续小波变换&#xff09;。&#xff08;一&#xff09;中…