JavaScript初学学习笔记3：JavaScript函数知识点（1）

古城微笑少年丶 2023-02-28 11:22 1阅读 0赞

## 基本语法 ##

函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。JavaScript 中的函数使用 function 关键字来声明，后跟一组参数以及函数体。函数的基本语法如下所示：

function functionName(arg0, arg1,...,argN) {
        
    	statements
    }

以下是一个函数示例：

function sayHi(name, message) {
         
    	alert("Hello " + name + "," + message); 
    }

## 知识点： ##

### 函数的定义： ###

1.使用function语句定义函数

function name() {
        
    	console.log('Hello World');
    }

2.函数表达式

//命名函数表达式
    var test = function abc() {
        
    	console.log('Hello World2');	
    }
    
    //或者如下
    //匿名函数表达式   简称函数表达式
    var demo = function () {
        
    	console.log('Hello World3');	
    }

**区别**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]

控制台运行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 2]

## JavaScript中函数的形参实参 ##

JavaScript 函数的参数与大多数其他语言中函数的参数有所不同。JavaScript 函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。也就是说，**即便你定义的函数只接收两个参数，在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数**，而解析器永远不会有什么怨言。之所以会这样，原因是 JavaScript 中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没有问题。实际上，在函数体内可以通过 **arguments** 对象来访问这个参数数组，从而获取传递给函数的每一个参数。

也就是说，如下代码均是可以实现的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 3]  
输出为  
![在这里插入图片描述][20200721114934111.png]  
那么多余的实参去哪了？JavaScript 提供了一个隐式的东西，叫做arguments，它是一个类似于数组的对象，数组里面放了实参列表，  
如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][20200721122012715.png]  
再来举个实用例子，加深对arguments的印象  
实参个数用  
arguments.length来表示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][20200721122632231.png]  
函数形参个数用  
函数名.length来表示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 6]

![在这里插入图片描述][20200721123511621.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 7]  
这三种方法均能改变b的值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]: /images/20230209/02984c85423d4a00b22550f71e1e8b16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/e7ddce3c7fd14b4b8a0f19fa7f7e5ea4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/f62b050dbe57467abc2d602af4ca7caa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 3]: /images/20230209/fb6bb8d9a9aa4e5cbb3065f18b8c9dab.png
[20200721114934111.png]: /images/20230209/72cb663068c2401e9d6b0474f37f414d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 4]: /images/20230209/dd7acdbf27cc43eaad10a3704ac0ca00.png
[20200721122012715.png]: /images/20230209/0c180518fef346388b4049dc8c5a10c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 5]: /images/20230209/d95616f7077d465aab21def3a1bf253f.png
[20200721122632231.png]: /images/20230209/403dc15c52854fa0a7eeaee8482ca669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 6]: /images/20230209/bff51e48672a453e9951e94769d0857c.png
[20200721123511621.png]: /images/20230209/d97d3d9332704d0dbc571e951e9bdc39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 7]: /images/20230209/5243d0383fd54f3b8e2b59bbf7e7b06a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 8]: /images/20230209/b12044b2046247b4bba5d20693b81a54.png

JavaScript初学学习笔记3：JavaScript函数知识点（1）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读