• 周六. 7 月 27th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

JavaScript基础-4(函数)

admin

11 月 28, 2021

函数

函数的优势

  • 提高代码重用性
  • 代码可读性
  • 程序的可维护性

1.函数的组成

  • 函数名
  • 函数体
  • 参数 (形参 和 实参)
  • 返回值 (结束函数, 作为函数调用表达式整体的值)
    • return跟输出没关系

    • 没写返回值,函数整体返回undefined

        例子:
        <script>
        	demo();
        	demo();
      
        	function demo(){
        		console.log("OK");
        		return 100;
        	}
        	var a=demo();
        	console.log(a);//输出OK 和 100
        	console.log(demo());//输出OK 和 100
      
        	var f=demo;
        	console.log(f);
        	console.log(demo);//输出整个函数本身
      
        	f();//输出OK
      
        	var number=100;
        	console.log(typeof(demo));//输出demo的类型function
        	console.log(typeof(f));
      
        	console.log(typeof(demo()));//输出返回值100的类型,及OK
      
        	var demo=100;//function类型被转换了
        	demo();
        </script>
      

2.函数的声明方式

  • 关键字方式

      function 函数名([参数列表]) {
      	函数体
      }
    
  • 表达式方式(匿名函数方式)

      var 函数名 = function([参数列表]) {
      	函数体
      }
    
  • 构造函数方式

    var 函数名 = new Function("参数", "函数体)

      例子:
      <script>
      	fn1();
      	// function 关键字方式
      	function fn1(){
      		console.log("小同志和老同志跳舞");
      	}
    
      	function fn2(name){
      		console.log("小同志和"+name+"跳舞");
      	}
    
      	fn1();
      	fn2("老同志他爸");
    
      	// fn3();
      	// 表达式方式
      	var fn3=function(){
      		console.log("小燕燕和老艳艳跳舞");
      	}
      	var fn4=function(a,b){
      		console.log(a+"和"+b+"跳舞");
      	}
      	fn3();
      	fn4("诸葛亮","小同志");
      	//fn5();
      	//Function构造函数方式
      	var fn5=new Function("console.log('小和老跳舞')");
    
      	var fn6=new Function("name1","name2","console.log(name1+'和'+name2+'跳舞')");
    
      	fn5();
      	fn6("刘备","张飞");
      </script>
    

3.函数的参数问题

  • 形参和实参的数量

    形参数量<实参数量 多余的 实参被忽略

    形参数量>实参数量 没有赋值的形参会自动赋值undefined

  • 参数的默认值

    • ECMA6语法(不兼容IE) function 函数名(参数1, 参数2=默认值)

    • 有默认值的参数要写在后面

    • 有默认值的参数称之为可选参数

    • 兼容处理参数默认值问题, 在函数体判断 参数值是否是undefined

       <script>
       	function demo(a, b, c) {
       		//兼容性解决,在函数体内判断
       		if (b === undefined){
       			b = "诸葛亮";
       		}
       		if (c === undefined){
       			c = "曹操";
       		}
       		console.log(a + "和" + b + "去钓鱼, "+ c + "在一旁干看着");
       	}
      
       	demo("小同志");
       	//输出:小同志和诸葛亮去钓鱼, 曹操在一旁干看着
       	demo("小同志", "大同志", "老同志");
       	//输出:小同志和大同志去钓鱼, 老同志在一旁干看着
       	demo("小同志", "大同志");
       	//输出:小同志和大同志去钓鱼, 曹操在一旁干看着
       </script>
      
  • 可变参数数量的函数

    • arguments

       <script>
       	//实现n个数相加的和
       	//可变参数数量的函数arguments
       	function sum(){
       		var sum=0;
       		for(var i=0;i<arguments.length;i++){
       			sum+=arguments[i];
       		}
       		return sum;
       	}
      
       	console.log(sum(10,2,3));
       	console.log(sum(10,2,3,10,56,34));
       </script>
      

4.函数的作用域

  • 全局变量 在函数外面定义的变量

  • 局部变量 在函数里面定义的变量

  • 在函数内,不使用var声明的变量时全局变量(不推荐使用,严格模式”use stirct”不允许)

      function fn(){
      	var grade="h516";
      	function fn1(){
      		console.log(grade);
      	}
      	fn1();//注意:只能在fn()内部调用
      }
    
      fn();//结果输出h516(只有在该函数内部调用了fn1()才会有结果)
    

5.递归函数

例题:
<script>
	//死循环递归
	function demo(){
		console.log('demo');
		demo();
	}
	// demo();
	
	//递归
	function fn(m){
		if(m<=0){
			console.log("---------");
			return;
		}
		console.log(m);
		fn(m-1);
		console.log(m);
	} 
	fn(4);
	/*结果输出: 4
				3
				2
				1
			----------
				1
				2
				3
				4
	*/

	//实现阶乘 m的阶乘
	function cheng(m){
		if(m<=1){
			return 1;
		}
		return m*cheng(m-1);
	}
	console.log(cheng(3));
	console.log(cheng(5));
	console.log(cheng(10));
	
</script>

发表回复