javaScript语法基础（函数，对象，常用类Array，String，Math和Date）

最新推荐文章于 2025-04-03 15:51:02 发布
最新推荐文章于 2025-04-03 15:51:02 发布
阅读量604 收藏 7
点赞数 7
文章标签： javascript 前端 开发语言 css 1024程序员节 ecmascript 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CH040708/article/details/143809228
版权
  • # 本文详细结束了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= 1
 ch = str.charAt(1)
 console.log (`索引${i}对应字符为：${ch}`);
 var a =  "aaa"
 var b = "bbb"
 var c = "ccc"
4.concat 用于顺序连接多个字符串，返回一个新字符串
 var d = a+b+c
 var 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)) //1
        console.log(Math.abs(-1))//1

    </script>
</body>
</html>
代码运行后如下：

 

2.max和min方法返回参数值的最大值和最小值 
        //2.max和min方法返回参数值的最大值和最小值
        console.log(Math.max(1,2,3))//3
        console.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();

CH040708
关注
JavaScript语法基础（函数，对象，常用类Array，String，Math和Date）
2301_82005922的博客
11-04 1128
本章讲述了JavaScript语法基础中的函数，对象，常用类Array，String，Math和Date的含义和使用
JavaScript语法基础——函数，对象，常用类Array，String，Math和Date
sususugaa的博客
11-10 960
...
JavaScript语法基础(函数，对象，常用类Array，String，Math和Date)
2303_80038066的博客
01-06 741
在 JavaScript 中，对象是一种复合数据类型，用于存储键值对。对象可以用于表示实际世界中的事物，具有属性和方法。1.1、直接手动定义一个对象（而不是通过类实例化）firstName:"毛",lastName:"主席",age:83,eyeColor:"黑色",// 注意this对象的使用（指向自身）// 没有this，直接用属性名控制台会报错},return a+b;1.2、使用定义好的对象的属性和方法console.log(person.eyeColor) //使用对象的属性。
最全的JavaScript语法基础——函数，对象，常用类Array，String，Math和Date
2302_81399643的博客
11-01 760
最全的JavaScript语法基础——函数，对象，常用类Array，String，Math和Date
JavaScript语法基础（函数，对象，常用类Array，String，Math和Date）【超详细！！！新手入！！！】
2302_80916083的博客
11-01 703
// 1.直接手动定义一个对象（而不是通过类实例化）firstName:"毛",lastName:"主席",age:83,eyeColor:"黑色",// 2.使用定义好的对象的属性console.log(person.eyeColor) //使用对象的属性
JavaScript语法基础：深入探索函数、对象与常用类
qy_hell的博客
11-03 784
JavaScript中的函数、对象以及这些常用类是构建各种应用程序的基础。熟练掌握它们的特性和用法，能够让我们在JavaScript的开发中更加得心应手，轻松实现各种复杂的功能需求。
JavaScript 语法基础（函数，对象，常用类Array，String，Math和Date）
2401_87257836的博客
12-14 478
函数，对象，常用类Array，String，Math和Date。
JavaScript语法基础（函数、对象、常用类）
DZ_OP的博客
10-31 906
JavaScript的语法基础
JavaScript内置对象（Math、Data、Array、String)
2402_85908998的博客
10-25 825
unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。pop()方法将删除arrayObject的最后一个元素，把数组长度减1，并且返回它删除的元素的值。
JavaScript内置对象详解：String, Array, Date, Math
书中还涵盖了JavaScript的基础语法和核心技术，包括流程控制、函数、字符串、数组、DOM操作、事件处理、window对象和document对象等内容。作者莫振杰结合自身开发经验，以轻松幽默的语言风格讲解枯燥的技术知识，...
JavaScript完整学习包：基础语法与函数深入解析
资源中包含对BOM（浏览器对象模型）基础的理解，文档对象模型DOM（Document Object Model）事件的总结与具体应用，以及JavaScript中Date对象和Math对象的使用方法。此外，还涉及了JavaScript中的循环（while、for）...
JavaScript内置对象详解：String, Array, Math等关键应用
7. **自定义构造函数**：用于创建和初始化对象的模板，实现类的功能。 8. **自定义对象**：通过函数表达式或构造函数创建的对象实例。 9. **expando属性**：一种动态添加到对象上的属性，不受原型链限制。 10. **...
深入解析JavaScript核心对象：Date, Math, Number, String, Array, Boolean等
本文档深入介绍了JavaScript中几种关键的对象类型，包括Date对象、Math对象、Number对象、String对象、Array对象、Boolean对象、Object对象、以及正则表达式对象（RegExp），同时涵盖了全局函数和事件句柄。...
React PDF Annotation plugin library online API examples
WCX_joker的博客
04-03 579
The API includes ① Export edited PDF data; ② Export annotations json data; ③ Reload old annotations; ④ Change files; ⑤ Set member info; ⑥ Clear annotations and other data processing functions
elementui的默认样式修改
cxsj999的博客
03-31 257
可是我想让提示的位置到下面来，该怎么办？最后还是看了官方的api。原来有个自定义样式属性。
20250331-vue-组件事件1触发与监听事件
xiezhuangshunv的博客
03-31 385
和原生DOM事件不一样，组件触发的时间没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。像组件与 prop 一样，事件的名字也提供了自动的格式转换。像3中的代码也可以这样写。父组件代码不变，子组件代码如下。这样点击效果就只会出现一次。
《无人茶室系统核心技术解析：从0到1打造高效智能管理平台》
weixin_62330360的博客
04-01 611
本文深入解析了无人茶室系统的核心技术，涵盖Spring Boot 后台、uni-app 用户端、Vue 管理后台的完整开发流程，并探讨了性能优化方案。你是否在开发类似项目时遇到挑战？欢迎在评论区交流你的经验！📌推荐阅读Spring Boot 官方文档MyBatis-Plus 官方文档uni-app 官方文档。
网络空间安全（50）JavaScript基础语法
最新发布
m0_73399576的博客
04-03 305
网络空间安全——JavaScript基础语法篇
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值