当前位置： 首页 > article >正文

JavaScript基本内容续集之函数和对象

article 2025/2/28 23:22:29

书接上篇，我们讲到了JavaScript的基本内容，这篇讲到JavaScript的函数和对象。

目录

一、函数

（一）概述

（二）函数的定义

（三）函数的使用

1、在程序中调用（分为有返回值和无返回值调用）

①无返回值的调用

②有返回值的调用

2、常见事件

①在超链接被点击时调用（监听点击事件）

②在按钮被点击时调用（监听点击事件）

③常见的 HTML 事件

（三）变量的作用域

①全局变量

②局部变量

二、对象

（一）概念

（二）对象的使用

（三）内置对象

1、Array：数组

2、String

3、Math

4、Date

一、函数

（一）概述

JavaScript中的函数可以使用参数来传递数据，也可以不使用参数。函数在完成功能后可以有返回值，也可以没有返回值。

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

（二）函数的定义

语法如下：

function 函数名（参数1，参数2）
{
    语句，
    ...
    return 表达式；//return语句指明被返回的值
}

（三）函数的使用

1、在程序中调用（分为有返回值和无返回值调用）

①无返回值的调用

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

函数名（实参1，实参2，...）;
②有返回值的调用

如果调用程序需要函数的返回结果，则要用下面的格式调用定义的函数。

变量名=函数名（实参1，实参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>Document</title>
</head>
<body>
    <script>
    function calculator(a,b)
        {
            var sum=a+b;
            return sum;
        }
        var result= calculator(1,1);
        console.log("result="+result);
    </script>
</body>
</html>

运行结果如下：

2、常见事件

①在超链接被点击时调用（监听点击事件）

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

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

示例代码如下：

<!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>Document</title>
</head>

<body>

<a href="#" onclick="calculator()">点击加载</a>
</body>
<script type="text/javascript">
    function calculator(){
        alert("窗户加载完成！")
    }
</script>
</script>
</html>

点击链接运行结果如下：

②在按钮被点击时调用（监听点击事件）

示例代码如下：

<!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>Document</title>
</head>

<body>

    <button type="button" onclick="calculator()">点击加载</button>
   
</body>
<script type="text/javascript">
    function calculator(){
        alert("窗户加载完成！")
    }
</script>
</html>

运行结果如下：

③常见的 HTML 事件
事件描述
onchangeHTML 元素已被改变
onclick用户点击了 HTML 元素
onmouseover用户把鼠标移动到 HTML 元素上
onmouseout用户把鼠标移开 HTML 元素
onkeydown用户按下键盘按键
onload浏览器已经完成页面加载

（三）变量的作用域

①全局变量

定义在所有函数之外，作用范围是所有函数；

②局部变量

定义在函数之内，只对该函数可见，对其它函数不可见。

二、对象

（一）概念

对象是JavaScript的一个基本数据类型，是一种复合值，是一组“键值对”的结合体。类似Python中的字典。其中，键可以为变量名（此时称为对象的属性）和函数名（此时称为对象的方法）

（二）对象的使用

1、定义一个对象（类似于Python中的类，其结构是键值对）

  var person={
         firstName:"张",
            lastName:"三",
            age:18,
            eyeColor:"黑色",
            getName: function(){
                // 注意this对象的使用（指向自身）
                // 没有this，直接用属性名控制台会报错
                allName = this.firstName + this.lastName;
                return allName;
            },
            cal: function(a,b){
                return a+b;
            }
        };

2、使用一个对象的属性和方法

console.log(person.eyeColor)  //使用对象的属性
console.log(person.getName()) //使用对象的方法
console.log(person.cal(1,2))  //使用对象的方法

示例代码如下：

<!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 person = {
            firstName:"张",
            lastName:"三",
            age:18,
            eyeColor:"黑色",
            getName: function(){
                allName = this.firstName + this.lastName;
                return allName;
            },
            cal: function(a,b){
                return a+b;
            }
        };
        console.log(person.eyeColor)  //使用对象的属性
        console.log(person.getName()) //使用对象的方法
        console.log(person.cal(1,2))  //使用对象的方法
 
    </script>


</body>
</html>

 运行结果如下：

（三）内置对象

1、Array：数组

①根据Array对象，得到一个对应的数组实例

var persons=new Array("张三","李四","刘华") 
var persons=["张三","李四","刘华"]

 ②push方法用于在数组末端添加一个或多个元素（入栈），并返回添加新元素后的数组长度。注意：该方法会改变原数组！

 console.log(persons.push("胡星")); //返回元素的个数：3

length=persons.push("胡星") 
console.log('长度为:' + len); //返回数组长度：4

 ③往数组里面移出一个元素（出栈），pop方法用于删除数组最后一个元素，并返回被删除的那个元素，会改变原数组！

 var persons=new Array("张三","李四","刘华");
        p = persons.pop("胡星");
        console.log('新数组为:' + persons +'->被移除的元素为: ' + p); 
//输出新数组为张三，李四，被移除的元素为刘华

 ④颠倒数组元素

var persons=new Array("张三","李四","刘华");
p = persons.reverse();
console.log(p);
// "刘华"，"李四"， "张三"

 ⑤获取数组中某个元素的索引

var persons = new Array("张三","李四","刘华");
console.log(persons.indexOf("李四"));  //1
console.log(persons.indexOf("胡星"));  //-1

