JS(第九课)深刻的去理解函数.(一)-阿里云开发者社区

JS(第九课)深刻的去理解函数.(一)

2023-07-16 86

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JS(第九课)深刻的去理解函数.(一)

进行复习案例一对上面之前讲过的函数进行复习

// 函数的声明
function one(){
//函数调用成功后再控制台打印出下面的语句
    console.log("我是的第一个函数")
}
//函数的调用
one();
function two(name){
    console.log("我是一个带有名字的参数")
}
two("我是一个带有名字的参数")
function three(){
    console.log("我是一个没有调用的函数")
}
//声明了函数没有去调用不会执行
function five(){
    for(var i=1;i<=5;i++){
       document.write("我是一个遍历的函数"+"<br>")
    }
}
 five()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 函数的声明中要调用函数不去调用函数 函数不会输出结果的 
        function one(){
            console.log("我是的第一个函数")
        }
        one();
        function two(name){
            console.log("我是一个带有名字的参数")
        }
        two("我是一个带有名字的参数")
        function three(){
            console.log("我是一个没有调用的函数")
        }
        function five(){
            for(var i=1;i<=5;i++){
               document.write("我是一个遍历的函数"+"<br>")
            }
        }
         five()  
    </script>
</body>
</html>

如果让你想到函数的作用时你能想到那些函数呢！我能想到了函数在下面哦

// f(x)=x

// f(x)=ax^2+bx+c

// f(x)=sinx

// f(x)=cosx

// f(x)=tanx

// f(x)=x^3

// 值声明没有去调用

// function sayhi(){

// console.log("HEllow world")

// }

// sayhi();

// f(x)=2x+3

// f(1)=2*1+3

// f(2)=2*2+3

// f(3)=2*3+3

// f(4)=2*4+3

接下来我们对函数换种方式下面的函数功能是实现 1到100的求和

 function sum() {
     var sum = 0
     for (var i = 10; i <= 20; i++) {
         console.log(i)
         sum += i
         console.log(sum)
     }
 }

 function sum() {
     var sum = 0
     for (var i = 10; i <= 20; i++) {
         console.log(i)
         sum += i
         console.log(sum)
     }
 }

函数的返回值 return

  function sum1(x, y, z) {
      var aa = x * y * z;
      console.log("用户打印出"+aa)
      return aa;
  }
  function sum2(x, y, z) {
      var bb = x + y + z;
      alert(bb)
      console.log("用户打印出"+bb)
      return bb;
  }
  function hs(a){
      console.log(1+a);
      console.log(a-1)
      return a;
  }
  hs(123)
 function sum(n){
     console.log(n*n*Math.PI.toFixed(2))
 }
 function sumM(n){
     var num=0;
     for(i=1;i<=n;i++){
         num+=i
     }
     return num
 }
 function  symText(n){
     if(n>100000000){
         return (n/100000000).toFixed(2)+'亿'
     }else if(n>10000){
         return (n/10000).toFixed(2)+'万'
     } else{
         return n;
     }
 }

运行结果自己可以看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 函数的变量名 -->
    <!-- foo bar baz  -->
    <script>
        function sum() {
            var sum = 0
            for (var i = 10; i <= 20; i++) {
                console.log(i)
                sum += i
                console.log(sum)
            }
        }
        function sum1(x, y, z) {
            var aa = x * y * z;
            console.log("用户打印出"+aa)
            return aa;
        }
        function sum2(x, y, z) {
            var bb = x + y + z;
            alert(bb)
            console.log("用户打印出"+bb)
            return bb;
        }
        function hs(a){
            console.log(1+a);
            console.log(a-1)
            return a;
        }
        hs(123)
        function sum(n){
            console.log(n*n*Math.PI.toFixed(2))
        }
        function sumM(n){
            var num=0;
            for(i=1;i<=n;i++){
                num+=i
            }
            return num
        }
        function  symText(n){
            if(n>100000000){
                return (n/100000000).toFixed(2)+'亿'
            }else if(n>10000){
                return (n/10000).toFixed(2)+'万'
            } else{
                return n;
            }
        }
    </script>
    <input type="submit" value="求和" onclick="sum()">
</body>
</html>

思考下下面的代码执行顺序自己思考一下？

 function chuko() {
        alert("这是程序的出口")
    }
    function a() {
        chuko();
    }
    function b() {
        a();
    }
    function c() {
        b();
    }
    function d() {
        alert("程序的入口")
        c();
    }
    // 调用的出口
    d()

