JavaScript 函数
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情
什么是函数
函数是执行特定任务的代码块，会在某代码调用它时被执行。 1.使用函数能够对代码进行复用，即只要定义一次代码，就可以多次使用它。 2.我们能够多次向同一函数传递不同的参数，以产生不同的结果。
1.函数的声明
JavaScript 函数通过 function 关键词进行定义，其后是函数名、小括号() 、大括号{} 。 函数名规则与变量名相同； 小括号可包括由逗号分隔的参数：(参数 1, 参数 2, ...)，当然也可没有参数； 由函数执行的代码被放置在大括号中{}。
function name(参数1, 参数2, 参数3, 参数n) { //形参
要执行的代码
}
函数声明后不会立即执行，会在我们需要的时候调用到。
2.函数的调用
函数通过其名字加上括号中的参数进行调用。 如果有多个参数，则参数之间用逗号隔开。 如果函数有返回值（即使用return将结果返回，在语法层面上函数的返回值可有可无），则可以声明变量等于函数的结果即可。
function sum(num1, num2) { //num1、num2为形参
return num1 + num2; //使用return将结果返回
}
var result = sum(1, 1); //函数通过其名字加上括号中的参数进行调用//声明变量等于函数的结果 //1、1为实参
alert(result); //输出2
alert(sum); //弹出方法的文本
3.案例分析
1.案例1_计算两个数字的和
/* 0.计算两个数字的和_直接写出 */
var num1 = 1;
var num2 = 2;
var result = num1 + num2;
console.log("result：" + result); //3
/* 以上代码的写法无法实现代码的复用，如果后续还需要计算两个数字的和，以上代码还需要再写一次，造成代码的冗余，这时可以考虑将代码进行封装，写成函数的形式，因为使用函数可以实现代码的复用。 */
/* 1.计算两个数字的和_使用函数 */
function add(num1, num2) {
var res = num1 + num2;
console.log("res：" + res); //3
}
add(1, 2); // 调用add函数。函数不会在页面加载后自动执行，需要手动的调用。保存或者重新打开文件，会自动执行此处代码。
/* 2.为了后续能使用计算的结果，可以使用return将结果返回 */
function add2(num1, num2) {
var res = num1 + num2;
console.log("res：" + res); //3
return res; //使用return将结果返回
}
var a = add2(1, 2); //调用add2函数。函数不会在页面加载后自动执行，需要手动的调用。保存或者重新打开文件，会自动执行此处代码。
console.log("a：" + a); //3
console.log(a + 2); //5
/* 3.点击按钮调用add2函数演示 */
function add3(num1, num2) {
var a = add2(num1, num2);
console.log("a：" + a); //11
console.log(a + 2); //13
}
<button type="button" onclick="javascript:add(3,4)">点一下</button>
<button type="button" onclick="javascript:add(5,6)">点一下2</button>
<button type="button" onclick="javascript:add3(5,6)">点一下3</button>
2.案例2_利用函数实现简易计算器
function firstFunc() {
let num1 = prompt('请输入第一个数');
let num2 = prompt('请输入第二个数');
let operator = prompt('请输入运算符');
switch (operator) {
case '+':
alert(add(num1, num2));
break;
case '-':
alert(sub(num1, num2));
break;
case '*':
alert(mult(num1, num2));
break;
case '/':
alert(div(num1, num2));
break;
default:
console.log('请输入正确的运算符！');
}
}
/* 加法运算 */
function add(num1, num2) {
return num1 / 1 + num2 / 1; //除以1是为了将输入的字符型转换为数值型
}
/* 减法运算 */
function sub(num1, num2) {
return num1 - num2;
}
/* 乘法运算 */
function mult(num1, num2) {
return num1 * num2;
}
/* 除法运算 */
function div(num1, num2) {
return num1 / num2;
}
<button type="button" onclick="javascript:firstFunc()">点一下</button>
3.案例3_使用函数实现数组排序代码的复用
1.提示用户输入一个数组的长度； 2.用户输入数组中的数值 ，要保证用户输入的值是数值； 3.将用户输入值组成的数组排序。
/* 1.构建数组_使用函数（函数实现代码复用） */
function getArray(length) {
var array = new Array(); //创建未指定长度的数组
do {
var num = prompt('请输入数字');
if (isNaN(num)) {
continue;
}
array.push(num/1); //添加数组元素到数组末尾
} while (array.length < length)
return array; //使用return将结果返回
}
/* 2.数组排序_使用函数（函数实现代码复用） */
function sortArray(ary) {
var array = ary;
/* 冒泡排序法 */
for (var i = 0; i < array.length - 1; i++) {
for (var j = 0; j < array.length - i - 1; j++) {
if (array[j] > array[j + 1]) {
var temp = array[j];
array[j] = array[j + 1];
array[j + 1] = temp;
}
}
}
return array; //使用return将结果返回
}
/* 3.调用getArray、sortArray函数 */
function firstFunc() {
var len = prompt('请输入数组的长度'); //5
var aArray = getArray(len);
// console.log(aArray); //{"0":"1","1":"3","2":"5","3":"6","4":"9","length":5}
// console.log(aArray.toString()); //9,3,6,1,5
var bArray = sortArray(aArray);
console.log(bArray); //{"0":"1","1":"3","2":"5","3":"6","4":"9","length":5}
console.log(bArray.toString()); //1,3,5,6,9
}
<button type="button" onclick="javascript:firstFunc()">点一下</button>
作业：写一个函数，在函数内部打印出"Hello JavaScript"，要求：1.一打开文件时就能打印；2.点击按钮也可打印。
4.匿名函数
匿名函数，即没有名字的函数。
1.匿名函数的声明
var name = function(参数1, 参数2, 参数3, 参数n) { //匿名函数用变量name接收，视name为匿名函数的名称
要执行的代码
};
2.匿名函数的调用
同上面的普通函数的调用。
3.案例分析
var add = function(x, y) { //匿名函数用变量add接收，视name为匿名函数的名称 //x、y为形参
var z = x + y; //要执行的代码
return z; //使用return将结果返回
//return x + y;
};
var result = add(2,3); //函数通过其名字加上括号中的参数进行调用//声明变量等于函数的结果 //2、3为实参
console.log(result); //5
console.log(add); //打印方法的文本
5.系统函数
0.JavaScript中的函数分为系统函数(又叫全局函数)和自定义函数，以上我们介绍的都是自定义函数的声明与调用。 1.全局函数可用于所有内建的JavaScript对象。不需要依赖于某个对象，可直接使用。 如不使用xxx.parseInt()，而用parseInt(x)、parseFloat(x)、isNaN(x)。 2.常用的全局函数有：isNaN、parseInt/parseFloat、encodeURI/decodeURI、eval等。 注意，alert不是全局函数，alert相当于window.alert()。 3.区分一个函数是否是系统函数：1.这个函数不是我们自己声明的；2.这个函数不隶属某个对象。
3.encodeURI与decodeURI： encodeURI()-->把字符串作为URI进行编码。 decodeURI()-->对encodeURI()函数编码过的URI进行解码。即对编码后的字符串进行解码。
var uriStr = "http://www.baidu.com?name=张三&num=001 zs";
var uriec = encodeURI(uriStr);
document.write("编码后的：" + uriec); //编码后的：http://www.baidu.com?name=%E5%BC%A0%E4%B8%89&num=001%20zs
document.write("<br />");
var uridc = decodeURI(uriec);
document.write("解码后的：" + uridc); //解码后的：http://www.baidu.com?name=张三&num=001 zs
4.eval函数： 1.用于计算某个字符串以得到结果，或用于执行其中的JavaScript代码。即用于计算/执行字符串形式的语句。 如：var result = eval("2+3");结果为5。 2.只接受原始字符串作为参数。如果参数中没有合法的表达式和语句，则抛出异常。 如：var result = eval("2+3=");会抛出异常。应使用try{var result = eval("2+3=");}catch(error){显示error}。
var str = "2+3";
alert(str); //2+3
alert(eval(str)); //5
