首页 > 编程语言 >JavaScript基本内容续集之函数和对象

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

时间：2024-10-29 19:45:17浏览次数：7  
标签：续集 const 函数 JavaScript var console Math log

书接上篇，我们讲到了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>

标签：续集,const,函数,JavaScript,var,console,Math,log
From： https://blog.csdn.net/2302_81659011/article/details/143269825

相关文章

  • 函数调用寄存器及栈帧结构
    函数调用X86下，遵循被调用者使用规则，函数在调用子函数之前，保存相关寄存器的内容。函数调用时，参数先入栈，接着为返回地址入栈，BP寄存器入栈、再接着就是子函数的局部变量之类的了。常用寄存器栈帧结构函数调用时栈帧结构......
  • C# 串口通讯工具类，一个函数发送命令等待并接收返回数据（适用和仪器仪表通讯）
     一般的串口通讯类或者nuget包提供的串口通讯功能，发送和接收数据是分开的。当需要与仪器或者仪表交互大量指令和数据时，分开收发十分不方便，也不好维护。 所以将发送和等待接收返回的数据写成一个函数来操作完成就十分的方便，这里提供一个非常好用的C#串口通讯工具类，其内部......
  • 实验3 C语言函数应用编程
    1.实验任务1#include<stdio.h>charscore_to_grade(intscore);intmain(){intscore;chargrade;while(scanf("%d",&score)!=EOF){grade=score_to_grade(score);printf("分数:%d,等级:%c\n\n",score,grad......
  • python3 堆相关函数的使用
    215.数组中的第K个最大元素classSolution:deffindKthLargest(self,nums:List[int],k:int)->int:ans=[]foriinrange(k):heapq.heappush(ans,nums[i])foriinrange(k,len(nums)):ifnums[i]>ans[......
  • 激活函数和GLU
    LLaMA系列用的FFN层现在是SwishGLU，这里Swish是个激活函数，GLU是个线性单元，二者合起来是SwishGLU。FFNTransformer中原始的FFN长这样：\[FFN(x)=ReLU(xW_1+b_1)W_2+b_2\]两个线性层中间夹了个relu激活函数写成模型代码就是：x=up_proj(x)x=relu(x)x=down_proj(x)或者......
  • 重要的原函数和导函数
    导数描述了函数变化的速率，而原函数则是已知导数逆过程的结果。本文将详细讨论一些重要的原函数和导函数，并深入分析它们之间的数学关系。导数与原函数的定义导数是表示函数变化率的一个量，通常通过极限的形式定义。假设函数为\(f(x)\)，则导数\(f'(x)\)可以定义为：\[f'(x)=\lim......
  • 7.1 在区间[0,10]上等间距取1000个点Xi（i为下标，i=1,2,3,...,1000），并计算在这些点Xi处函
    importnumpyasnpimportscipy.interpolateasspiimportscipy.integrateasspi_integratedefg(x):return((3x**2+4x+6)*np.sin(x))/(x**2+8*x+6)x_values=np.linspace(0,10,1000)y_values=g(x_values)spline=spi.CubicSpline(x_values,y_v......
  • 2024前端面试训练计划-高频题-JavaScript基础篇
    具体内容结构（可作为回答思路）为：简略回答，详细回答1、JavaScript有几种数据类型？简略回答JavaScript共有八种数据类型，分别是Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。详细回答具体来说，分为两种类型：原始数据类型和引用数据类型：原始数据类型......
  • ORACLE自定义函数
    CREATE[ORREPLACE]FUNCTION函数名称(arg1[{IN|OUT|INOUT}]TYPE1[DEFAULTVALUE1], [arg2[{IN|OUT|INOUT}]TYPE2[DEFAULTVALUE1]],……[argn[{IN|OUT|INOUT}]TYPE[DEFAULTVALUE]])[AUTHIDDEFINER|CURRENT_USER]RETURNreturn_typeIS|A......
  • zblog获取tag列表函数GetTagList参数和使用方法介绍说明
    函数位置：zblogphp.php文件，大约2641行。函数参数：$select：数组，获取指定数据。$where：数组，数据获取限制规则。$order：数组，数据获取排序规则。$limit：数组，获取数据数量限制。$option：数组，附加限制选项，可用来获取指定范围内的数据。函数输出：输出一个数组。示例：{......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99