javascript函数
一、概念
函数：就是封装起来的可以重复被调用的代码块。
【在js中，函数是头等对象，因为它们可像任何其他对象一样具有属性、方法。区别在于函数可被调用function对象】
二、使用函数的优势
- 程序更加简洁；
- 后期维护更加方便；
- 逻辑更加清晰。
三、函数的声明（定义）
（一）命名规则：
函数的命名规则和变量名是一样的（同“javascript变量的声明、赋值、命名”中提到命名规则一样）
注：函数名也不能和变量名重复，否则发生覆盖现象。
e.g.
var a = function a() {
console.log(111); //111
};
a();
a = 1;
console.log(a); //1（二） 声明方式
1. 使用function关键字声明
语法结构：
function 函数名 (参数[可有可无]) {
//函数主体
}e.g.
a(); //在同一代码块中，可提前调用函数
function a(){
alert(1);
}
a();//调用函数
a();//可多次调用同一函数2. 匿名函数（以下介绍3种方式）
（1）直接声明一个变量，将一个函数赋值给他
语法结构：
var 变量 = function (){}e.g.
foo(); //不被优先解析，在此foo是一个变量
var foo = function (){
console.log(1); //1
}
foo();（2）在计时器中声明
语法结构： setInterval(function (){},1000);
e.g.
setInterval(function () {
console.log(1)
},1000)
setTimeout(function () {
console.log(1)
},5000)（3）在一个事件后面声明
语法结构：div.onclick = function (){};
e.g.
<body>
<div>点我</div>
<script>
var box = document.querySelector("div");
box.onclick = function () {
console.log("点就对了");
}
</script>
</body>（三）函数的调用
1. 函数名(); 变量名();
【函数调用形式】一般在声明函数后直接调用
e.g.
function func() {
console.log("hello");
};
func(); //声明一个函数并调用
var foo = function () {
console.log("hi");
};
foo(); //声明一个匿名函数赋值给一个变量，然后调用2. 在事件后调用
e.g.同上
<body>
<div>点我</div>
<script>
var box = document.querySelector("div");
box.onclick = function () {
console.log("点就对了");
}
</script>
</body>3. 自调用（自己调用自己）
e.g.
// fn(); //Uncaught ReferenceError: fn is not defined
(function fn(){
console.log("自调用");
})();
//fn(); //Uncaught ReferenceError: fn is not defined注：在自调用前后调用此函数均报错！
（四）函数的参数
1. 概念
在调用函数时，可以向其传递值，这些值被称之为参数。
2. 特点：
让函数的调用更加灵活
e.g.
function pyramid(rows) {
for (var i=1;i<=rows;i++){
for (var j=0;j<=rows-i;j++){
document.write(" ");
}
for (var n=1;n<=i;n++){
document.write("* ");
}
document.write("<br>");
}
}
pyramid(5);
pyramid(2);
pyramid(3);效果图：
3. 分类（实参/形参）
实参：在调用函数时传递的真正的值
形参：在声明函数时定义的变量
语法结构：
function 函数名foo(参数--形参){ //封装函数时，括号内的参数为形参
//函数主体
}
函数名foo(参数--实参); //调用函数时，括号内的参数为实参e.g.
<script>
function myFunction(name,job) {
console.log("welcome" + name + ",the" + " " + job);//welcomeBill Gates,the CEO
}
myFunction("Bill Gates",'CEO');
</script>4. 参数的个数
可以是多个，写多个参数时，用逗号“,”隔开。
注：形参、实参必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
5. 参数的默认值（undefined）
函数参数的默认值是undefined。若在调用函数时，参数的值没被提供，那么它的值就为undefined。
函数默认参数：允许在没有实参值或者undefined被传入时使用默认形参。
注：
- 当实参的个数少于形参的个数时，未被传递值得形参被赋值为undefined
- 当实参的个数多于形参的个数时，不会报错，但多出个数的实参不解析
e.g.
//实参 < 形参
function fun1(a,b,c) {
console.log(a); //1
console.log(c); //undefined
}
fun1(1,2);
//实参 > 形参【不报错，多出个数不被解析】
function fun2(a,b) {
console.log(a); //1
console.log(b); //2
}
fun2(1,2,3,4,5,6);6. 参数的数据类型
可以是任意数据类型【可查看“javascript数据类型”一篇】
数据类型：数值（number）；字符串（string）；布尔值（Boolean）；未定义（undefined）；空值（null）；Symbol（ES6新增）；对象（object）
e.g.
function table (rows,sols,color){
if(rows==undefined){
rows = 10;
}
if(sols==undefined){
sols = 10;
}
if(color==undefined){
color = "#ccc";
}
//以上三个if语句可简写为：
rows = rows || 10;
sols = sols || 10;
color = color || "#ccc";
document.write("<table border='1' align='center'>");
for(var i=1;i<=rows;i++){
if(i%2==0){
document.write(`<tr bgcolor=${color}>`);
}else {
document.write("<tr>");
}
for(var j=0;j<sols;j++){
document.write(`<td>第${i}行 第${j+1}列</td>`);
}
document.write("</tr>");
}
document.write("</table>");
}
table(5,6,'blue');
table(5,6);效果图：
7. 每每声明一个函数，函数内部都会自动生成一个arguments对象
arguments对象会保存所有传递的实参；
arguments伪变量的length属性是某次调用的实参的个数；
函数对象的length属性是形参的个数
e.g.
function fun(a,b) {
console.log(arguments); //Arguments(3)对象[保存所有传递的实参]
console.log(fun.length); //2[函数对象的length属性是形参的个数]
for(var i = 0;i<arguments.length;i++){ //arguments伪变量的length属性是某次调用的实参的个数
console.log(arguments[i]); //1 2 3
}
}
fun(1,2,3);（五）函数的返回值
1. 概念
是定义在函数内部的语法结构，返回的至就是函数调用表达式的结果。
2. return语法
return 返回值，即 return value。
function myFun() {
var x = 1;
return x; //返回值 1
}注： return语句仅仅使函数停止执行，JS继续执行代码（从函数调用的地方）。函数调用将被返回值取代。
3. return的使用
（1）赋值给变量
function myFun() {
var x = 1;
return x; //返回值 1
}
var myVar = myFun();
console.log(myVar); //1（2）即使不保存为变量，同样可以使用返回值
function myFun() {
var x = 1;
return x; //返回值 1
}
var box = document.querySelector("#demo").innerHTML = myFun();
//获取到一个id为demo的元素，使其innerHTML为1，也就是myFun()所返回的值。（3）返回值基于传递到函数中的参数返回。
function fun(a,b) {
return a * b;
}
var num = fun(2,3);
console.log(num); //6（4）使用return，仅希望退出函数。
function out(m,n) {
if(m>n){
return;
}
console.log(m * n);
}
out(2,3); //6
out(5,3); //无输出4. 特征
- 返回值只能有一个（多写无意义）；
- return语句后的代码会被自动忽略掉，起到终止函数的执行并返回函数的值。
- return语句可有可无，可以返回任意我们所需要的值。
