【Web】JavaScript（No.52）函数

最新推荐文章于 2021-12-16 17:54:14 发布
最新推荐文章于 2021-12-16 17:54:14 发布
阅读量176 收藏 1
点赞数
分类专栏： Web-JavaScript 文章标签： Web JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43251850/article/details/99316379
版权

函数

在这里插入图片描述
需要素材点击图片联系我或私信、评论

为什么要有函数

如果要在多个地方求1-100之间所有数的和，应该怎么做？

什么是函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用

函数的作用就是封装一段代码，将来可以重复使用

函数的定义

  • 函数声明
function 函数名(){
  // 函数体
}
  • 函数表达式
var fn = function() {
  // 函数体
}

  • 特点：

    函数声明的时候，函数体并不会执行，只要当函数被调用的时候才会执行。
    函数一般都用来干一件事情，需用使用动词+名词，表示做一件事情 tellStory sayHello等

函数的调用

  • 调用函数的语法：
函数名();

  • 特点：

    函数体只有在调用的时候才会执行，调用需要()进行调用。
    可以调用多次(重复使用)

代码示例：

// 声明函数
function sayHi() {
  console.log("吃了没？");
}
// 调用函数
sayHi();

// 求1-100之间所有数的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 调用
getSum();

函数的参数

  • 为什么要有参数
function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log();
}

// 虽然上面代码可以重复调用，但是只能计算1-100之间的值
// 如果想要计算n-m之间所有数的和，应该怎么办呢？
  • 语法：
// 函数内部是一个封闭的环境，可以通过参数的方式，把外部的值传递给函数内部
// 带参数的函数声明
function 函数名(形参1, 形参2, 形参...){
  // 函数体
}

// 带参数的函数调用
函数名(实参1, 实参2, 实参3);

  • 形参和实参

    1. 形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。
    2. 实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。
var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y实参，有具体的值。函数执行的时候会把x,y复制一份给函数内部的a和b，函数内部的值是复制的新值，无法修改外部的x,y

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的参数</title>
</head>
<body>
<script>
    /*
    * 形参：函数定义的时候小括号里的变量叫形参，形参名自定义
    * 实参：函数调用的时候小括号里传入的值叫实参，实参的值可以是变量也可以是值
    * 传值：函数在调用时，小括号里面的值传给函数定义的参数
    * */
    function sum(x,y){
        console.log(x + y);
    }
    var x = parseInt(prompt("请输入第一个值"));
    var y = parseInt(prompt("请输入第二个值"));
    sum(x,y);

    //求三个数较大值
    function max(x,y,z){
        var max = x > y  ? (x > z ? x : z) : (y > z ? y : z);
        console.log(max);
    }
    max(5,7,9);
</script>
</body>
</html>

函数的返回值

当函数执行完的时候，并不是所有时候都要把结果打印。我们期望函数给我一些反馈（比如计算的结果返回进行后续的运算），这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值

返回值语法：

//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
  //函数体
  return 返回值;
}

//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);

函数的调用结果就是返回值，因此我们可以直接对函数调用结果进行操作。

返回值详解：
如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的返回值</title>
</head>
<body>
<script>
    /*
    * 函数中有return 关键字，return后面的代码不执行
    * return 后面有一个值，叫返回值，要接收返回值，用变量接收
    * return后面没有返回值，则变量接收的是undefined
    * 可以接收并返回不同的数据类型
    * 没有括号返回的是整个函数体
    * */
    function f1(x,y){
        var sum = x + y;
        console.log("return前："+sum);
        return 100;
        console.log("return后："+sum);
    }
    var result = f1(1,2);
    console.log(result);

    //用参数，用返回值计算三个数的和
    function sum(x,y,z){
        var sum = x + y + z;
        return sum;
    }
    var s = sum(3,6,9);
    console.log(s);
</script>
</body>
</html>

arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

函数其它

匿名函数

匿名函数：没有名字的函数

匿名函数如何使用：

将匿名函数赋值给一个变量，这样就可以通过变量进行调用
匿名函数自调用

关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。

自调用函数

匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行

(function () {
  alert(123);
})();

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09.函数其他的定义方式</title>
</head>
<body>
<script>
    /*
    * 命名函数：函数有名字
    * 匿名函数：函数没有名字
    *
    * 函数的另一种定义方式：
    * 函数的表达式：var 函数名/变量 = 匿名函数；
    * 函数的声明：function 函数名(){}
    * */
    var f1 = function(){
        console.log("匿名函数");
    };
    console.log(f1);

    function f2(){
        console.log("命名函数");
    };
    f2();

    //函数的自调用,一次性调用，函数没有名字，相当于声明函数的同时直接调用
    function ff(){
        console.log("阿尼哈赛哟~");
    }
    (function (){
        console.log("阿尼哈赛哟~");
    })();

    console.log(typeof ff);//数据类型：function
