JS学习笔记——基础知识总结(函数)

JS基础知识总结1(函数)

  • 前言
  • 一、函数概念
  • 二、函数的定义
    • 1、声明式:
    • 2、赋值式:
  • 三、函数的调用
  • 四、函数相关基础知识
    • 1、参数
    • 2、return
    • 3、预解析
    • 4、作用域
      • 作用域延展知识——变量使用规则
  • 五、练习题
  • 学习笔记链接
    • 1、Javascript由来及书写方式
    • 2、数据类型与简单运算
    • 3、选择语句if、switch及练习题
    • 4、循环语句while、dowhile、for及练习题
    • 5、函数、预解析、作用域【本篇】
      • 5.1、递归函数、斐波那契数列计算
    • 6、对象基础知识
    • 7、数组、冒泡排序、选择排序
    • 8、字符串的JS方法
    • 9、Math(数学)对象及内置方法

前言

鉴于本人还处于学习阶段,以下内容为个人理解所做笔记,可能存在一定错误,如果能指出错误之处感激不尽,希望能与大家共同进步。

一、函数概念

通俗来说,函数就是将实现某一个功能的一段代码放在一个盒子中,而这个盒子就是函数,需要使用这个功能时直接拿出这个盒子使用就可以了。
从上面这段话我们还能得出一个结论,一个函数可以分成两个阶段,第一个阶段:将代码放入盒子中(函数的定义),第二阶段使用这个盒子实现一个功能(函数的调用)。

二、函数的定义

要想使用一个函数盒子,首先得有这个盒子,函数的定义尤为重要,想要定义一个函数共有两种方式,声明式,赋值式。

1、声明式:

语法:function 函数名(参数){
执行代码
}
function是定义函数的关键字;函数名的起名规范与变量名一致;这里的参数是一种形参,没有具体值,可以不书写,一般是调用函数时输入的参数(实参)赋值。

2、赋值式:

语法:var 函数名 = function(参数){
一段代码
}
赋值式相当于先定义了一个函数名,然后将函数实体赋值给这个函数名。

三、函数的调用

不论是赋值式还是声明式,函数的调用都是一致的,直接书写函数名和参数即可。但需要注意的是,声明式函数可以在定义前后进行调用,而赋值式函数只能在其定义后调用。

四、函数相关基础知识

1、参数

之前已经提及了函数具有两种参数,实参与形参,这二者有很大的区别,一定要学会辨认。
1)形参:只可以在函数内部使用的变量,在定义函数时可以设置多个形参每个形参之间用 隔开,形参在未赋值时的值为undefined,而赋值是在函数调用时由实参赋值给形参
2)实参:在函数调用时输入的参数,调用函数时可以输入多个实参,之间使用 隔开,可以将值赋值给形参
3)arguments:该变量记录了函数输入的所有实参,需要查看参数时直接输出arguments即可。该变量是一个复杂数据类型,不能在函数外使用
例:

	function fn(){
		console.log(arguments)
	}
	fn(1,2,3,4,5,6,7,8,9,"a","b")
	//最后输出结果为所有实参的集合

PS.
如果一个函数具有多个形参与实参时其对应关系是一一对应的,如果有某一种参数多于另一种具体情况如下:
1)形参多于实参:没有对应实参的形参不被赋值,还是undefined
2)实参多于形参:多余的实参没有对应的形参,就不能参与函数执行,函数内部是无法使用这个值

2、return

return这个关键字是用来终止函数并返回一个值,在未设定的情况下默认返回undefined。
一般return用在选择以及循环结构中,当满足条件时可以直接终止函数并返回所需值,不用等待函数执行完毕。

3、预解析

js是一个解释型语言,js代码执行时分为解释代码和执行代码两个环节。解释代码环节就被称为预解析,想要优化自身代码,减少程序深刻了解预解析是十分重要的。
一段代码中可以分成两个部分,定义部分和执行部分,其中定义部分包括了函数和变量的定义,执行部分则是由函数的调用、变量赋值、输出语句、运算语句等构成。
在有了以上基础我们就要开始进行真正的预解析了:

//现有以下一段代码,是还未进行过预解析
	fn();		
	console.log(num);
	
	function fn(){
		console.log()
	 }
	var num = 100;
