JavaScrip 基础 第四篇

JavaScrip 基础 第四篇

函数的使用

函数的使用时分为两步

1、声明函数

function 函数名 () {
	// 函数体
}

举例：

function sayHi() {
	console.log('hi~~')
}

• 其中 function 声明函数的关键字 全部小写

• 函数是做某件事，函数名一般是动词 sayHi

• 函数不调用自己不执行

2、调用函数

使用函数名调用 加上小括号

sayHi()

函数的封装

函数的封装就是将一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

简单理解：封装类似与将电脑配件整合组和成一台电脑

案例：利用函数计算 1~100 之间的累加和

function getSum(){
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        sum += i
    }
    console.log(sum);
}

// 调用方法
getSum();

函数可以重复相同的代码

可以利用函数的参数实现函数重复不同的代码

函数的参数

形参和实参

function 函数名(形参1,形参2,...) { // 形参是声明在函数的小括号中， 表示形式上需要接受的参数
	
}

函数名(实参1,实参2,...) // 实参是在调用函数时给的参数，表示实际上需要给函数传递的实际值的参数

形参和实参 的执行过程

function cook(args){
	console.log(args);
}

cook('酸辣土豆丝') 
// 调用函数cook 其中给定的参数 为'酸辣土豆丝'  这里的参数为实参
// 此时 运行对应的函数 cook 形参 被 实参赋值 此时 args === '酸辣土豆丝'
// 最后在cook作用域内 可以进行使用
cook('大肘子')
// 调用函数cook 其中给定的参数 为'大肘子'  这里的参数为实参
// 此时 运行对应的函数 cook 形参 被 实参赋值 此时 args === '大肘子'
// 最后在cook作用域内 可以进行使用

案例： 利用函数求任意两个数的和

function getSum(num1, num2){
	console.log(num1 + num2);
}

getSum(5, 10)

案例： 利用函数求任意两个数之间的和

function getAndBetween(num1, num2){
    var sum = 0;
    if (num1 <= num2) {
        for (var i = num1; i <= num2; i++ ) {
            sum += i;
        }
    } else {
        for (var i = num2; i <= num1; i++ ) {
            sum += i;
        }
    }
    console.log(sum)
}
getAndBetween(1, 3)
getAndBetween(5, 3)
getAndBetween(2, 2)

函数形参实参个数不匹配

function getSum(num1, num2){
	console.log(num1 + num2)
}
getSum(1,2);  // 3
getSum(1,2,3) // 3
getSum(1)     // NaN

此时当实参与形参个数不匹配时：

• 当实参个数 === 形参个数，则参与的形式参数 正常
• 当实参个数 > 形参个数， 则参与的形式参数从左至右一一对应实参 多余的实参 将被去除丢失
• 当实参个数 < 形参个数， 则参与的形式参数从左至右一一对应实参 多余的形参 将被变为undefined

函数的返回值

函数是做某件事或者是实现某种功能

return 语句

有的时候，我们希望将函数将值返回给调用者，此时通过使用 return 语句就可以实现

函数的返回值格式

function 函数名() {
	return 需要返回的结果;
}
函数名();

当函数只要遇到return 就把后面的结果 返回给函数的调用者 函数名() = return 返回后的结果

案例：

function getResult() {
	return 666;
}

console.log(getResult());

案例： 求任意两个数的和

function getSum(num1, num2){
	return num1 + num2;
}

console.log(getSum(5, 10));

案例：利用函数求任意两个数的最大值

function getMax(num1, num2) {
    /*
	if (num1 < num2) {
    	return num2;
	} else {
		return num1;
	}
	*/
    return num1 > num2 ? num1 : num2 ;
}

console.log(getMax(5, 10))

案例：利用函数求数组的最大数

function getArrMax (arr) {
	var max = arr[0];
	for (var i = 1; i < arr.length; i++) {
		if (arr[i] > max){
			max = arr[i];
		}
	}
	return max;
}
var result = getArrMax([5, 4, 89, 7, 100, 0, 10])
// 一般在实际开发中，经常使用一个变量接收函数的返回结果
console.log(result)

return 终止函数

function getSum(num1, num2){
	return num1 + num2;
    alert("此行代码不会被执行")
}

console.log(getSum(5, 10));

1. return 后面的代码不会被执行
2. return 只能返回一个值，如果有多个值 只会返回 最后一个值，

如果想返回多个值，可以使用数组 json 等格式

如果函数有return 则返回return后面的值，如果没有return 则返回 undefined

总结 ：

break，continue，return的区别

break : 结束当前的循环体（如for、while）