全局变量和局部的变量在JS中页常看到的那么如何去区分呢？下面的案例带你去了解

<!-- 全局变量和局部变量 -->
<script>
    var aaa = "我是全局变量";
    function names() {
        var bbb = "这是局部的变量";
        document.write(aaa + "<br>")
        document.write(bbb)
    }
    names();
    document.write(aaa + "<br>")
    // document.write(bbb)
</script>

函数的参数你们是如何理解的呢！接下来这个案例带你了解什么是参数?下面是html结构图

 <input type="button" onclick="asd('小明','56')" value="转入了两个参数" />
 <input type="button" onclick="asd1('小胡','37','男')" value="转入三个参数" />
 <button type="button" onclick="asd2('小兵','20','女','19756743456')">转入四个参数</button>
 <button type="button" onclick="asd3('小王','67','女','18978654567','南昌市')">转入五个参数</button>
 <button type="button" onclick="sex('小红','27','女','18978654567','南昌市','360429200010090878')">转入六个参数</button>
 <button type="button" onclick="asd('成功成名','17')">成功成名</button>
 <button onclick="myFun()">无参数的构造方法</button>

/* 转入两个参数 */

function asd(name, age) {
      alert("姓名:" + name + "年龄:" + age + "岁");
      console.log("姓名:" + name + "年龄:" + age + "岁")
      // document.write("姓名:" + name + "年龄:" + age + "岁");
  }

/* 转入三个参数 */

 function asd1(name, age, sex) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex);
      console.log("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex)
      // document.write("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex);
  }

/* 转入四个参数 */

  function asd2(name, age, sex, phone) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone);
      console.log("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone)
      // document.write("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone);
  }

/* 转入五个参数 */

function asd3(name, age, sex, phone, address) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address);
      console.log("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address)
      // document.write("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address);
  }

/* 转入六个参数 */

  function sex(name, age, sex, phone, address, shengfengzheng) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng);
      console.log()
      document.write();
  }

// 转入的第七个参数

 function seven(name, age, sex, phone, address, shengfengzheng, A) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng + "属性" + A);
  }

// 转入的第八个参数

 function seven(name, age, sex, phone, address, shengfengzheng, A, B) {
     alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng + "属性" + A + "动作" + B);
 }

// 转入的第九个参数

   function seven(name, age, sex, phone, address, shengfengzheng, A, B, C, D) {
       alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng + "属性" + A + "动作" + B + "未知" + C + "睡觉" + D);

// 转入的第十一个参数

 function seven(name, age, sex, phone, address, shengfengzheng, A, B, C, D,E) {
     alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng + "属性" + A + "动作" + B + "未知" + C + "睡觉" + D+"标号"+E);
 }

参数的总结:myFun() 红色挂号中有几个参数在函数的调用中的函数中的()中要有几个参数值

function myFun(a,b,c,d,e,f,g,h,i,j,k,l...) {}

myFun(a,b,c,d,e,f,g,h,i,j,k,l...) 绿色标记的所有位置都是一对一的关系不能错位

JS(第九课)深刻的去理解函数.(一)

进行复习案例一对上面之前讲过的函数进行复习

函数的返回值 return

运行结果自己可以看一下

思考下下面的代码执行顺序自己思考一下？

全局变量和局部的变量在JS中页常看到的那么如何去区分呢？下面的案例带你去了解

函数的参数你们是如何理解的呢！接下来这个案例带你了解什么是参数?下面是html结构图

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JS(第九课)深刻的去理解函数.(一)

进行复习案例一 对上面之前讲过的函数进行复习

函数的返回值 return

运行结果自己可以看一下

思考下下面的代码执行顺序 自己思考一下？

全局变量和局部的变量在JS中页常看到的 那么如何去区分呢？下面的案例带你去了解

函数的参数你们是如何理解的呢！接下来这个案例带你了解什么是参数?下面是html结构图

热门文章

最新文章

相关课程

相关电子书

相关实验场景

进行复习案例一对上面之前讲过的函数进行复习

思考下下面的代码执行顺序自己思考一下？

全局变量和局部的变量在JS中页常看到的那么如何去区分呢？下面的案例带你去了解