JavaScript。—关于语法基础的理解—

一、程序控制语句

JavaScript 提供了 if 、if  else  和  switch  3种条件语句,条件语句也可以嵌套。

(一)、条件语句

1、单向判断 :  if...

(1)概述

< if >元素用于在判断该语句是否满足特定条件。如果条件不成立,<if>元素内的语句不会被执行。

(2)语法格式
        if(条件){语句1;语句2;...;}
(3)举例

运行代码如下:

    <script>var a = 8;if(a > 3){console.log("Ture");}</script>

运行结果如下:

2、双向判断  : if...else...

(1)概述

用于在判断该语句是否满足特定条件。若“条件”为 ture,则执行语句段1,否则,则执行语句段2.

(2、语法格式
        if(条件){语句段1;}else(条件){语句段2,前面条件都不满足时执行;}
(3)举例

运行代码如下:

    <script>var a = 8;if(a>10){console.log("Ture");}else{console.log("False")}</script>

运行结果如下:

3、多向判断语句 : if...else if...else if...

(1)概述

用于在判断该语句是否满足特定条件。如果条件1成立,<if>元素内的语句会被执行,如果条件1不成立,而条件2成立则执行<else if>元素内的语句,两者均不成立则运行<else>元素内的语句。

(2)语法格式
if (条件1) {条件表达式 1 满足 时执行
} else if (条件 2) {条件表达式 1 不满足,条件表达式2满足时执行
} else {前面所有条件都不满足时执行
}
(3)举例

运行代码如下:

    <script>var a = 8;if(a>10){console.log("a>10");}else if(a<3){console.log("a<3")}else{console.log("3<a<10")}</script>

运行结果如下:

4、多向判断语句 :switch...case...
(1)概述

分支语句switch根据变量的取值不同采取不同的处理方法。“变量”要用()括起来。必须用{ }把case括起来。即使语句段是由多个语句组成的,也不能用{ }括起来。

(2)语法格式
switch (语句) {case 表达式1:语句1;break;case 表达式2:语句2;break;default:语句3;
}
(3)举例

运行代码如下:

        var x = 8;switch(x){case 1:console.log("x=1");break;case 2:console.log("x=2");break;default:console.log("x不等于1和2")}

运行结果如下:

(二)、循环语句

在 JavaScript 中,提供了多种循环语句,有 for、while  do while语句,还提供了用于跳出循环的 break 语句,用于终止当前循环并继续执行下一轮循环的 continue 语句。

1.for 循环

(1)概述

for实现条件循环,当“条件”成立时,执行语句段;否则跳出循环体,循环结束。

(2)语法格式
for (初始化; 条件; 增量){语句段;
}
(3)举例

运行代码如下:

    <script>var a;for(a=0;a<=10;++a){console.log(a)}</script>

运行结果如下:

2.while 循环

(1)概述

“条件”中应该是关系表达式或逻辑表达式。条件为真时,执行循环体中的语句;条件表达式为假时,跳出循环体,循环结束。

(2)语法格式
while(条件){语句段;
}
(3)举例

运行代码如下:

    <script>var b=0;while(b<8){console.log(b);b++;}</script>

运行结果如下:

3. do...while...循环

 (1)概述

 do while语句是while的变体,do while语句的循环体至少执行一次,而while语句的循环体可以一次也不执行。

(2)语法格式
do {语句段;
}
while (条件)
(3)举例

运行代码如下:

        var x=1;do{console.log(x);x++;}while(x<5);

运行结果如下:

注:while 循环结构 和 for循环结构 可以相互替代,但两者各有特点。while 语句适合条件复杂无法预知循环次数的循环for语句适合已知循环次数的循环。

4.break continue 语句

(1)break语句

break语句的功能是无条件跳出循环结构或switch语句。一般break语句是单独使用的,有时也可在其后面加语句标号,以表明跳出该标号所指定的循环体,然后执行循环体后面的代码。

(2)continue语句

continue 语句的功能是结束本轮循环,跳转到循环的开始处,从而开始下一轮循环,但不能出循环体(可能会卡死)

二、函数

(一)概述

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

(二)函数的定义

JavaScript 遵循先定义函数,后调用函数的规则。函数的定义通常放在HTML文档头中,也可以放在其他位置,但最好放在文档头,这样可以确保先定义后使用。

1.语法格式

function 函数名(参数1,参数2)
{语句,...return 表达式;//return语句指明被返回的值
}

2.变量的作用域

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

运行代码如下:

    <script>var c=1;    //全局变量,即可以作用于所以函数内,与可以作用于函数外function calculator(a,b){var d=2;    //局部变量,只作用与函数内return (a+b+c)*d    //返回值6}x=calculator(1,1)console.log("计算结果:" + x);y=c*d   //函数外无法调用局部变量d,控制台报错console.log("计算结果:" + y);</script>

运行结果如下:

(三)函数的使用

1.在程序中调用(分为有返回值和无返回值调用)

(1)无返回值的调用

如果函数没有返回值或调用程序不关心函数的返回值,可以用下面的格式调用定义的函数。

函数名(实参1,实参2,...);
(2)有返回值的调用
变量名=函数名(实参1,实参2,...);

运行代码如下:

    <script>function calculator(a,b){return a+b}console.log("a+b=" + calculator(1,2));</script>

运行结果如下:

2.在按钮或超链接被点击时调用(监听点击事件)

(1)在按钮被点击时调用

运行代码如下:

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

运行结果如下:

(2)在超链接被点击时调用

使用 <a> 标记的 onClick 属性调用函数,其语法是

<a href="#" onclick="函数名(参数表)">文本</a>

运行代码如下:

    <script>function calculator(a,b){c=a+b;alert("a+b=" + c);return c;}</script><!-- 2. 在按钮或超链接被点击时调用(监听点击事件) --><!-- 2.2 监听超链接点击 --><a href="#" onclick="calculator(3,4)">百度一下,你就知道</a>

运行结果如下:

 

三、对象

(一)概念

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

(二)对象的定义与使用

运行代码如下:

    <script>//对象的定义var person = {firstName:"初音",lastName:"未来",age:16,egeColor:"绿色",getName: function(){//注意this对象的使用(只向自身)//没有this,直接用属性名控制台会报错allName = this.firstName + this.lastName;return allName},cal: function(a,b){return a+b;}}//使用对象的属性console.log(person.egeColor);//使用对象的方法console.log(person.getName());  console.log(person.cal(1,2));   </script>

运行结果如下:

注:一个对象在被引用前必须已经存在。 

(三)内置对象

利用JS内置的类创建对象(实例化)并使用对象的属性和方法。

1.Array

(1)定义一个数组
 var persons = new Array("Tom","Mike","John");var persons = ["Tom","Mike","John"];
(2)length方法:返回数组的元素个数(数组长度)
         //1. length属性返回数组的元素个数(数组长度)var persons = new Array("Tom","Mike","John");console.log(persons.length);     // 3
(3)push方法:在末尾添加元素方法
        //2. push方法用于在数组末端添加一个或多个元素,并返回//添加的新元素后的数组长度。注意:该方法会改变原数组!var persons = new Array("Tom","Mike","John");len = persons.push("Amy");console.log("新数组为:" + persons + "->长度为:" + len);    //新数组为:Tom,Mike,John,Amy->长度为:4
(4)pop方法:移除元素方法最后一个元素
        //3. pop方法用于删除数组最后一个元素,并返回被删除的那个元素。// 注意:该方法会改变原数组!var persons = new Array("Tom","Mike","John");p = persons.pop("Tom");             //无法指定特定元素,只删除最后一个元素console.log("新数组为:" + persons + "->被移除的元素为:" + p);     //新数组为:Tom,Mike->被移除的元素为:John

注:无法指定特定元素,只删除最后一个元素 

(5)reverse方法:颠倒数组
        //4. reverse方法用于颠倒排列数组元素,返回改变后的数组。// 注意:该方法会改变原数组!var persons = new Array("Tom","Mike","John");p = persons.reverse();console.log(p);         //["John","Mike","Tom"]
(6)indexOf 方法:获取数组中某个元素的索引
        //5. indexOf方法返回给定元素在数组中第一次出现的位置,若未出现返回-1var persons = new Array("Tom","Mike","Mike");console.log(persons.indexOf("Mike"));   // 1console.log(persons.indexOf("Amy"));    //-1

注:若未出现该元素则返回-1

2.String

(1)定义一个字符串
 var str="hello"
(2)length方法:返回数组的元素个数(数组长度)
        //1. length属性返回字符串的长度var s = "hello";console.log(s.length);  // 5
(3)charAt方法:返回指定索引的字符
        //2. charAt方法返回指定位置的字符var s = new String("hello");console.log(s.charAt(1));               // "e"console.log(s.charAt(s.length - 1));    // "o"console.log(s.charAt(8));               // "" 索引超出返回空字符串
(3)concat方法:用于顺序连接多个字符串,返回一个新字符串(不改变原字符串)
        //3. concat方法用于顺序连接多个字符串,返回一个新字符串(不改变原字符串)var s1 = new String("hello");var s2 = new String(" world");console.log(s1.concat(s2));         // "hello world"console.log(s1.concat(s2), "hi" , "China");    // "hello world hi China"
(4)indexOf 方法:获取数组中某个元素的索引
        //4. indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置,//返回结果是匹配开始的位置。如果返回 -1表示不匹配。var s = new String("hello world"); console.log(s.indexOf("world"));  //6console.log(s.indexOf("hi"));     //-1
(5)split方法:按照指定规则分割字符串
        //5. split方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组var s = new String("hello world hi China");console.log(s.split(" "));       //按照空格分割["hello","world","hi","China"]

3.math

(1)abs方法:返回参数绝对值
        //1. abs方法返回参数绝对值console.log(Math.abs(-1));  //输出1console.log(Math.abs(3));   //输出3
(2)max 和 min 方法:返回参数的最大值和最小值
        //2. max和min方法返回参数的最大值和最小值console.log(Math.max(-1,2,0));     //输出2console.log(Math.min(-1,2,-3));    //输出-3
(3)floor 和 ceil 方法:对应参数向下取整和向上取整
        //3. floor和ceil对应参数向下取整和向上取整console.log(Math.floor(3.3)); //输出3console.log(Math.floor(-1.1));  //输出-2console.log(Math.ceil(3.3));  //输出4console.log(Math.ceil(-3.3));  //输出-3
(4)random方法:返回(0,1)之间的一个随机数
        //4. random方法返回(0,1)之间的一个随机数var randomNumber = Math.random(); // 返回一个介于0和1之间的随机小数console.log(randomNumber); // 输出类似于3.3456789
(5) getRandomInRange 方法:随机输出任意范围的某个数(直接当成固定函数使用)
        //5. getRandomInRange方法随机输出任意范围的某个数(直接当成固定函数使用)function getRandomInRange(min, max) {  return Math.random() * (max - min) + min;  }  console.log(getRandomInRange(1, 20)); //随机输出1到20的某个数
(6)truncateDecimalPlaces方法:保留小数点指定位数(直接当成固定函数使用)
        //6. truncateDecimalPlaces方法保留小数点指定位数(直接当成固定函数使用)function truncateDecimalPlaces(num, decimalPlaces) {  let factor = Math.pow(10, decimalPlaces);  return Math.floor(num * factor) / factor;  }  console.log(truncateDecimalPlaces(3.14159, 2)); // 输出 3.14

4.Date

(1)创建一个新的 Date 对象,表示当前日期和时间
        //创建一个新的 Date 对象,表示当前日期和时间const now = new Date();
(2)获取年份(四位数的年份,比如2024)
        //获取年份(四位数的年份,比如2024)const year = now.getFullYear();
(3)获取月份(从0开始,所以0表示1月,11表示12月,需要加1才能得到实际月份)
        //获取月份(从0开始,所以0表示1月,11表示12月,需要加1才能得到实际月份)const month = now.getMonth() + 1;
 (4)获取日期(月份中的哪一天)
        //获取日期(月份中的哪一天)const day = now.getDay();
(5)获取小时(24小时制)
        //获取小时(24小时制)const hours = now.getHours();
(6)获取分钟
        //获取分钟const minutes = now.getMinutes();
(7)获取
        //获取秒const seconds = now.getSeconds();
(8)输出当前未格式化的日期和时间
        const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1;const day = now.getDay();const hours = now.getHours();const minutes = now.getMinutes();const seconds = now.getSeconds();//输出当前未格式化的日期和时间console.log(`当前日期和时间: ${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);

运行结果如下:

 

(9)输出当前格式化的日期和时间
        const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1;const day = now.getDay();const hours = now.getHours();const minutes = now.getMinutes();const seconds = now.getSeconds();// 格式化日期和时间字符串  // 如果month小于10,它会在month前面插入一个'0',否则插入一个空字符串''。// 这样做的目的是确保月份始终是两位数(例如,1月变为01)。// 同理,${day < 10 ? '0' : ''}${day}确保日期也是两位数。const formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`; const formattedTime = `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;// 输出当前格式化后的日期和时间  console.log(`当前日期和时间: ${formattedDate} ${formattedTime}`);

运行结果如下:

要理解其中的内容要自己敲打运行代码,才能加深理解!

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

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

相关文章

ComfyUI - ComfyUI 工作流中集成 SAM2 + GroundingDINO 处理图像与视频 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143359538 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 SAM2 与…

Android13预置应用及授权开发

在android13中&#xff0c;要预置一个对讲应用&#xff0c;从预置和授权&#xff0c;梳理了一下&#xff0c;以便后续查询使用。在此记录 一放置应用 我的apk应用放在vendor下面&#xff0c; 路径&#xff1a;projectroot/vendor/fly/package/apps/DMR/flydmr.apk (vendor/fl…

【密码学】全同态加密基于多项式环计算的图解

全同态加密方案提供了一种惊人的能力 —— 能够在不知道数据具体内容的情况下对数据进行计算。这使得你可以在保持潜在敏感源数据私密的同时&#xff0c;得出问题的答案。 这篇文章的整体结构包括多项式环相关的数学介绍&#xff0c;基于多项式环的加密和解密是如何工作的&…

[java][框架]springMVC(1/2)

目标 知道SpringMVC的优点编写SpringMVC入门案例使用PostMan发送请求掌握普通类型参数传递掌握POJO类型参数传递掌握json数据参数传递掌握响应json数据掌握rest风格快速开发 一、SpringMVC简介 1 SpringMVC概述 问题导入 SpringMVC框架有什么优点&#xff1f; 1.1 Spring…

基于STM32健康监控系统/智能手环/老人健康检测系统/心率血氧血压

基于STM32健康监控系统/智能手环/老人健康检测系统/心率血氧血压 持续更新&#xff0c;欢迎关注!!! 基于STM32健康监控系统/智能手环/老人健康检测系统/心率血氧血压 随着人民生活质量的提高和生活节奏的加快&#xff0c;人体健康监测成为全球关注的焦点之一。基于物联网的人体…

百度文心智能体:巧用汉字笔画生成与汉字搜索插件,打造一个学习汉字的教育类智能体

这篇文章&#xff0c;主要介绍如何巧用汉字笔画生成与汉字搜索插件&#xff0c;打造一个学习汉字的教育类智能体。 目录 一、教育类智能体 1.1、智能体演示 1.2、智能体插件 1.3、智能体prompt &#xff08;1&#xff09;角色和目标 &#xff08;2&#xff09;思考路径 …

Efficient Cascaded Multiscale Adaptive Network for Image Restoration 论文阅读笔记

Efficient Cascaded Multiscale Adaptive Network for Image Restoration 论文阅读笔记 这是新国立和新加坡管理大学发表在ECCV2024上的一篇image restoration的文章&#xff0c;提出了一个新的网络结构ECMA&#xff0c;从实验结果上看在超分&#xff0c;去噪&#xff0c;去模糊…

Python | Leetcode Python题解之第525题连续数组

题目&#xff1a; 题解&#xff1a; class Solution:def findMaxLength(self, nums: List[int]) -> int:# 前缀和字典: key为1的数量和0的数量的差值,value为对应坐标hashmap {0:-1}# 当前1的数量和0的数量的差值counter ans 0for i,num in enumerate(nums):# 每多一个1…

微服务架构深入理解 | 技术栈

微服务架构深入理解 | 技术栈 服务网关 服务网关是在微服务架构中扮演重要角色的组件&#xff0c;它是系统对外的入口&#xff0c;负责接收和处理客户端的请求&#xff0c;并将请求路由到相应的微服务。服务网关常常与API管理、负载均衡、安全认证、流量控制等功能结合&#xf…

Java日志脱敏——基于logback MessageConverter实现

背景简介 日志脱敏 是常见的安全需求&#xff0c;最近公司也需要将这一块内容进行推进。看了一圈网上的案例&#xff0c;很少有既轻量又好用的轮子可以让我直接使用。我一直是反对过度设计的&#xff0c;而同样我认为轮子就应该是可以让人拿去直接用的。所以我准备分享两篇博客…

目标追踪DeepSort

一、卡尔曼滤波 你可以在任何对某个动态系统有 “不确定信息” 的地方使用卡尔曼滤波器&#xff0c;并且可以对系统下一步的行为做出 “有根据的猜测”。即使混乱的现实干扰了你所猜测的干净运动&#xff0c;卡尔曼滤波器通常也能很好地确定实际发生了什么。它还可以利用你可能…

数据结构与算法——Java实现 53.力扣938题——二叉搜索树的范围和

生命的意义 在于活出自我 而不是成为别人眼中的你 —— 24.11.3 938. 二叉搜索树的范围和 给定二叉搜索树的根结点 root&#xff0c;返回值位于范围 [low, high] 之间的所有结点的值的和。 示例 1&#xff1a; 输入&#xff1a;root [10,5,15,3,7,null,18], low 7, high 15 …

微信小程序scroll-view吸顶css样式化表格的表头及iOS上下滑动表头的颜色覆盖、z-index应用及性能分析

微信小程序scroll-view吸顶css样式化表格的表头及iOS上下滑动表头的颜色覆盖、z-index应用及性能分析 目录 微信小程序scroll-view吸顶css样式化表格的表头及iOS上下滑动表头的颜色覆盖、z-index应用及性能分析 1、iOS在scroll-view内部上下滑动吸顶的现象 正常的上下滑动吸顶…

免费好用又好看且多端自动同步第三方终端工具Termius你值得拥有

使用目的&#xff1a; 本地终端功能一样&#xff0c;都是为了登录服务器查看日志等操作。 本地终端 优点&#xff1a;方便简单&#xff0c;无需额外下载安装、免费。 缺点&#xff1a;每次都需要重新登陆输入命令&#xff0c;步骤繁琐无法简化&#xff1b;不能跨端同步。 第…

Unity引擎材质球残留贴图引用的处理

大家好&#xff0c;我是阿赵。   这次来分享一下Unity引擎材质球残留贴图引用的处理 一、 问题 在使用Unity调整美术效果的时候&#xff0c;我们很经常会有这样的操作&#xff0c;比如&#xff1a; 1、 同一个材质球切换不同的Shader、 比如我现在有2个Shader&#xff0c;…

【electron+vue3】使用JustAuth实现第三方登录(前后端完整版)

实现过程 去第三方平台拿到client-id和client-secret&#xff0c;并配置一个能够外网访问回调地址redirect-uri供第三方服务回调搭建后端服务&#xff0c;引入justauth-spring-boot-starter直接在配置文件中定义好第一步的三个参数&#xff0c;并提供获取登录页面的接口和回调…

Jetson OrinNX平台CSI相机导致cpu load average升高问题调试

1. 前言 硬件: Orin NX JP: 5.1.2, R35.4.1 用v4l2-ctl --stream-mmap -d0 命令去获取相机数据时, 用top查看cpu使用情况, CPU占用率很低,但load average在1左右, 无任何程序运行时,load average 为0 用ps -aux 查看当前进程情况,发现有两个系统进程vi-output, …

第六十三周周报 GGNN

文章目录 week63 GGNN摘要Abstract一、文献阅读1. 题目2. abstract3. 网络架构3.1 数据处理部分3.2 门控图神经网络3.3 掩码操作 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.3.1 传感器设置策略4.3.2 数据集4.3.3 实验设置4.3.4 模型参数设置4.3.5 实验结果 5. 结论总…

【Linux】从零开始使用多路转接IO --- poll

碌碌无为&#xff0c;则余生太长&#xff1b; 欲有所为&#xff0c;则人生苦短。 --- 中岛敦 《山月记》--- 从零开始使用多路转接IO 1 前言1 poll接口介绍3 代码编写4 总结 1 前言 上一篇文章我们学习了多路转接中的Select&#xff0c;其操作很简单&#xff0c;但有一些缺…

Verilog实现的莫尔斯电码发生器

莫尔斯或者摩尔斯电码(Morse Code)&#xff0c;发明于1837年(另有一说是1836年)&#xff0c;通过不同的排列顺序来表达不同的英文字母、数字和标点符号&#xff0c;在这里作一简单处理&#xff0c;仅产生点(Dit)和划(Dah)&#xff0c;时长在0.25秒之内为点&#xff0c;超过为划…