//首先我们需要划分出每段代码是属于定义部分还是执行部分
	fn();					//函数调用,属于执行部分
	console.log(num);		//输出语句,属于执行部分
	
	function fn(){			//函数的定义,属于定义部分
		console.log()
	 }
	var num = 100;			//可拆分为两个部分其一为:var num,定义变量是为定义部分;其二为num = 100,赋值变量是为执行部分
//接下来需要将定义部分的代码提前并按出现顺序书写,执行部分代码后移同时也按出现顺序进行书写
	//定义部分
	function fn(){
		console.log()
 	}
	var num

	//执行部分
	fn();		
	console.log(num);
	num = 100;

如果没有以上预编译过程,一些书写在定义代码之前的执行代码将无法执行甚至会导致系统报错,预编译能让系统更好的解读我们的代码,消除一部分因书写位置引起的错误。深入理解预编译能让我们更了解自己的代码在系统中如何运作从而更容易进行维护优化。

4、作用域

作用域即为变量所生效的范围。
每个变量都有自己的使用范围,其只能在使用范围中被使用,这个使用范围就被称为作用域。作用域主要分为两种全局作用域与局部作用域,其中局部作用域的范围是根据变量定义位置进行变化的,全局作用域是不变的。
1)全局作用域:其是最大的作用域;作用域为全局作用域的变量即为全局变量,可以在任何一个地方调用该变量;当浏览器页面打开时会自动生成一个全局作用域window,将会一直存在到页面关闭;在函数内部不通过var定义的变量会变为全局变量。
2)局部作用域:一般来说一个函数就为一个局部作用域;每个局部变量只能在当前函数使用,不能在当前函数之外被使用;JS中只有函数能生成局部作用域。

作用域延展知识——变量使用规则

1)访问规则(读取):先在内部作用域寻找该变量,没有则到上一级作用域寻找,没有就继续往上一级作用域寻找,直到在某一级作用域寻找到,拿来使用,如果寻找到全局作用域都没有找到则报错。
2)赋值规则:先在内部寻找变量定义,有直接赋值,没有就往上一级作用域寻找,一直找到全局作用域,如果是在全局作用域中都没有该变量定义,则将该变量定义为全局变量并赋值。
不论是询问变量还是赋值变量都只能从本级往上一级查找,不能由本级往下一级查找

五、练习题

以下练习题均为本人培训过程中老师当天布置的练习题,对理解函数有很大的帮助,我会将个人的解题代码放置最后,个人水平有限仅供参考。

  1. 编写一个函数,计算两个数字的和差积商

  2. 编写函数,求圆的面积

  3. 编写函数,判断一个字符串的内容是不是纯数字

  4. 编写一个函数,计算三个数字的大小,按从小到大的顺序输出。

  5. 编写一个函数,在页面上输出一个N行M列的表格,表格内容填充0~100的随机数字

  6. 编写一个函数,生成4位数字的验证码

  7. 求m-n之间数字的和

  8. 编写函数digit(num, k),函数功能是:求整数num从右边开始的第k位数字的值,如果num位数不足k位则返回0。

  9. 编写函数计算一个数字的长度

  10. 编写一个函数,计算任意两个数字之间所能组成的奇数个数,数字必须是个位数。
    比如:计算0~3之间能组成的奇数是: 01、03、13、21、23、31

  11. 某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,
    加密规则如下:每位数字都加上5,然后用除以10的余数代替该数字,再将第一位和第四位交换,
    第二位和第三位交换,请编写一个函数,传入原文,输出密文

  12. 编写一个函数,输入n为偶数时,调用函数求1/2+1/4+…+1/n,当输入n为奇数时,调用函数求1/1+1/3+…+1/n

  13. 使用函数完成任意数字阶乘的计算

  14. 要求:页面输入任意数字,点击按钮后计算该数字的阶乘(运用到部分DOM知识)

// 1 计算和差积商
function count_1(num1,num2,sign){
	switch(sign){
		case"+":console.log(num1+num2);
		break;
		case"-":console.log(num1-num2);
		break;
		case"*":console.log(num1*num2);
		break;
		case"/":console.log(num1/num2);
		break;
		default:console.log("输入错误")
	}
}


// 2 求圆面积
function count_area(num){
	var s 
	s = Math.PI*num*num
	console.log(s)
}


// 3 判断字符串是否纯数字
function judge(str){	
	if(String(Number(str)) == "NaN"){
		console.log("flase")
	}else(
		console.log("ture")
	)
}


