JavaScript语法基础(函数,对象,常用类Array,String,Math和Date)【超详细!!!新手入!!!】

news2024/12/23 9:42:36

一、函数

1、函数的定义

        函数指的是一段可被重复调用的代码块。函数与变量不同,需要先定义再调用。

定义函数的语法格式为:

function 函数名(参数1,参数2,...)

{

        语句;                        //  return指的是返回值

        ...

        return 表达式;        //   {}中的语句是函数的执行语句,在函数被调用时会被执行;

}

2、函数的调用

1)在JS程序中被调用
<script>
        var result=calculator(10,2);
        function calculator(a, b)
        {
            c = a+b;
            return c;        
        }
        // 1. 在JS程序中被调用 (包括有返回值和无返回值的调用)
        document.write(result);
    </script>

效果显示:

2)在超链接标记中调用函数
<script>
        // var result=calculator(10,2);
        function calculator(a, b)
        {
            c = a+b;
            alert("a+b=" + c);     // alert();显示浏览器跳出一个警告牌
            return c;        
        }
    </script>
<!-- 超链接点击中调用函数 -->
     <!-- 使用<a>标记的onclick属性 -->
    <a href="#" onclick="calculator(3,4)">百度一下,你就知道</a>

效果显示:

 3)在加载网页中调用函数
<script>

        function calculator(a, b)
        {
            c = a+b;
            alert("a+b=" + c); 
            return c;        
        }

    </script>

    <!-- 按钮点击 -->
    <input type="submit" value="计算a+b的和" onclick="calculator(1,2)" />

效果显示:

二、对象

1、对象的概念

        对象是JavaScript的一个基本数据类型,是一种复合值,它将很多值(原始值或者其他
对象)聚合在一起,可以通过对象的名字访问这些值。例如:

                var car = {type:"Fiat", model:500, color:"gray"};

        对象包含多种类型,可以将对象看作是变量的容器。

JavaScript对象是一种数据结构,用于存储和组织键值对。对象可以包含多个键值对,其中每个键都是唯一的,并且与一个值相关联。 

2、对象的定义

        在JavaScript中,对象可以通过大括号 {} 来定义一个对象,里面包含键值对,格式通常是 key: value。

<script>
// 1.直接手动定义一个对象(而不是通过类实例化)
        var person = {
            firstName:"毛",
            lastName:"主席",
            age:83,
            eyeColor:"黑色",
            }
        };
        // 2.使用定义好的对象的属性
        console.log(person.eyeColor)  //使用对象的属性
</script>

控制台显示:

3、对象的使用

        要使用一个对象,可以引用JavaScript的内置对象。

 <script>

        // 1.直接手动定义一个对象(而不是通过类实例化)
        var person = {
            firstName:"毛",
            lastName:"主席",
            age:83,
            eyeColor:"黑色",
            getName: function(){
                // 注意this对象的使用(this用于将对象指向自身)
                // 没有this,直接用属性名控制台会报错
                allName = this.firstName + this.lastName;
                return allName;
            },
            cal: function(a,b){
                return a+b;
            }
        };
        // 2.使用定义好的对象的方法
        console.log(person.getName()) //使用对象的方法
        console.log(person.cal(1,2))  //使用对象的方法
 
    </script>

三、类

        在JavaScript中,有一些常用的内置类。

常用类用处
Array用于创建和操作数组
String用于处理字符串
Math用于数学计算
Date用于处理日期和时间,可以创建日期对象,并提供格式化和日期计算的功能

1、Array

  • length属性返回数组的元素个数(数组长度)
<script>
var persons=new Array("毛泽东","邓小平","江泽民");
        console.log(persons.length);    // 3
</script>
  • push方法用于在数组末端添加一个或多个元素,并返回
<script> 
//   添加新元素后的数组长度。注意:该方法会改变原数组!
        var persons=new Array("毛泽东","邓小平","江泽民");
        len = persons.push("胡锦涛");
        console.log('新数组为:' + persons +'->长度为:' + len);  
    // 新数组为:毛泽东,邓小平,江泽民,胡锦涛->长度为:4
</script>
  • pop方法用于删除数组最后一个元素,并返回被删除的那个元素

<script>
//   注意:该方法会改变原数组!
        var persons=new Array("毛泽东","邓小平","江泽民");
        p = persons.pop("江泽民");
        console.log('新数组为:' + persons +'->被移除的元素为: ' + p); 
        // 新数组为:毛泽东,邓小平->被移除的元素为:江泽民
</script>
  •  reverse方法用于颠倒排列数组元素,返回改变后的数组

<script>
//   注意:该方法会改变原数组!
        var persons=new Array("毛泽东","邓小平","江泽民");
        p = persons.reverse();
        console.log(p); 
</script>

控制台显示:

  • indexOf方法返回给定元素在数组中第一次出现的位置,若未出现返回-1

 <script>
var persons = new Array("毛泽东","邓小平","江泽民");
        console.log(persons.indexOf("邓小平"));  //1
        console.log(persons.indexOf("胡锦涛"));  //-1          
    </script>

