Js04天---函数

函数具有封装以及复用的特点

function,是被设计为执行特定任务的代码块
函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。
函数声明的语法:
function 函数名 () {
函数体代码块
(函数的功能代码都要写在函数体当中。)
}

注意:函数声明后会被自动放到script标签的最上方
函数名的命名规则:

函数名命名规范
和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议:常用动词约定

命名了函数怎么去调用呢?
函数名();即可调用函数
命名了函数不调用函数是看不到效果的,必须要调用函数才能看到函数的运行结果。

函数传参

若函数完成功能需要调用者传入数据,那么就需要用有参数的函数
这样可以极大提高函数的灵活性
参数写在()內,多个参数间要用英文逗号隔开

形参: 声明函数的时候,在小括号内部定义的变量,实际执行效果,相当于声明了变量但变量没赋值

实参: 函数执行的时候,在小括号内部传递的数据,相当于执行了赋值操作

怎么样让函数传参呢?

    let sum = 0;
    function getSum(a, b) {//此处的a、b分别为参数一,参数二
      // 开始数设置为a,循环次数设置为b
      for (let i = a; i <= b; i++) {
        sum += i;
      }
      document.write(sum)
    }
    getSum(6, 300)//此处把a=6,b=300传入函数中了
逻辑中断,取默认值的技巧
    function getSum(x, y) {
      // 逻辑中断: 逻辑或的技巧---取默认值
      // 1. 当 y 没传实参时, 默认值为 undefined
      // 2. undefined || 0 ;   前为逻辑假,返回后面的值 0
      // 3. 相当于 y = 0 ; 设置了默认值
      x = x || 0;
      y = y || 0;
      document.write(x + y);
    }
    getSum(1);

案例:求学生总分

let scores = [231, 4, 235, 3, 6, 456, 5, 7];
    let scores2 = [1, 44, 235, 32, 6, 124, 512, 7];
    let scores3 = [155, 44, 28, 32, 62, 2, 512, 57];
    function getTotalScore(studentList) {
      let total = 0;
      for (let i = 0; i < studentList.length; i++) {
        total += studentList[i];
      }
      document.write(total);
      document.write("</br>");
    }
    getTotalScore(scores);
    getTotalScore(scores2);
    getTotalScore(scores3);
函数返回值

有返回值函数的概念:
当调用某个函数,这个函数会返回一个结果出来,这就是有返回值的函数
用return返回数据
当函数需要返回数据出去时,用return关键字
语法:return 数据;
细节注意点:
1.在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
2.函数内部只能运行到 1 次 return,并且 return 后面代码不会再被执行,所以 return 后面的数据不要换行写
3.return会立即结束当前函数
4.函数可以没有 return,这种情况函数默认返回值为 undefined
return案例:

    // 任意两个数比较最大值
    // 因为是任意两个数,有动态值,应该声明两个形参(可变的)
    function getMax(x, y) {
      // 用if判断x,y的值
      if (x > y) {
        // 如果x大于y则返回x的值
        return x;
      } else {
        // 否则返回y的值
        return y;
      }
    }
    console.log(getMax(5, 10));//10
    console.log(getMax(20, 11));//20
    console.log(getMax(12, 38));//38
作用域

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

作用域有三种
全局作用域:作用于所有代码执行的环境(整个 script 标签内部)或者多个 js 文件
局部作用域:作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
块级作用域:块作用域由 { } 包括,if语句和for语句里面的{ }等

根据作用域的不同,变量也分为全局变量、局部变量、块级变量
全局变量:全局变量在变量定义之后区域可以访问和修改
局部变量:局部变量只能在当前函数内部访问和修改
块级变量:let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问

变量作用域特殊情况:

  • 如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐
  • 函数内部的形参可以看做是局部变量,所以形参相当于函数内部定义的局部变量,只有在函数内部可以使用。
变量访问原则-作用域链

只要是代码,就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
作用域链遵循就近原则来查找变量最终的值

匿名函数:

将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式
语法:

let fn = function () {
   //函数体
};

调用:

fn();

使用场景:Web API阶段会用

立即执行函数

作用:防止全局变量污染
语法:

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

注意: 多个立即执行函数要用 ; 隔开,要不然会报错

转换时间案例:

    // 小时:  h =  parseInt(总秒数 / 60 / 60 % 24)
    // 分钟:  m = parseInt(总秒数 / 60 % 60 )
    // 秒数:   s  = parseInt(总秒数 % 60) 

    // 步骤一:用户输入总秒数
    let total = prompt("请输出总秒数")
    // 步骤二:计算时分秒
    let h = parseInt(total / 60 / 60 % 24),
      m = parseInt(total / 60 % 60),
      s = parseInt(total % 60);

    // 步骤三:函数封装并输出格式化
    function normalize(num) {
      // 三元表达式(双分支)
      return num < 10 ? `0${num}` : num;
    };

    // 步骤四:函数调用以及复用
    h = normalize(h);
    m = normalize(m);
    s = normalize(s);

    // 步骤五:页面输出
    document.write(`${total}秒转换为${h}时${m}分${s}秒`);
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容