continue : 跳出本次循环，继续执行下次循环 （如for、while）

return : 不仅可以退出循环，还能够返回return 语句中的值，同时还可以结束当前的函数体内的代码

练习：
练习一：写一个函数,用户输入任意两个数字，且输入任意算术运算(简单的计算器小功能) ,并能弹出运算后的结果。
练习二：写一个函数,用户输入任意两个数字的最大值,并能出弹运算后的结果。
练习三：写一个函数,用户输入任意三个不同数字的最大值,并能出运算后的结果。
练习四：写一个函数,用户输入一个数判断是否是素数,并返弹出回值(又叫质数,只能被1和自身整数的数)

解答：

练习一：写一个函数,用户输入任意两个数字，且输入任意算术运算(简单的计算器小功能) ,并能弹出运算后的结果。

var num1 = Number(prompt("请用户输入需要计算的第一个数字"))
var num2 = Number(prompt("请用户输入需要计算的第二个数字"))
function Calculator(num1, num2) {
	var opreChar = prompt("请用户输入需要计算的运算符 加'+'，减'-'，乘'*'，除'/'")
	if (opreChar === '-') {
		return num1 - num2;
	} else if (opreChar === '+'){
		return num1 + num2;
	} else if (opreChar === '*'){
		return num1 * num2;
	} else if (opreChar === '/'){
		return num1 / num2;
	}
}
var result = Calculator(num1, num2)
console.log(result)
alert(result)

练习二：写一个函数,用户输入任意两个数字的最大值,并能出弹运算后的结果。

var num1 = Number(prompt("请用户输入第一个数字"))
var num2 = Number(prompt("请用户输入第二个数字"))
function Calculator(num1, num2) {
	return num1 > num2 ? num1 : num2;
}
var result = Calculator(num1, num2)
console.log(result)
alert(result)

练习三：写一个函数,用户输入任意三个不同数字的最大值,并能出运算后的结果。

var num1 = Number(prompt("请用户输入第一个数字"))
var num2 = Number(prompt("请用户输入第二个数字"))
var num3 = Number(prompt("请用户输入第三个数字"))
function Calculator(num1, num2, num3) {
	var temp = num1 > num2 ? num1 : num2;
	return temp > num3 ? temp : num3;
}
var result = Calculator(num1, num2, num3)
console.log(result)
alert(result)

练习四：写一个函数,用户输入一个数判断是否是素数,并返弹出回值(又叫质数,只能被1和自身整数的数)

var num = Number(prompt("请用户输入第数字"))

function Calculator(num) {
    if (num <= 1) {
        return '输入的数据存在问题，尝试输入大于1的整数'
    }
    for (var i = 2; i < num; i++) {
        if (num % i == 0) {
            return '不是质数'
        }
    }
    return num + '是质数'
}
var result = Calculator(num)
console.log(result)
alert(result)

arguments 的使用

当我们不确定有多少个参数的时候，可以用 arguments 来获取

在JavaScript中，arguments实际上它是当前函数的一个内置对象，所有函数都内置了一个arguments对象

arguments对象中存储了传递的所有实参

function fn() {
	console.log(arguments) // 里面存储了所有传递过来的实参 Arguments[1, 2, 3]
	console.log(arguments.length)
	for (var i = 0; i < arguments.length; i++) {
		console.log(arguments[i]);
	}
}

fn(1, 2, 3)

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点

• 具有length属性

• 按索引方式存储数据

• 不具有数组的push，pop等方法

案例 ：利用函数求任意个数的最大值

function getMax() {
	var max = arguments[0];
	for (var i = 1; i < arguments.length; i++) {
		if (arguments[i] > max) {
			max = arguments[i];
		}
	}
    return max;
}
console.log(get(1,2,3))
console.log(get(1,2,3,4,5))
console.log(get(12,22,3,0,55,7,100))

利用函数封装方式，对数组排序 –冒泡排序

function sort(arr) {
	for (var i = 0; i < arr.length-1; i++) {
		for (var j = 0; j < arr.length-i-1; j++) {
			if (arr[j] > arr[j+1]) {
				var temp = arr[j+1];
				arr[j+1] = arr[j];
				arr[j] = temp;
			}
		}
	}
	return arr
}

console.log(sort([1,10,0,9,5,11,7]))

函数调用

函数可以调用另一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数函数相互调用的情况

function fn1() {
	console.log('fn1');
	fn2();
}

fn1(); // 在fn1 函数内部调用了函数fn2

function fn2() {
	console.log('fn2');
}

尝试理解以下函数 理解函数互相调用逻辑

