JavaScript 语法基础(函数,对象,常用类Array,String,Math和Date)

ops/2024/12/16 3:55:04/

目录

1.函数

2.对象

3.常用类 Array

4.常用类 String

5.常用类 Math

6.常用类 Date


 

1.函数

将程序中多次要用到的代码块封装起来,就是函数

函数使代码块的重复使用更方便,且功能独立,便于维护。 

函数的定义

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

{

      函数体;

      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){c = a+b;alert("a+b=" + c); return c;        }// 1. 在JS程序中被调用 (包括有返回值和无返回值的调用)// console.log("a+b=" + c)</script><!-- 2. 在按钮或超链接被点击时调用(监听点击事件) --><!-- 2.1 监听按钮点击 --><input type="submit" value="计算a+b的和" onclick="calculator(1,2)" /><br><!-- 2.2 监听超链接点击 --><a href="#" onclick="calculator(3,4)">百度一下,你就知道</a>
</body>
</html>

2.对象

对象(object)是 JavaScript 中最重要的数据类型,是一组“键值对”的集合体。类似 Python中的字典。

其中,键可以为变量名(此时称为对象的属性)和函数名(此时称为对象的方法)

利用JS内置的类创建对象(实例化)

并使用对象的属性和方法。

ArrayStringMathDate 类 

javascript">class MyClass():  # 这是一个类方法,可以通过类名直接调用,但需要 @classmethod 装饰器  @classmethod  def class_method(cls):  return "This is a class method."  # 这是一个静态方法,可以通过类名直接调用,但需要 @staticmethod 装饰器  @staticmethod  def static_method():  return "This is a static method."  # 这是一个实例方法,需要对象实例才能调用  def instance_method(self):  return "This is an instance method."  # 调用类方法,可以直接通过类名  
print(MyClass.class_method())   # 输出: This is a class method.  # 调用静态方法,可以直接通过类名  
print(MyClass.static_method())  # 输出: This is a static method.# 调用实例方法,需要创建对象  # print(MyClass.instance_method()) 
obj = MyClass()  
print(obj.instance_method())  # 输出: This is an instance method.  

3.常用类 Array

1. length 属性返回数组的元素个数(数组长度)

javascript">        var persons=new Array("1","2","3");console.log(persons.length);    // 3

2. push 方法用于在数组末端添加一个或多个元素,并返回添加新元素后的数组长度。注意:该方法会改变原数组!

javascript">        var persons=new Array("3","2","5");len = persons.push("5");console.log('新数组为:' + persons +'->长度为:' + len);  

3. pop 方法用于删除数组最后一个元素,并返回被删除的那个元素。注意:该方法会改变原数组!

javascript">        var persons=new Array("2","6","6");p = persons.pop(" ");console.log('新数组为:' + persons +'->被移除的元素为: ' + p); 

4. reverse 方法用于颠倒排列数组元素,返回改变后的数组。注意:该方法会改变原数组!

javascript">        var persons=new Array("3","2","5");p = persons.reverse();console.log(p); 

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

javascript">        var persons = new Array("3","2","5");console.log(persons.indexOf("3"));  //0console.log(persons.indexOf("7"));  //-1   

4.常用类 String

1. length 属性返回字符串的长度 

javascript">        var s = 'hello';console.log(s.length) // 5

 2. charAt 方法返回指定位置的字符

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

 3. concat 方法用于顺序连接多个字符串,返回一个新字符串(不改变原字符串)

javascript">        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"

4. indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置,返回结果是匹配开始的位置。如果返回-1表示不匹配。

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

5. split 方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组 

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

5.常用类 Math

Math 是 JavaScript 内置类,通过其内部的类方法,提供了各种数学功能

1. abs 方法返回参数值的绝对值

javascript">        console.log(Math.abs(1)) // 1console.log(Math.abs(-1)) // 1

 2. maxmin 方法返回参数值的最大值和最小值

