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("
"); } 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}秒`);

你可能感兴趣的:(Js04天---函数)