以上代码均写在<script>元素内。

2、String

 ①定义一个字符串

 var str="hello"

② 获取字符串的长度（length）

len =str.length
console.log(`字符串长度为：${len}`);  //2

③ 返回指定索引的字符（charAt）

var str =new String（‘hello’）； //索引不能为负数
 console.log(s.charAt(1)); //‘e’
 console.log(s.charAt(s.length - 1)); // "o"
console.log(s.charAt(10));  //' '索引超出返回空字符串

④ concat 用于顺序连接多个字符串，返回一个新字符串（不改变原字符串）

var s1 = new String('hello'); 
var s2 = new String(' world'); 
console.log(s1.concat(s2));          // "hello world"
console.log(s1.concat(s2, ' hi', ' guangdong')); // "hello world hi guangdong"

⑤ 获取某个字符索引（indexOf），确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1表示不匹配。

        var s = new String('hello world'); 
        console.log(s.indexOf("world"));  //6
        console.log(s.indexOf("hi"));     //-1

⑥ 按照指定规则分割字符串

 var s = new String('hello world hi guangdong'); 
        console.log(s.split(' ')); // 按照空格分割 ['hello', 'world', 'hi', 'guangdong']

3、Math

①abs方法返回参数值的绝对值

console.log(Math.abs(-1));    //输出1
console.log(Math.abs(1));  //输出1

② max和min方法返回参数值的最大值和最小值

console.log(Math.max(-1,2,0));  //输出2
console.log(Math.min(-1,2,-5));    //输出-5

③ floor和ceil对应参数向下取整和向上取整

console.log(Math.floor(3.3)); //输出3
console.log(Math.floor(-3.3));  //输出-4
console.log(Math.ceil(3.3));  //输出4
console.log(Math.ceil(-3.3));  //输出-3

④random返回（0,1）之间的一个随机数

var randomNumber = Math.random(); // 返回一个介于0和1之间的随机小数
         console.log(randomNumber); // 输出类似于0.3456789

⑤ 随机输出任意范围的随机数（直接当固定函数使用）

 function getRandomInRange(min ,max)
        {
            return Math.random()*(max-min);

        }
        console.log(getRandomInRange(1,20));
//类似3.5605632861000096

 ⑥保留小数点指定位数（直接当固定函数使用）

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

①基于Date类，创建一个对象示例，表示当前日期和时间

const now = new Date();

②获取年份（四位数的年份，比如2024）

const year = now.getFullYear();

③获取月份（从0开始，所以0表示1月，11表示12月，需要加1才能得到实际月份）

const month = now.getMonth() + 1;

④ 获取日期（月份中的哪一天）

 const day = now.getDate();

⑤ 获取小时（24小时制）

const hours = now.getHours();

⑥获取分钟  

const minutes = now.getMinutes();

⑦获取秒

const seconds = now.getSeconds();

⑧输出当前未格式化的日期和时间

console.log(`当前日期和时间: ${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);

以上代码运行结果如下：

格式化日期和时间字符串 ，如果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}`);
    </script>

运行结果如下:

 


 完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的内置Date类</title>
</head>
<body>
    <script>
        // 基于Date类，创建一个对象示例，表示当前日期和时间  
        const now = new Date();       
        // 获取年份（四位数的年份，比如2024）  
        const year = now.getFullYear();    
        // 获取月份（从0开始，所以0表示1月，11表示12月，需要加1才能得到实际月份）  
        const month = now.getMonth() + 1;      
        // 获取日期（月份中的哪一天）  
        const day = now.getDate();  
        // 获取小时（24小时制）  
        const hours = now.getHours();     
        // 获取分钟  
        const minutes = now.getMinutes();     
        // 获取秒  
        const seconds = now.getSeconds();  
        // 输出当前未格式化的日期和时间 
        console.log(`当前日期和时间: ${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);

        // 格式化日期和时间字符串  。
        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}`);
    </script>


</body>
</html>


http://www.kler.cn/a/370999.html

相关文章：

  • 服务攻防之开发组件安全
  • 18 Docker容器集群网络架构：一、etcd 概述
  • mit6824-04-主备份复制(VM-FT论文)
  • 小小猫棒onu替换家用光猫，薅运营商带宽羊毛，突破1000M
  • golang 后端验证码 模拟接口 post get ，postman测试
  • 洛谷 P4251 [SCOI2015] 小凸玩矩阵
  • python实战项目49：足彩开奖竞猜数据抓取
  • uni-app如何接收uni.$emit()里面传递的内容
  • 【AI试衣整合包及教程】CatVTON带你进入AI换装新时代
  • SpringBoot实现 License 认证（只校验有效期）
  • 三维测量与建模笔记 - 2.1 坐标转换基础
  • 一款强大的开源OCR工具，支持90+语言识别
  • vmware运维技巧总结
  • 倪师学习笔记-天纪-易经八卦
  • Axure设计之多级菜单导航教程（中继器）
  • 好用的idea插件之自动sql生成
  • 详细指南：解决Garmin 手表无法与电脑连接的问题
  • 15分钟学 Go 第 25 天：使用WaitGroup
  • 【计网】UDP Echo Server与Client实战：从零开始构建简单通信回显程序
  • 探索Konko AI：快速集成大语言模型的最佳实践