JavaScript编程用法——JavaScript函数

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

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

函数定义

源码

function js_func(value){ 

		console.log("func value = " + value);

		return "func test";
} 

function js_function_test(){ 

	var num =  6.626E-34;
	console.log("func return is " + js_func(num));

	var istruefunc = function(num) {
		if(num)
			return true;
		else
			return false;
	};
	
	console.log("func is " + istruefunc);	
}

执行结果

函数传参与返回值

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'));
}

执行结果

获取函数参数：arguments

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

源码

function js_func_argv(value){ 
	for (var i = 0; i < arguments.length; ++i) {
        console.log("func value is " +  arguments[i]); 
    }
}

function js_function_value_test(){ 
	js_func_argv();
	js_func_argv("string",3.14,'A');
}

执行结果

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

源码

function js_func_argv_empty(){ 

	for (var i = 0; i < arguments.length; ++i) {
        console.log("func value is " +  arguments[i]); 
    }
}

function js_function_value_test(){ 
	js_func_argv_empty(49,3.14,"Test");
}

执行结果

获取函数定义外参数：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');

执行结果

函数嵌套

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

源码

function js_function_nested(){

	var simunber = 2;
	var testarray = ['A',"A value"];
	var stTest = {
		siindex: 1,
		strname: "ZX Test",
		strclass: "One",
	};	
	var showfunc = function(){
		console.log(simunber);
		console.log(testarray);
		console.log(stTest);
	};

    var testfunc = function() {
		showfunc();
	}

	testfunc();
}

执行结果

嵌套声明

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();

}

执行结果

函数的数据并未初始化。

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);
	}	

执行结果

嵌套函数

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

源码

	function show(addr,name, func) {
		return "Show: " + func(addr) + func(name);
	}

	function showstring(value) {
		return " value = " + value;
	}

	console.log(show("city","zxtest",showstring));	

执行结果

this变量

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

源码

	var zxTest = {
		index: 5,
		strname: "zxTest",

		showinfo:function(){
			console.log(" func index = " + this.index);
			console.log(" func name = " + this.strname);	
		},
		value: function () {
			this.showinfo();
			return 10 + this.index;
		}
	};

	console.log(" func value = " + zxTest.value());	

执行结果

数组方法

map方法

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

	var arrayvalue = [1,9,25,49];

	console.log(arrayvalue.map(Math.sqrt));

执行结果

reduce方法

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

源码

	var arrayvaluenum = [1, 3, 5, 7, 9];

	function sum(x,y) {
		return x + y;
	}

	console.log(arrayvaluenum.reduce(sum));

执行结果

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);

执行结果

字母或字符串以首字母的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);

执行结果

箭头函数

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

源码

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());

执行结果

关键字：call和apply

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

源码

	var FuncTest = {
		name : "ZX Test",
		num  : 13,
		show : function (title,content){
			console.log("This name is " + this.name);   
			console.log("This num is " + this.num); 
			console.log("title is " + title); 
			console.log("content is " + content);  
		}
	}	

	var Testcall = {
		name : "Test Call"
	}

	var Testapply = {
		name : "Test apply",
		num  : 6,
	}	
	FuncTest.show("Test default","FuncValue");
	FuncTest.show.call(Testcall,"Test Value","Func call");
	FuncTest.show.apply(Testapply,["Test Value","Func apply"]);

执行结果