10.JavaScript-函数(上)

函数(上)

1.什么是函数?

函数就是用于封装代码的,函数是一段可以随时被反复执行的代码块.

不使用函数的弊端

• 冗余代码太多
• 需求变更,需要修改很多代码

使用函数的好处

• 冗余代码变少了
• 需求变更,需要修改的代码变少了

2.函数格式

function 函数名称(形参列表){
被封装的代码;
}

函数定义步骤

1.书写函数的固定格式
function 函数名称(形参列表){
需要封装的代码;
}
2.给函数起一个有意义的名称
为了提升代码的阅读性;
函数名称也是标识符的一种,所以也需要遵守标识符的命名规则和规范.
3.确定函数的形参列表,看看使用函数的时候是否需要传入一些辅助的数据
4.将需要封装的代码拷贝到{ }中
5.确定函数的返回值
可以通过return 数据;的格式,将函数中的计算结果返回函数的调用者

//需求:要求计算两个变量的和
	/*let num1 = 10;
    let num2 = 20;
    let res = num1 + num2;
    console.log(res);


    let value1 = 30;
    let value2 = 20;
    let res2 = value1 + value2;
    console.log(res2);*/
    function getSum(a,b){ //a = num1,b = num2
      let res = a + b;//let res = 10 + 20;let res  = 30;
      //以下代码的含义:将res返回给函数的调用者
      return res;
    }

    let num1 = 10;
    let num2 = 20;
    getSum(num1,num2);

3.注意点

1.一个函数可以有形参也可以没有形参(0个或者多个)
什么是形参?定义函数时函数()中的变量我们就称之为形参.

//没有形参的函数
function say(){
	console.log("hello world");
}
say();
//有形参的函数
function say(name){
	console.log("hello"+name);
}
say("wyy");

2.一个函数可以有返回值也可以没有返回值.

//没有返回值的函数
function say(){
	console.log("hello world");
}
//有返回值的函数
function getSum(a,b){ 
      return a + b;
    }
    let res = getSum(10,20);
    console.log(res);

3.函数没有通过return明确返回值,默认返回undefined

function say(){
	console.log("hello world");
}
let res = say();
console.log(res);

4.return的作用和break相似,所以return后面不能编写任何语句(永远执行不到)
break的作用是立即结束switch语句或者循环语句;
return的作用是立即结束当前所在函数
5.调用函数实参的个数和形参的个数可以不相同
什么是实参?
调用函数时传入的数据我们就称之为实参.

function getSum(a,b){ 
      console.log(a,b);
      return a + b;
    }
    //let res = getSum(10,20);//这里的10和20就是实参
    /*
    let num1 = 10;
    let num2 = 20;
    let res = getSum(num1,num2);//这里的num1和num2也是实参
    console.log(res);
    */
    //let res = getSum(10);//10,undefined
    let res = getSum(10,20,30);//10,20

6.JavaScript中的函数和数组一样,都是引用数据类型(对象类型)
既然是一种数据类型,所以也可以保存到一个变量中

//将一个函数保存到了一个变量中
//将来可以通过变量名称找到函数并执行函数
let say = function(){
	console.log("hello world");
}
say();

4.函数arguments

1. 因为console.log();也是通过()来调用的,所以log也是一个函数.

function say(){
	console.log("hello world");
}
//say();
widow.say();

2. log函数的特点:
   可以接收1个或多个参数
3. 为什么log函数可以接收1个或多个参数
   内部实现原理就用到了arguments
4. arguments的作用:
   保存所有传递给函数的实参
   arguments其实是一个伪数组

function getSum(){
	//每个函数中都有一个叫做arguments的东东
	//arguments其实是一个伪数组
	//console.log(arguments);
	//console.log(arguments[0]);
	//console.log(arguments[1]);
	//console.log(arguments[2]);
	let sum = 0;
	for(let i = 0;i < arguments.length;i++){
		let num = arguments[i];
		console.log(num);
		sum += num;//sum = sum +num;
	}
}
getSum(10,20,30);

5.函数扩展运算符

• 扩展运算符在等号左边,将剩余的数据打包到一个新的数组中.
  注意点,扩展运算符只能写在最后

let [a,...b] = [1,3,5];//a = 1;b = [3,5];

• 扩展运算符在等号右边,将数组中的数据解开

let arr1 = [1,3,5];
let arr2 = [2,4,6];
let arr = [...arr1,...arr2];//let arr = [1,3,5,2,4,6];

• 扩展运算符在函数的形参列表当中的作用
  将传递给函数所有实参打包到一个数组中
  注意点:和在等号左边一样,也只能写在形参列表的最后

function getSum(...values){
	//console.log(values);
	let sum = 0;
	for(let i = 0;i < values.length;i++){
		let num = values[i];
		console.log(num);
		sum += num;//sum = sum +num;
	}
	return sum;
}
getSum(10,20);