2、String

  • length属性返回字符串的长度
<script>
    var s = 'hello';
        console.log(s.length) // 5
</script>
  •  charAt方法返回指定位置的字符

<script>
var s = new String('hello'); 
        console.log(s.charAt(1));            // "e"
        console.log(s.charAt(s.length - 1)); // "o"
        console.log(s.charAt(10));           // ""  索引超出返回空字符串

</script>
  •  concat方法用于顺序连接多个字符串,返回一个新字符串(不改变原字符串)

<script>
var s1 = new String('hello'); 
        var s2 = new String(' world'); 
        console.log(s1.concat(s2));          // "hello world"
        console.log(s1.concat(s2, ' hi', ' beijing')); // "hello world hi beijing"
</script>
  •  indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置

<script>
// 返回结果是匹配开始的位置。如果返回-1表示不匹配。
        var s = new String('hello world'); 
        console.log(s.indexOf("world"));  //6
        console.log(s.indexOf("hi"));     //-1
</script>
  •  split方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组

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

3、Math

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

     <script>
        console.log(Math.abs(1)) // 1
        console.log(Math.abs(-1)) // 1
</script>
  •  max和min方法返回参数值的最大值和最小值

<script>
        console.log(Math.max(1,2,3)) // 3
        console.log(Math.min(1,2,3)) // 1
</script>
  •  floor和ceil对参数向下取整和向上取整

     <script>
        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
</script>
  •  random返回[0,1)之间的一个伪随机数

<script>
for (var index = 1; index <=5; index++)
        {
            console.log(Math.random())
        }
        // 随机输出任意范围的某个数(直接当成固定函数使用)
        function getRandomInRange(min, max) 
        {  
            return Math.random() * (max - min) + min;  
        }  
        console.log(getRandomInRange(1, 20)); //随机输出1到20的某个数
</script>
  • 保留小数点指定位数(直接当成固定函数使用)

<script>
     function truncateDecimalPlaces(num, decimalPlaces) 
        {  
            let factor = Math.pow(10, decimalPlaces);  
            return Math.floor(num * factor) / factor;  
        }  
        console.log(truncateDecimalPlaces(3.14159, 2)); // 输出 3.14

</script>

4、Date

  • 获取当前时间

 <script>
// const 只读不写
        // 基于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}`);
 </script>

控制台显示:

 

  • 输出当前格式化后的时间
 <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();  
   
        // 格式化日期和时间字符串  
        // 如果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>

控制台显示:

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

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

相关文章

OpenGL入门004——使用EBO绘制矩形

本节将利用EBO来绘制矩形 文章目录 一些概念EBO 实战简介utilswindowFactory.hRectangleModel.hRectangleModel.cpp main.cppCMakeLists.txt最终效果 一些概念 EBO 概述&#xff1a; Element Buffer Object 用于存储顶点的索引数据&#xff0c;以便在绘制图形时可以重用顶点数…

linux之网络子系统-用户层接收数据包之同步阻塞方案

一、前言 之前讲述了网络包是如何从网卡送到协议栈的&#xff0c;接下来内核还有一项重要的工作&#xff0c;就是在协议栈接收处理完输入包后要通知到用户进程&#xff0c;如何用户进程接收到并处理这些数据。 进程与内核配合有多种方案&#xff0c;这里我们这分析两种典型的…

高效消防应急:RFID技术救援装备的快速管理

基层应急救援消防设施管理面临着一个既复杂又迫切的挑战。通常&#xff0c;受限的资源和专业人才的短缺导致应对突发事件的反应迟缓&#xff0c;处理结果不理想。同时&#xff0c;消防团队的人员结构和技术能力也在一定程度上决定了应急救援的成效和效率。在数字化浪潮下&#…

TMDOG的Gin学习笔记_01——初识Gin框架

TMDOG的Gin学习笔记_01——初识Gin框架 博客地址&#xff1a;[TMDOG的博客](https://blog.tmdog114514.icu) 作者自述&#xff1a; 停更太久了&#xff0c;是因为开学了课太多了&#xff0c;并且我一直在准备上篇文章的内容正在coding&#xff0c;就先搁置了更新博客QAQ&…

【ROS的TF系统】

系列文章目录 TF系统简介 前面的章节实现了SLAM节点的建图功能&#xff1a; 激光雷达节点—> /scan话题 —>hector_mapping节点—> 地图数据话题/map 本期来实现SLAM节点的定位功能&#xff1a; TF&#xff08;TransForm&#xff09;主要描述的是两个坐标系的空间关…

Pandas JSON学习

1.JSON简介 JSON&#xff08;JavaScript Object Notation&#xff0c;JavaScript 对象表示法&#xff09;&#xff0c;是存储和交换文本信息的语法&#xff0c;类似 XML。JSON 比 XML 更小、更快&#xff0c;更易解析&#xff0c;Pandas 可以很方便的处理 JSON 数据。 [{"…

SQL Server身份验证模式

