JavaScript编程用法——JavaScript函数

末蓝、 2022-04-06 07:19 371阅读 0赞

### 文章目录 ###

*  函数定义
 *  函数传参与返回值
 *   *  获取函数参数：arguments
     *  获取函数定义外参数：rest
 *  函数嵌套
 *   *  嵌套声明
     *  嵌套函数
 *  this变量
 *  数组方法
 *   *  map方法
     *  reduce方法
     *  sort方法
     *   *  使用自定义比较器比较
 *  箭头函数
 *  关键字：call和apply

在JavaScript中，函数本身也可以是一个变量，可以被赋值使用，函数定义的关键字，function，函数有显示函数和匿名函数。

调用匿名函数不加括号就是直接赋值整个函数内容而不是返回值

# 函数定义 #

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70]

# 函数传参与返回值 #

JavaScript不会严格规定函数的传参，var包括的类型都能传，在函数内部判断参数有效性，JavaScript也不严格规定传参个数，可以传多也可以传少，甚至可以不传。传参按照顺序读取。

不传参，函数的参数为undefined，若传多余的参数且函数内没有对应取值，将会被过滤掉

源码

function js_func(value){ 
    
    	console.log("func value = " + value);
    
    	return "func test";
    }
    
    function js_function_value_test(){ 
    
    	console.log("func return is " + js_func());
    
    	console.log("func return is " + js_func("string",3.14,'A'));
    }

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 1]

## 获取函数参数：arguments ##

该关键字在于获取函数传参变量。

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 2]

函数甚至在未定义传参的时候也可以获取值

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 3]

## 获取函数定义外参数：rest ##

该关键字是获取函数定义外的参数，不包含已知函数，函数写法需要修改

源码

function js_func_argv_rest(isnum,strname,...rest){ 
    
    	console.log("func value is " +  isnum); 
    	console.log("func value is " +  strname); 
    
    	for (var i = 0; i < rest.length; ++i) {
            console.log("func rest value is " +  rest[i]); 
        }
    }
    
    js_func_argv_rest(6,"StringTest","Test",3.14,'D');

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 4]

# 函数嵌套 #

在JavaScript中，由于函数也是一个变量，因此可以和C/C++一样进行嵌套逻辑处理

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 5]

## 嵌套声明 ##

JavaScript的函数嵌套声明不能像C++那样放置在函数任意位置，在JavaScript运行过程中，会将函数的声明置顶。

代码

function js_function_nested(){
    
    	var simunber = 2;
    
    	var testfuncnested = function() {
    		console.log("num = " + simunber);
    		var simunber = simunber + 4;
    		console.log("func num = " + simunber);
    	}	
    
    	testfuncnested();
    
    }

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 6]

函数的数据并未初始化。

JavaScript运行时会将变量的声明置顶变成如下函数

var testfuncnested = function() {
    		var simunber = simunber + 4;
    
    		console.log("num = " + simunber);
    		console.log("func num = " + simunber);
    	}

由于作用域原理，函数会优先使用函数内部的变量作用域。simunber在函数testfuncnested被从新定义，没有被初始化，因此值为undefined，加法运算错误，输出结果为NaN。

正确的做法是声明一个名字不同的变量。

var testfuncnested = function() {
    		console.log("num = " + simunber);
    		var funcnum = simunber + 4;
    		console.log("func num = " + funcnum);
    	}

执行结果  
![在这里插入图片描述][20181208202710942.png]

## 嵌套函数 ##

在JavaScript函数中，函数本身就是一个变量，把函数当变量传进函数，在函数里面应用该函数。

源码

function show(addr,name, func) {
    		return "Show: " + func(addr) + func(name);
    	}
    
    	function showstring(value) {
    		return " value = " + value;
    	}
    
    	console.log(show("city","zxtest",showstring));

执行结果  
![在这里插入图片描述][20181208202918482.png]

# this变量 #

定义和C++一样，this指向当前对象，但JavaScript没有指针定义，因此this是一个特殊的关键字变量。

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 7]

# 数组方法 #

## map方法 ##

与容器的Map不同，该方法为全小写。存在于在数组array中的方法。为函数传入一组参数，并且返回一组结果，参数与结果一一对应。

var arrayvalue = [1,9,25,49];
    
    	console.log(arrayvalue.map(Math.sqrt));

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 8]

## reduce方法 ##

对数组的参数依次进行函数传参运算，一般用于累加或累乘。

源码

var arrayvaluenum = [1, 3, 5, 7, 9];
    
    	function sum(x,y) {
    		return x + y;
    	}
    
    	console.log(arrayvaluenum.reduce(sum));

执行结果  
![在这里插入图片描述][2018120820334091.png]

## sort方法 ##

和C++一样，为排序算法，默认是以ASCII码进行排序

源码

var arrayunit = ['D',"window",36,8,'b',"Obj"];
    	var arraynum = [6,15,2,10,7,9,36];
    
    	var retunit = arrayunit.sort();
    	var retnum = arraynum.sort();
    
    	console.log(retunit);
    	console.log(retnum);

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 9]

字母或字符串以首字母的ASCII码进行排序。但数字排序比较特殊，JavaScript先将数字转换成string类型，再进行首字母ASCII码比较。

### 使用自定义比较器比较 ###

要对数字进行比较，需要通过传入比较器进行修改比较规则。

源码

var arraynum = [6,15,2,10,7,9,36];
    
    	function cmp(x,y){
    		return x > y;
    	}
    
    	var retnum = arraynum.sort(cmp);
    
    	console.log(retnum);

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 10]

# 箭头函数 #

箭头函数实际就是简化的函数，通过箭头来表示函数。

源码

var cmp = (x,y) => x > y;	
    
    	var abs = x => {
    		if(x > 0)
    			return x;
    		else
    			return -x;
    	}
    
    	var pi = () => 3.14;
    
    	console.log(cmp(3,7));
    	console.log(abs(-13));
    	console.log(pi());

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 11]

# 关键字：call和apply #

每个函数都有两个方法：call和apply，用于改变函数内this的指向，改变this指针的作用域。

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70]: /images/20220406/bd54ff80dae94a7e9abb98fe6f582259.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 1]: /images/20220406/bcd9308554994fadb76990e26b6eb4cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 2]: /images/20220406/07c60ea1b31d4691b23e00ce750de7e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 3]: /images/20220406/14f7ccba74c944efade4d7a02d0d0da1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 4]: /images/20220406/df3ae332252b4c49aed831b82b99ffd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 5]: /images/20220406/0c5b26423d6e4a1e8070ac5647ad95de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 6]: /images/20220406/2cb04487fdae4204b32bc3edbc3757ee.png
[20181208202710942.png]: /images/20220406/c981ec9892d84808ba9015c6a1b1ec50.png
[20181208202918482.png]: /images/20220406/96da312ca0fb4d949a9488c45e277287.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 7]: /images/20220406/da39c9dce1b647558d71829644b63437.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 8]: /images/20220406/33766a2698f44cde8b7275498de20b3c.png
[2018120820334091.png]: /images/20220406/6cc0007da00b43d7a839df009c1a8d34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 9]: /images/20220406/68f07332e7aa49e38e4bad5a3aeaa1ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 10]: /images/20220406/6ca667e0ae444bea91278384178590c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 11]: /images/20220406/953d379cff344f8b9536e549ef18e122.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 12]: /images/20220406/2c70d515a4ca430b9fcdd231258518d8.png