广州外贸网站建设 open淘宝流量
- # 本文详细结束了JavaScript中函数、对象、常用类Array，String，Math和Date的用法。
一、函数
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();