SQL Server是一个广泛使用的关系数据库管理系统&#xff0c;通常使用两种身份验证模式&#xff1a;Windows身份验证和SQL Server身份验证。理解这些身份验证方式的概念与更改方式的操作&#xff0c;对于数据库管理员和开发者至关重要。本文将详细介绍身份验证方式的概念以及如何…

DC-9靶机通关

这是这个系列的最后一个靶机了&#xff01;&#xff01;&#xff01;经过前面的锻炼和学习&#xff0c;这次我的目标是尽量不借助任何教程或者提示来拿下这个靶机&#xff01;&#xff01;&#xff01;下面我们看能不能成功&#xff01;&#xff01;&#xff01; 1.实验环境 攻…

百度SEO分析实用指南 提升网站搜索排名的有效策略

内容概要 在数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为提升网站曝光度的关键工具。本指南将带您了解SEO的基本知识&#xff0c;帮助您在复杂的网络环境中立足。我们将从关键词优化开始&#xff0c;重点讲解如何选择合适的关键词来提高搜索引擎排…

ML2001-1 机器学习/深度学习 Introduction of Machine / Deep Learning

图片说明来自李宏毅老师视频的学习笔记&#xff0c;如有侵权&#xff0c;请通知下架 影片参考 【李宏毅】3.第一节 - (上) - 机器学习基本概念简介_哔哩哔哩_bilibili 1. 机器学习的概念与任务类型 概念&#xff1a;机器学习近似于寻找函数&#xff0c;用于处理不同类型的任…

用Python打造媒体管理播放器:从零到全功能GUI应用

背景 在日常生活中&#xff0c;我们经常需要管理和播放大量媒体文件。市面上的音频播放器可能功能单一&#xff0c;或者界面复杂。作为一名程序员&#xff0c;我决定使用Python自己打造一个简单yet强大的媒体管理播放器。 C:\pythoncode\new\playsong.py 全部代码 import os…

Cisco Packet Tracer 8.0 路由器静态路由配置

文章目录 静态路由简介一、定义与特点二、配置与命令三、优点与缺点四、应用场景 一&#xff0c;搭建拓扑图二&#xff0c;配置pc IP地址三&#xff0c;pc0 ping pc1 timeout四&#xff0c;配置路由器Router0五&#xff0c;配置路由器Router1六&#xff0c;测试 静态路由简介 …

【HarmonyOS】鸿蒙系统

文章目录 前言一、鸿蒙OS概述1. 定义与特性2. 核心技术理念3. 技术架构设计1. 应用层2. 框架层3. 系统服务层4. 内核层 二、分布式架构分布式架构的核心理念分布式能力的实现关键技术 三、 总结 前言 鸿蒙OS是由华为推出的一款开源操作系统&#xff0c;旨在满足智能终端设备的…

《双指针篇》---移动零

题目传送门 这道题可以归类为 数组划分/数组分块 。 题目制定了一个规则&#xff0c;我们可以在这个规则下&#xff0c;将数组划分为若干个区间。 这道题让我们把所有非零元素移动到左边。所有零元素移动到右边。 将数组划分为&#xff1a; 左区间非0&#xff1b; 右区间&…

网络编程项目之UDP聊天室

项目要求 利用UDP协议&#xff0c;实现一套聊天室软件。服务器端记录客户端的地址&#xff0c;客户端发送消息后&#xff0c;服务器群发给各个客户端软件。 问题思考 客户端会不会知道其它客户端地址&#xff1f; UDP客户端不会直接互连&#xff0c;所以不会获知其它客户端地址…

【NOIP普及组】 FBI树

【NOIP普及组】 FBI树 C语言版本C 版本Java版本Python版本 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 我们可以把由“0”和“1”组成的字符串分为三类&#xff1a;全“0”串称为B串&#xff0c;全“1”串称为I串&#xff0c;既含“0”又…

Lucene的概述与应用场景(1)

文章目录 第1章 Lucene概述1.1 搜索的实现方案1.1.1 传统实现方案1.1.2 Lucene实现方案 1.2 数据查询方法1.1.1 顺序扫描法1.1.2 倒排索引法 1.3 Lucene相关概念1.3.1 文档对象1.3.2 域对象1&#xff09;分词2&#xff09;索引3&#xff09;存储 1.3.3 常用的Field种类 1.4 分词…

不适合的学习方法

文章目录 不适合的学习方法1. 纯粹死记硬背2. 过度依赖单一资料3. 线性学习4. 被动学习5. 一次性学习6. 忽视实践7. 缺乏目标导向8. 过度依赖技术9. 忽视个人学习风格10. 过于频繁的切换 结论 以下是关于不适合的学习方法的更详细描述&#xff0c;包括额外的内容和相关公式&…

华为OD机试真题(Python/JS/C/C++)- 考点 - 细节

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题 点这里。 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。

Linux中使用NGINX

NGINX简介 Nginx&#xff08;engine x&#xff09;是俄罗斯人编写的十分轻量级的HTTP服务器是一个高性能的HTTP和反向代理服务器&#xff0c;同时也是一个IMAP/POP3/SMTP代理服务器官方网站&#xff1a;http://nginx.org/ NGINX概述 Nginx默认配置文件&#xff1a;/etc/ngin…