function fn1() {
	console.log(111);
	fn2;
	console.log('fn1');
}

function fn2() {
	console.log(222);
	console.log('fn2');
}

fn1();

// 运行结果如下
// 111
// 222
// 'fn2'
// 'fn1'

案例：用户输入年份，输出当前年份2月份的天数

// 判断是否为闰年的函数

function isRunYear(year){
	var flag = false;
	if (year % 4 == 0 && year % 100 !=0 || year % 400 ==0) {
        	flag = true;
    }
    return flag;
}


//  返回平闰年的天数
function backDay() {
	var year = prompt("请输入年份：")
	if (isRunYear(year)) {
		return alert(year + '2月份有29天');
	} else {
		return alert(year + '2月份有28天');
	}
}


backDay()

函数的两种声明方式

1、利用函数关键字自定义函数

function 关键字  也叫命名函数

2、函数表达式

var 变量名 = function(){}  也叫匿名函数

举例：

var fun = function() {
	console.log('函数表达式')
}
fun();

其中 fun是变量名

函数表达式声明方式和声明变量相同，只不过变量里面存的是值，而函数表达式存的是函数

函数表达式也可以进行传递参数

JavaScript 作用域

作用域概述

通常来说
，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

简单理解：就是代码名字（变量）在某个范围内起作用和效果

js的作用域(es6)之前：全局作用域 局部作用域

全局作用域：整个script标签 或者是一个单独的js文件

局部作用域：在函数内部就是局部作用域 这个代码的名字只在函数内部其效果和作用

变量作用域

变量作用域的分类：全局变量 局部变量

全局变量：在全局作用域下的声明的变量都可以叫做全局变量

全局变量在代码和任何位置都可以使用

全局作用域下var声明的变量是全局变量

特殊情况，在函数内不适用var声明的变量也是全局变量（不建议使用）

局部变量：在局部作用域下的声明的变量都可以叫做局部变量，或者是在函数内部的变量就是局部变量

函数的变量只能在该函数内部使用

在函数内部var声明的变量是局部变量

函数的形参实际上就是局部变量

对比变量：

全局变量只有浏览器关闭的时候才会销毁，比较占内存资源

局部变量，当程序执行完毕就会销毁，比较节约内存资源

JS现阶段没有块级作用域 在es6的时候新增的块级作用域

块级作用域

{}      if {}     for {}   ......

作用域链

• 只要是代码，就至少有一个作用域

• 写在函数内部的局部作用域

• 如果函数内部中海油函数，那么在这个作用域中又可以诞生一个作用域

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链

案例：结果是几？

var a = 1;
function f1() {
	var a = 2;
	var b = '22';
    f2();
	function f2() {
        var a = 3;
        f3();
        function f3(){
            var a= 4;
            console.log(a)
            console.log(b)
        }
	}
	
}

f1();   // a 为 4， b 为 '22'

预解析

console.log(num)  // undefined
var num = 10;
// 相当于执行了一下代码
var num;
console.log(num);
num = 10;

fn();
function fn() {
	console.log(11);
}



fun();          // 报错 预解析   所以函数表达式 的调用需要在 函数表达式下方
var fun = function() {
	console.log(22);
}

// 相当于执行以下代码
var fun;
fun();
fun = function() {
	console.log(22);
}

JavaScript代码是由浏览器中的JavaScript解析器来执行的

JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行

预解析 js引擎会吧js里面所有的var 还有 function 提升到当前作用域的最前面

代码执行按照代码书写顺序从上往下执行

预解析分为 变量预解析（变量提升）和函数预解析（函数提升）

变量提升 就是把书写有变量声明提升到当前的作用域最前面 不提升赋值操作

函数提升 就是把所有的函数声明提升到当前作用于的最前面 不调用函数

预解析案例：

var num = 10;
fun();
function fun() {
	console.log (num);
	var num = 20;
}

// 相当于执行以下代码
var num;

function fun() {
    var num;
	console.log (num); // undefined
	num = 20;
}

num = 10;
fun(); 

案例：

f1();
console.log(c);
console.log(b);
console.log(a);

function f1() {
	var a=b=c=9;
	console.log(a);
	console.log(b);
	console.log(c);
}

// 相当于以下代码 
function f1() {
	var a;  需要注意一点 
	a = b = c = 9; 
	// 相当于 var a = 9; b = 9; c = 9;
	// 集体声明 var a = 9, b = 9, c = 9;
	// 所以 b 和 c 为全局变量
	console.log(a);
	console.log(b);
	console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);


// 打印的结果为   9, 9, 9, 9, 9, 预解析报错