// 4 判断数值大小
function judge_num(a,b,c){
    if(a<=b)
    {
        if(b<=c)
		{
			console.log(a,b,c)
		}
		else if(a<=c)
		{
			console.log(a,c,b)
		}
		else{
			console.log(c,a,b)
		}	
    }else if(a<=c){
		console.log(b,a,c)
	}
	else if(b<=c){
		console.log(b,c,a)
	}
	else{
		console.log(c,b,a)
	}

}


// 5 输出列表,填充随机数
function print_tab(n,m){
	document.write("")for(i=0;i<n;i++){
		document.write("")for(j=0;j<m;j++){
			document.write("")}
		document.write("")}
	document.write("
") document.write(parseInt(Math.random()*100)+" ") document.write("

"
) } // 6 四位密码 function print_vcode(){ while(1){ var p = parseInt(Math.random()*10000) if( p>1000 && p<10000 ){ return p }else{ } } } // 7 m-n之间数和 function count_2(m,n){ if(n>m){ var t = m m = n n = t } var sum = 0 for(i=(n+1);i<m;i++){ sum = sum + i } console.log(sum) } // 8 输出第k位数字 function print_1(num,k){ var a = 0 for(i=0;i<k;i++){ a = num%10 num = parseInt(num/10) } console.log(a) } // 9 计算函数长度 function count_3(num){ var k = 0 while(1){ if( num / 10 >= 1){ k = k + 1 num = num/10 }else{ k = k + 1 return k } } } // 10 计算两个数之间能组成的奇数个数,个位数 function count_4(m,n){ if(n>m){ var t = m m = n n = t } var sum = 0 var k = 0 for(i=n;i<=m;i++){ for(j=n;j<=m;j++){ sum = i*10 + j // console.log(sum) if(sum%2 == 1){ k += 1 } } } return "能组成的奇数个数为:"+(k-2)+"个" } // 11 加密 function encryption(num){ if(num>1000&&num<10000){ var p1 = (parseInt(num%10)+5)%10 var p2 = (parseInt(num/10)+5)%10 var p3 = (parseInt(num/100)+5)%10 var p4 = (parseInt(num/1000)+5)%10 return 1000*p1+100*p2+10*p3+p4 }else{ console.log("输入数据错误请重新输入") } } // 12 奇偶分式和 function count_5(n){ if(n%2 == 0){ // function count_even(n){ var sum = 0 for(i=1;i<=n/2;i++){ sum += 1/(2*i) } console.log(sum) // } }else{ // function count_odd(n){ var sum = 0 console.log(sum) for(i=1;i<=(n+1)/2;i++){ sum += 1/(2*i-1) } console.log(sum) // } } } // 13 阶乘和 function count_6(num){ var sum = 1 for(i=1;i<=num;i++){ sum = sum*i } console.log(sum) } // 14 按钮计算阶乘 function count_factorial(num){ var sum = 1 for(i=1;i<=num;i++){ sum = sum*i } console.log(sum) } //事件绑定 var div1 = document.getElementById("box1"); var txt = document.getElementById("txt") div1.ondblclick = function(){ txt.onchange = function(){ a = txt.value; count_factorial(a) } } //html中代码 <body> <div id="box1"> </div> <textarea rows="" cols="" id="txt"> </textarea> </body>

学习笔记链接

1、Javascript由来及书写方式

JS学习笔记——入门基础知识总结

2、数据类型与简单运算

JS学习笔记——入门基础知识总结(数据类型与简单运算)

3、选择语句if、switch及练习题

JS学习笔记——入门基础知识总结(选择语句)

4、循环语句while、dowhile、for及练习题

JS学习笔记——入门基础知识总结(循环语句)

5、函数、预解析、作用域【本篇】

JS学习笔记——基础知识总结(函数)

5.1、递归函数、斐波那契数列计算

JS学习笔记——函数拓展(递归函数)

6、对象基础知识

JS学习笔记——基础知识总结(对象)

7、数组、冒泡排序、选择排序

JS学习笔记——基础知识总结(数组)

8、字符串的JS方法

JS学习笔记——基础知识总结(字符串)

9、Math(数学)对象及内置方法

JS学习笔记——JS内置对象Math(数学方法)

你可能感兴趣的:(JavaScript)