当前位置: 首页 > 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();

http://www.lryc.cn/news/488050.html

相关文章:

  • WebStorm 2022.3.2/IntelliJ IDEA 2024.3出现elementUI提示未知 HTML 标记、组件引用爆红等问题处理
  • k8s-NetworkPolicy
  • 【C++】踏上C++学习之旅(九):深入“类和对象“世界,掌握编程的黄金法则(四)(包含四大默认成员函数的练习以及const对象)
  • C++——智能指针剖析
  • 241119.LeetCode——383.赎金信
  • 基于SSM的农家乐管理系统+论文示例参考
  • 用 Python 从零开始创建神经网络(九):反向传播(Backpropagation)(还在更新中。。。)
  • Flink是如何实现 End-To-End Exactly-once的?
  • 【vulhub】nginx解析漏洞(nginx_parsing_vulnerability)
  • 网络协议之邮件协议(SMTP、POP3与IMAP)
  • python学习笔记(3)运算符
  • _FYAW智能显示控制仪表的简单使用_串口通信
  • 激光雷达定位初始化的另外一个方案 通过键盘按键移动当前位姿 (附python代码)
  • 从0-1逐步搭建一个前端脚手架工具并发布到npm
  • 河道水位流量一体化自动监测系统:航运安全的护航使者
  • 维护在线重做日志
  • ASCB1系列APP操控末端回路智能微断 物联网断路器 远程控制开关 学校、工厂、农场、商业大楼等可用
  • Python入门(10)--面向对象进阶
  • Makefile 之 自动化变量
  • 鸿蒙开发:ForEach中为什么键值生成函数很重要
  • 沃丰科技智能外呼机器人:超越人工,重塑外呼体验
  • 百度飞浆:paddle 线性回归模型
  • 【JavaSE】【网络编程】UDP数据报套接字编程
  • 45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
  • 20241120-Milvus向量数据库快速体验
  • 【Golang】——Gin 框架中间件详解:从基础到实战
  • 量子计算来袭:如何保护未来的数字世界
  • VMware虚拟机(Ubuntu或centOS)共享宿主机网络资源
  • 光伏电站仿真系统的作用
  • Golang文件操作