</script>
</body>
</html>

函数是一种数据类型

function fn() {}
console.log(typeof fn);
  • 函数作为参数

因为函数也是一种类型，可以把函数作为两一个函数的参数，在两一个函数中调用

  • 函数做为返回值

因为函数是一种类型，所以可以把函数可以作为返回值从函数内部返回，这种用法在后面很常见。

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.函数作为参数&返回值使用</title>
</head>
<body>
<script>
    function f1(x,y) {
        console.log(x - y);
    }
    f1(10,20);

    //1、把函数当做参数使用（回调函数）：把这个函数叫做回调函数
    function f2(fn) {
        console.log(fn);
        fn();//此时加了括号的fn，相当于函数的调用
    }
    // f2(function (){
    //     console.log("函数当做参数使用")
    // })
    function sayHi(){
        console.log("hello word!")
    }
    f2(sayHi);

    //2、函数作为返回值使用
    function f3() {
        console.log("f3被调用");
        return function(){
            console.log("函数被返回了")
        };
    }
    var ff = f3();
    console.log(ff);
    //调用返回值的函数
    ff();
</script>
</body>
</html>

代码规范

1.命名规范	
2.变量规范   

var name = 'zs';	
3.注释规范
	// 这里是注释
4.空格规范
5.换行规范
	var arr = [1, 2, 3, 4];
	if (a > b) {
      
	}
	for(var i = 0; i < 10; i++) {
      
	}
	function fn() {
      
	}
函数的练习（一）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的练习（一）</title>
</head>
<body>
<script>
    //1、通过函数，求两个数字的和
    function sum(){
        var num1 = 100;
        var num2 = 200;
        var sum = num1 + num2;
        console.log(sum);
    }
    sum();

    //2、通过函数，求两个数字的较大值
    function max(){
        var x = 30;
        var y = 40;
        //使用三元表达式
        console.log(x > y ? x : y);
    }
    max();

    //3、求三个数的较大值
    function max2(){
        var x = 1;
        var y = 2;
        var z = 3;
        //嵌套三元表达式
        var max = x > y  ? (x > z ? x : z) : (y > z ? y : z);
        console.log(max);
    }
    max2();

    //4、求1-100之间的和
    function sum2(){
        var i = 1;
        var sum = 0;
        while(i <= 100){
            sum += i;
            i++;
        }
        console.log(sum);
    }
    sum2();

    //5、求一个数组中所有元素的和
    function sum3(){
        var arr1 = [10,20,30,40,50];
        var sum = 0;
        for(var i = 0; i < arr1.length; i++){
            sum += arr1[i];
        }
        console.log(sum);
    }
    sum3();
