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

javaScript语法基础(函数,对象,常用类Array,String,Math和Date)

  • # 本文详细结束了JavaScript中函数、对象、常用类Array,String,MathDate的用法。

一、函数

1、概述

  • 将程序中多次要用到的代码块封装起来,就是函数。
  • 函数使代码块的重复使用更方便,且功能独立,便于维护。

2、函数的定义与使用

①. 简介

  • 函数可以使用参数来传递数据,也可以不使用参数。
  • 函数在完成功能后可以有返回值,也可以没有返回值。
function 函数名(参数1,参数2…)
{函数体;return 返回值;  
}function 函数名(参数1,参数2…)
{语句;......return 表达式;  //return语句指明被返回的值
}

 ②. 函数的使用

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS的函数</title>
</head>
<body><script>function calculator(a, b){var c = a+b;return c;        }var result = calculator(1,1);console.log("result =" +result);</script>
</body>
</html>
代码运行后如下:

③.在JS程序中被调用 (包括有返回值和无返回值的调用)

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS的函数</title>
</head>
<body><script>function calculator(a, b){c = a+b;alert("a+b=" + c); return c;        }var result = calculator(1,1);console.log("result =" +result);// 1. 在JS程序中被调用 (包括有返回值和无返回值的调用)console.log("a+b=" + c)</script></body>
</html>
代码运行后如下:

3、监听点击事件

①.在按钮被点击时调用

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS的函数</title>
</head>
<body><script>function calculator(a, b){c = a+b;alert("a+b=" + c); return c;        }</script><!-- 2. 在按钮或超链接被点击时调用(监听点击事件) --><!-- 2.1 监听按钮点击 --><input type="submit" value="计算a+b的和" onclick="calculator(1,2)"/></body>
</html>
代码运行后如下:

 

 ②.在超链接被点击时调用

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS的函数</title>
</head>
<body><script>function calculator(a, b){c = a+b;alert("a+b=" + c); return c;        }</script><!-- 2.2 监听超链接点击 --><a href="#" onclick="calculator(3,4)">百度一下,你就知道</a>
</body>
</html>
代码运行后如下:

 

 4、变量

  • 变量的作用域:变量分为全局变量和局部变量。全局变量定义在所有函数之外,作用范围是所有函数;局部变量定义在函数之内,只对该函数可见,对其它函数不可见。

全局变量和局部变量的运用

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS的函数</title>
</head>
<body><script>var c=1;  //全局变量,既可以作用于所有函数内,又可以作用于函数外function calculator1(a,b){   var d=2;     //局部变量,只作用与函数内return (a+b+c)*d;  //返回6}rlt1 = calculator1(1,1)console.log("计算结果为:" + rlt1)rlt2 = (1+1+c)*d      //函数外无法调用局部变量d,控制台报错 console.log("计算结果为:" + rlt2)</script></body>
</html>

代码运行后如下:

二、对象

1、概述

  • 对象(object)是 JavaScript 中最重要的数据类型,
  • 是一组“键值对”的集合体。类似Python中的字典。
  • 其中,键可以为变量名(此时称为对象的属性)和函数名(此时称为对象的方法)

2、对象的定义和使用

  • 定义一个对象(类似于python里面的类,其结构是键值对)
  • 使用一个对象的属性和方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js的对象</title>
</head>
<body><script>// 1.定义一个对象(类似于python里面的类,其结构是键值对)var person={age:18,sex:"female_",calculator:function(a,b){return a+b;}}// 2.使用一个对象的属性和方法console.log(person.age)  //使用对象的属性console.log(person.calculator(1,1))//使用对象的方法</script>
</body>
</html>
代码运行后如下:

3、js的常用对象

①.Array对象

1.根据Array对象,得到一个对应的数组实例和往数组里面添加一个新的元素(入栈)
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js的常用对象</title>
</head>
<body><script>//1.根据Array对象,得到一个对应的数组实例//var arr= new Array("john","tom","joe");var arr= new Array("11","22","33");//2.往数组里面添加一个新的元素(入栈)length = arr.push("zhangsan")  //返回数组的长度for(const i in arr ){console.log(arr[i]);}</script>
</body>
</html>
代码运行后如下:

 

2.颠倒数组元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js的常用对象</title>
</head>
<body><script>//1.根据Array对象,得到一个对应的数组实例var arr= new Array("11","22","33");length = arr.push("zhangsan")//4.颠倒数组元素console.log(arr.reverse());</body>
</html>
 代码运行后如下:

3.获取数组中某个元素的索引 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js的常用对象</title>
</head>
<body><script>//1.根据Array对象,得到一个对应的数组实例var arr= new Array("11","22","33");length = arr.push("zhangsan")//5.获取数组中某个元素的索引console.log(arr.indexOf("11"));console.log(arr.indexOf("33"));</body>
</html>
代码运行后如下:

②.String类

1.定义一个字符串
var str = new String("我爱北京天安门")
2.获取字符串的长度 
len = srt.length
console.log(`字符串长度为:${len}`);
3.返回指定索引的字符(索引不能为负数)
 var i= 1ch = str.charAt(1)console.log (`索引${i}对应字符为:${ch}`);var a =  "aaa"var b = "bbb"var c = "ccc"
4.concat 用于顺序连接多个字符串,返回一个新字符串
 var d = a+b+cvar d = a.concat(b,c,e)console.log(d);
5.获取某个字符索引
console.log(str.indexOf("爱"));
6.按照指定规则分割字符串
var str = "aaa  bbb  ccc"
console.log(str.split("b"))

③.Math类

1.abs方法返回参数值的绝对值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js的内置对象Math</title>
</head>
<body><script>//1.abs方法返回参数值的绝对值console.log(Math.abs(1)) //1console.log(Math.abs(-1))//1</script>
</body>
</html>
代码运行后如下:

 

2.max和min方法返回参数值的最大值和最小值 
        //2.max和min方法返回参数值的最大值和最小值console.log(Math.max(1,2,3))//3console.log(Math.min(1,2,3))//1
代码运行后如下:

 

3..random返回[0,1]之间的一个伪随机数
//4.random返回[0,1]之间的一个伪随机数for(var index = 1;index <=5; index++){console.log(Math.random())}
代码运行后如下:

 

④.Date类
//创建一个新的Date 实例,表示当前日期和时间const now = new Date();
//获取年份(四位数的年份,比如2024)const year = now.getFullYear();

相关文章:

javaScript语法基础(函数,对象,常用类Array,String,Math和Date)

# 本文详细结束了JavaScript中函数、对象、常用类Array&#xff0c;String&#xff0c;Math和Date的用法。 一、函数 1、概述 将程序中多次要用到的代码块封装起来&#xff0c;就是函数。函数使代码块的重复使用更方便&#xff0c;且功能独立&#xff0c;便于维护。 2、函数的…...

WebStorm 2022.3.2/IntelliJ IDEA 2024.3出现elementUI提示未知 HTML 标记、组件引用爆红等问题处理

WebStorm 2022.3.2/IntelliJ IDEA 2024.3出现elementUI提示未知 HTML 标记、组件引用爆红等问题处理 1. 标题识别elementUI组件爆红 这个原因是&#xff1a; 在官网说明里&#xff0c;才版本2024.1开始&#xff0c;默认启用的 Vue Language Server&#xff0c;但是在 Vue 2 项…...

k8s-NetworkPolicy

NetworkPolicy 是k8s中的网络策略可以限制pod以及namespace之间的访问流量 演示一下名称空间之间基于端口的访问限制 官方对networkpolicy的介绍 官方网址&#xff1a; 网络策略 |Kubernetes &#xff08;简体中文&#xff09; 一&#xff1a;创建NetworkPolicy vim…...

【C++】踏上C++学习之旅(九):深入“类和对象“世界,掌握编程的黄金法则(四)(包含四大默认成员函数的练习以及const对象)