javascript">        console.log(Math.max(1,2,3)) // 3console.log(Math.min(1,2,3)) // 1

 3. floor 和 ceil 对参数向下取整和向上取整

javascript">        console.log(Math.floor(3.3)) // 3console.log(Math.floor(-3.3)) // -4console.log(Math.ceil(3.3)) // 4console.log(Math.ceil(-3.3)) // -3

 4. random 返回[0,1)之间的一个伪随机数

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

 5. 保留小数点指定位数(直接当成固定函数使用)

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

6.常用类 Date

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

本章内容已结束~~~


http://www.ppmy.cn/ops/142282.html

相关文章

深入剖析 Web HTTP 请求:从浏览器到服务器的完整流程

目录 背景 1. 用户输入 URL —— 浏览器发起请求 步骤&#xff1a;DNS 解析 步骤&#xff1a;建立 TCP 连接&#xff08;TCP 三次握手&#xff09; 2. 构建 HTTP 请求报文 3. 服务器接收请求与中间层路由 步骤&#xff1a;反向代理与负载均衡 步骤&#xff1a;应用层处…

雨晨 23H2 企业版 22631.4655 VCDX 极简

文件: 雨晨 23H2 企业版 22631.4655 VCDX 极简 install.esd 大小: 2040221014 字节 修改时间: 2024年12月14日, 星期六, 16:34:42 MD5: D67BA66BFB6E57A536121F32ADE8807F SHA1: AB95BF6AAAA5E9DD1A121C08EE1ABE600F4A0206 CRC32: 164507EC https://www.123684.com/s/zEbRVv-k…

实时日志与发展:Elasticsearch 推出全新专用的 logsdb 索引模式

作者&#xff1a;来自 Elastic Mark Settle, George Kobar 及 Amena Siddiqi Elastic 最新发布的 logsdb 索引模式是专为日志管理优化的功能&#xff0c;旨在提升日志数据的存储效率、查询性能以及整体可用性。这个模式专注于满足现代日志处理需求&#xff0c;提供更高效的日志…

软考高级架构 —— 第十章 软件架构演化与维护

第十章 软件架构演化与维护 软件架构的演化和维护就是对软件架构进行修改和完善的过程&#xff0c;其目的是让软件架构适应环境变化&#xff0c;满足用户需求。软件架构的演化是贯穿软件架构全生命周期的过程&#xff0c;包括需求获取、建模、文档编制、实现与维护。 10.1 软件…

HTML+CSS+Vue3的静态网页,免费开源,可当作作业使用

拿走请吱一声&#xff0c;点个关注吧&#xff0c;代码如下&#xff0c;网页有移动端适配 HTML <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width…

C# 探险之旅:第十八节 - 元组(Tuple):神奇的背包与丢弃的艺术,还有变身大法!

嘿&#xff0c;探险家们&#xff01;欢迎再次踏上C#的奇妙旅程。今天&#xff0c;我们要聊的是一个非常实用又有点懒散的旅行伴侣——元组&#xff08;Tuple&#xff09;。想象一下&#xff0c;你正准备来一场说走就走的旅行&#xff0c;但是不想带太多行李&#xff0c;只想简单…

Docker 安装 Jenkins:2.346.3

准备&#xff1a;已安装Docker&#xff0c;已配置服务器安全组规则 1581 1、拉取镜像 [rootTseng ~]# docker pull jenkins/jenkins:2.346.3 2.346.3: Pulling from jenkins/jenkins 001c52e26ad5: Pull complete 6b8dd635df38: Pull complete 2ba4c74fd680: Pull complet…

7.Pandas快速入门

一、引入工具模块 import numpy as np #科学计算模块 import pandas as pd #数据处理和数据分析模块 import Matplotlib as #数据可视化模块 二、读取数据 df pd.read_excel(....) df pd.read_csv(....) df pd.read.table(....) ...... 三、查看数…