</script>
</body>
</html>
函数的练习（二）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的练习（二）</title>
</head>
<body>
<script>
    //1、求任意两个数的和
    function sum1(x,y){
        return x + y;
    }
    var result = sum1(10,20);
    console.log(result);

    //2、求1-n之间数字的和
    function sum2(n){
        var sum = 0;
        for(var i = 0; i <= n; i++){
            sum += i;
        }
        return sum;
    }
    console.log(sum2(10));

    //3、求n-m之间数字的和
    function sum3(n,m){
        var sum = 0;
        for(var i = n; i <= m; i++){
            sum += i;
        }
        return sum;
    }
    console.log(sum3(10,20));

    //4、求n个数的最大值
    function max(){
        //通过arguments获取实参的值，本质是对象，其实是伪数组，数组才有length属性
        console.log(arguments);
        var max = arguments[0];
        for(var i = 0; i < arguments.length; i++){
            if(max < arguments[i]){
                max = arguments[i];
            }
        }
        return max;
    }
    console.log(max(71,42,53,99,21,43,56,69));

    //5、判断一个数是否是素数
    function prime(n){
        for(var i = 2; i < n; i++){
            if(n % i == 0){
                return n+"不是素数！";
            }
        }
        return n+"是素数！";
    }
    var number = parseInt(prompt("请输入一个数："));
    console.log(prime(number));

    //6、求一组数中最大值
    function max2(arr){
        var max = arr[0];
        for(var i = 0; i < arr.length; i++){
            if(max < arr[i]){
                max = arr[i];
            }
        }
        return max;
    }
    console.log(max2([45,69,35,28,33,28]));

    //7、求一组数中的平均值

    //8、通过函数实现数组翻转

    //9、通过函数实现冒泡排序
    function sort(arr){
        //控制比较的轮数
        for(var i = 0;i < arr.length - 1; i++){
            //控制每一轮的比较次数
            for(var j = 0; j < arr.length - 1; j++);
            if(arr[j] > arr[j + 1]){
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
        return arr;
    }
    console.log(sort([50,19,10,5,100,99]));

    //10、求一个数的阶乘
    function jc(num){
        var result = 1;
        for(var i = 1; i <= num; i++){
            result *= i;
        }
        return result;
    }
    console.log(jc(5));

    //11、求一个数的阶乘和 => 5的阶乘和 = 5! + 4! + 3! + 2! + 1!
    function jcSum(num){
        var sum = 0;
        for(var i = 1;i <= num; i++){
            //函数内可以调用其它函数
            sum += jc(i);
        }
        return sum;
    }
    console.log(jcSum(5));

   // //小例子
   //  function f1(){
   //      console.log("f1函数");
   //  }
   //  function f2(){
   //      console.log("f2函数");
   //      f1();
   //  }
   //  f2();

    //12、求斐波那契数列(Fibonacci sequence)中的第n个数是多少？
    function fib(){
        var num1 = 1,num2 = 1;
        var sum = 0;
        for(var i = 3; i <= num; i++){
            sum = num1 + num2;
            num1 = num2;
            num2 = sum;
        }
        return sum;
    }
    console.log(fib(12));
</script>
</body>
</html>
函数案例：输入某年某月某日，判断这一天是这一年的的第几天？
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的案例</title>
</head>
<body>
<script>
    //输入某年某月某日，判断这一天是这一年的的第几天？

    //封装函数：判断是否是闰年
    function isYear(year){
        //写法一：
        // if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
        //     return true;
        // }
        //写法二：
        return year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
    }

    //2019年5月9日
    function Day(year,month,day){
        //储存对应的天数
        var days = day;
        //假设用户输入的是1月，直接返回天数
        if (month == 1){
            return days;
        }
        //如果执行到这里，说明用户输入的不是1月
        var arr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
        for(var i =0; i < month - 1; i++){
            days += arr[i];
        }
        return days;
        //是否是闰年,并且月份超过2月份才考虑
        if(isYear(year) && month > 2){
            days++;
        }
    }
    console.log(Day(2019, 5, 9));
</script>
</body>
</html>
Sherry Lupus
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS基础整理—No.07】函数柯里化
Chailo的博客
11-22 1143
柯里化的官方解释：把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数。
JavaScript_函数 ——恋天小结
xiao_yi_8421的博客
08-18 156
函数 函数的命名 1.由字母、数字、下划线、$符号组成，不能以数字开头 2.不能是关键字和保留字，例如：for,while,this, name 3.区分大小写 规范： 1.变量名必须有意义 2.遵守驼峰命名法 3.建议不要用$作为变量名 函数的覆盖问题 函数重复定义会覆盖前一个 arguments的使用 JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。ar
js（五）——ECMAScript基础之函数
C-A-L-D
02-03 317
函数的定义 函数声明 function 函数名(){ // 函数体 } 函数表达式 var fn = function() { // 函数体 } 特点： 函数声明的时候，函数体并不会执行，只要当函数被调用的时候才会执行。 函数一般都用来干一件事情，需用使用动词+名词，表示做一件事情 tellStory sayHello等 函数体只有在调用...
js函数
qq_41293573的博客
08-11 210
函数 函数命名方法 （1）function命令： function print(){ console.log(s); } （2）函数表达式： var print=function(){ console.log(s); } （3）function构造函数： var add=new Function(‘x’, ‘y’,‘return x+y’); 等同于 function add(x,y){ retu...
Web前端学习笔记——JavaScript之对象
唯恋殊雨的博客
09-21 823
对象 为什么要有对象 function printPerson(name, age, sex....) { } // 函数的参数如果特别多的话，可以使用对象简化 function printPerson(person) { console.log(person.name); …… } 什么是对象 现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。 举例： 一部...
函数重要知识点
weixin_30455365的博客
07-29 114
#函数 ##函数的作用 1.代码的复用 2.分工 ##创建函数 1.声明式函数function fn(){} 2.函数表达式let test = function(){}//test相当于函数名 ##调用函数 函数名();//fn();test(); ##函数的返回值 1）用return获取函数的返回值，再用let声...
NoSleep.js：防止显示睡眠并在任何Android或iOS Web浏览器中启用唤醒锁定
02-01
防止显示睡眠并在所有Android和iOS Web浏览器中启用唤醒锁定。 在任何Android或iOS网络浏览器中查看。 安装 该库可在以nosleep形式获得。 bower install nosleep 该软件包以nosleep.js的形式发布到npm，可以通过...
Javascript中的匿名函数与封装介绍
10-24
JavaScript 中的匿名函数与封装是前端开发中经常使用到的概念，它们在维护代码库的清晰度和防止变量污染方面发挥着重要作用。下面将详细介绍这些概念，以及jQuery、Backbone和Underscore等库是如何实现封装的。 ...
JavaScript AJAX之惰性载入函数
10-25
Ajax（Asynchronous JavaScript and XML）是Web开发中用于创建动态网页的技术，允许页面在不刷新的情况下与服务器进行数据交换。 在传统的Ajax实现中，每次调用Ajax函数时，都需要检测浏览器是否支持XMLHttpRequest...
常用Web开发脚本.doc
12-22
### 常用Web开发脚本知识点解析 #### 一、去字符前后空格方法 `String.prototype.trim` 在Web开发中，我们经常会遇到需要去除字符串前后空格的情况。JavaScript 提供了一个内置的方法 `trim()` 来实现这一功能，但...
js调试
weixin_45615623的博客
09-23 226
调试 alert() console.log()调试方式** debug-断点调试** 步骤 f12 —>source —>需要调试的文件 --> 设置断点 ​ watch:监视变量 ​ f10：程序单步执行 ​ f8: 跳到下个断点 数组的概念 所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。 数组...
【前端系列教程之JavaScript】05_JavaScript函数详解
波哩个波的博客
12-16 587
JavaScript函数 为什么要有函数? 如果要在多个地方求1-100之间所有数的和，应该怎么做？ JavaScript函数的定义 函数概念 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。通俗来讲：把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名）。 函数的作用就是封装一段代码，将来可以重复使用 函数就是包裹在花括号中的代码块： 函数语法 函数声明 fun...
JavaScript基础知识笔记（四）——共六部分
mingzi1245的博客
05-06 248
1.arguments的使用 JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此可以进行遍历 2.函数其它 （1）匿名函数 匿名函数：没有名字的函数 匿名函数如何使用： 将匿名函数赋值给一个变量，这样就...
2017、2018面试分享（js面试题记录）记得点赞分享哦；让更多的人看到~~
weixin_34032827的博客
03-19 2209
2017面试分享（js面试题记录） 1. 最简单的一道题 '11' * 2 'a8' * 3 var a = 2, b = 3; var c = a+++b; // c = 5 2. 一道this的问题 var num = 10; var obj = { num:8, ...
每日一题（五一）function fn(n,o){console.log(o)return {fn:function(m){return fn(m,n)}}} const a=fn(0)a.fn(1
MFWSCQ的博客
06-10 2027
写出代码打印结果 function fn(n,o){ console.log(o); return { fn:function(m){ return fn(m,n); } }; } const a=fn(0);a.fn(1);a.fn(2);a.fn(3); const b=fn(0).fn(1).fn(2).fn(3); const c=fn(0).fn(1);c.fn(2);c.fn(3); ...
js问题(3)
qq_40708840的博客
11-10 1103
31.Void(0)的作用是什么？ Void(0)用于防止页面刷新，并在调用时传递参数"zero" Void(0) 用于调用另外一种方法而不刷新页面 32.箭头函数和普通函数的区别 箭头函数是匿名函数不能作为构造函数，不能使用new操作符 箭头函数不绑定arguments获取实参的类数组，取而代之的是es6中的rest参数也就是…表示的拓展运算符解决 function fn1(x){ console.log(arguments) } var fn2=(...x)=>{ cons
JavaScript知识总结
08-25 229
1 基础介绍 1.1 JavaScript 是一种具有面向对象的，解释型的程序设计语言 1.2 作用验证发往服务器端的数据，增加web互动，加强用户体验度等 1.3 JavaScript的组成； ECMAScript 核心语法 BOM 浏览器对象模型 DOM 文档对象模型 1.4 js的基础使用方式 1.4.1行内js：js代码定义在HTML元素标签上 1.4.2内部js：通过script标签dui定义在html中 1.4.3外部js；定义在外部的一个js文件中，通过script标签对引入 一个scrip
JavaScript的5种调用函数的方法
javazhuanzai的专栏
01-15 565
====================================================== 注：本文源代码点此下载 ====================================================== 这篇文章详细的介绍了javascript中各种函数调用的方法及其原理,对于理解javascript的函数有很大的帮助! javascript,调
【Web】JavaScript（No.48）for循环案例（三）本金计算
Sherry带你学Web
08-12 1937
需要素材点击图片联系我或私信、评论 需求：本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>本金计算</titl...
JavaScript面向对象详解：对象与构造函数
JavaScript是一种强大的、动态类型的脚本语言，尤其在Web开发中占据核心地位。它虽然没有像Java或C++那样明确的类定义，但同样支持面向对象编程（OOP）的概念。本节主要探讨JavaScript中的面向对象特性，包括对象的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值