文章目录 前言1. 实现Date类的构造函数2. 实现Date类的拷贝构造函数3. 实现Date类的赋值运算符重载4. 实现各Date对象之间的比较接口5. 实现Date对象的加减接口6. const成员7. 取地址及const取地址操作符重载 前言 在我们前面学习到了"类和对象"的四大默认成员函数(…...

C++——智能指针剖析

参考&#xff1a; 恋恋风辰官方博客 动态内存管理 - cppreference.com SRombauts/shared_ptr&#xff1a; 一个最小的 shared/unique_ptr 实现&#xff0c;用于处理 boost/std&#xff1a;&#xff1a;shared/unique_ptr 不可用的情况。 C智能指针_c 智能指针-CSDN博客 当…...

241119.LeetCode——383.赎金信

题目描述 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&#xff1a; 输…...

基于SSM的农家乐管理系统+论文示例参考

1.项目介绍 功能模块&#xff1a;管理员&#xff08;农家乐管理、美食信息管理、住宿信息管理、活动信息、用户管理、活动报名、论坛等&#xff09;&#xff0c;普通用户&#xff08;注册登录、活动报名、客房预订、用户评价、收藏管理、模拟支付等&#xff09;技术选型&#…...

用 Python 从零开始创建神经网络(九):反向传播(Backpropagation)(还在更新中。。。)

反向传播&#xff08;Backpropagation&#xff09; 引言1. 分类交叉熵损失导数&#xff08;Categorical Cross-Entropy loss derivative&#xff09;2. 分类交叉熵损失衍生代码实现3. Softmax激活导数&#xff08;Softmax activation derivative&#xff09;4. Softmax激活函数…...

Flink是如何实现 End-To-End Exactly-once的?

flink 如何实现端到端的 Exactly-once? 端到端包含 Source, Transformation,Sink 三部分的Exactly-once Source&#xff1a;支持数据的replay&#xff0c;如Kafka的offset。Transformation&#xff1a;借助于checkpointSink&#xff1a;Checkpoint 两阶段事务提交 两阶段提…...

【vulhub】nginx解析漏洞(nginx_parsing_vulnerability)

1. nginx解析漏洞原理 fastcgi 在处理’.php’文件时发现文件并不存在,这时 php.ini 配置文件中cgi.fix_pathinfo1 发挥作用,这项配置用于修复路径,如果当前路径不存在则采用上层路径 (1)由于 nginx.conf的配置导致 nginx把以’.php”结尾的文件交给 fastcgi 处理,为此可以构造…...

网络协议之邮件协议(SMTP、POP3与IMAP)

一、引言 在数字化时代&#xff0c;电子邮件已成为人们日常沟通和信息交流的重要工具。电子邮件系统的稳定运行离不开一系列网络协议的支撑&#xff0c;其中SMTP、POP3和IMAP是最为关键的三个协议。它们分别负责邮件的发送、接收和管理&#xff0c;共同构建了一个高效、稳定的…...

python学习笔记(3)运算符

Python 语言支持的运算符: Python 语言支持以下类型的运算符: 算术运算符 比较&#xff08;关系&#xff09;运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 接下来让我们一个个来学习Python的运算符。 Python算术运算符 运算符描述实例加 - 两…...

_FYAW智能显示控制仪表的简单使用_串口通信

一、简介 该仪表可以实时显示位移传感器的测量值&#xff0c;并可设定阈值等。先谈谈简单的使用方法&#xff0c;通过说明书&#xff0c;我们可以知道长按SET键可以进入参数选择状态&#xff0c;按“↑”“↓”可以选择该组参数的上一个或者下一个参数。 从参数一览中可以看到有…...

激光雷达定位初始化的另外一个方案 通过键盘按键移动当前位姿 (附python代码)

通常使用的是通过在 rviz 中点选指定初始化位置和方向来完成点云的初始化匹配。 但是这种粗略的初始化方法有时候可能不成功,因此需要使用准确的初始化方法,以更好的初始值进行无损检测配准。 为了提供更好的匹配初始值,我使用 Python 脚本获取键盘输入,并不断调整这个匹配…...

从0-1逐步搭建一个前端脚手架工具并发布到npm

前言 vue-cli 和 create-react-app 等 cli 脚手架工具用于快速搭建应用&#xff0c;无需手动配置复杂的构建环境。本文介绍如何使用 rollup 搭建一个脚手架工具。 脚手架工具的工作流程简言为&#xff1a;提供远端仓库各种模版 > 用户通过命令选择模版 > 拉取仓库代码 …...

河道水位流量一体化自动监测系统:航运安全的护航使者

在广袤的水域世界中&#xff0c;航运安全始终是至关重要的课题。而河道水位流量一体化自动监测系统的出现&#xff0c;如同一位强大的护航使者&#xff0c;为航运事业的稳定发展提供了坚实的保障。 水位传感器&#xff1a;负责实时监测河道的水位变化。这些传感器通常采用先进的…...

维护在线重做日志

学习目标 解释在线重做日志文件的目的概述在线重做日志文件的结构控制日志开关和检查点多路复用和维护在线重做日志文件使用OMF管理在线重做日志文件获取在线重做日志文件信息 在线重做日志文件提供了在数据库发生故障时重做事务的方法。 每个事务都同步写入重做日志缓冲区&a…...

ASCB1系列APP操控末端回路智能微断 物联网断路器 远程控制开关 学校、工厂、农场、商业大楼等可用

安科瑞戴婷 Acrel-Fanny ASCB1系列智能微型断路器是安科瑞电气股份有限公司全新推出的智慧用电产品&#xff0c;产品由智能微型断路器与智能网关两部分组成&#xff0c;可用于对用电线路的关键电气因素&#xff0c;如电压、电流、功率、温度、漏电、能耗等进行实时监测&#x…...

Python入门(10)--面向对象进阶

Python面向对象进阶 &#x1f680; 1. 继承与多态 &#x1f504; 1.1 继承基础 class Animal:def __init__(self, name, age):self.name nameself.age agedef speak(self):passdef describe(self):return f"{self.name} is {self.age} years old"class Dog(Anim…...

Makefile 之 自动化变量

作用范围只在这条规则以及连带规则中&#xff0c;所以其值也只在作用范围内有效。而不会影响规则链以外的全局变量的值。 "$" 表示目标的集合&#xff0c;就像一个数组&#xff0c;"$"依次取出目标&#xff0c;并执于命令。 "$<"和"$&qu…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...