JavaScript基础第四天_js 回写-CSDN博客

本文链接：https://blog.csdn.net/weixin_68531033/article/details/124090828

函数 function

被设计为执行特定任务的代码块

有利于简洁代码重复使用

 <script>
    声明 
   function 函数名(){
     函数体
   }
   调用函数
   函数名()

  function sayHi(){
    console.log('Hi');
  }
  sayHi()
  sayHi()
  // 调用几次显示几次
  </script>

参数

通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。

声明（定义）一个功能为打招呼的函数

传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>

  <script>
    // 声明（定义）一个功能为打招呼的函数
    // function sayHi() {
    //   console.log('嗨~')
    // }
    // 调用函数
    // sayHi()
	

    // 这个函数似乎没有什么价值，除非能够向不同的人打招呼
    // 这就需要借助参数来实现了
    function sayHi(name) {
      // 参数 name 可以被理解成是一个变量
      console.log(name)
      console.log('嗨~' + name)
    }

    // 调用 sayHi 函数，括号中多了 '小明'
    // 这时相当于为参数 name 赋值了
    sayHi('小明')// 结果为 小明

    // 再次调用 sayHi 函数，括号中多了 '小红'
    // 这时相当于为参数 name 赋值了
    sayHi('小红') // 结果为 小红
  </script>
</body>
</html>

函数求和案例

 <script>
    // function 函数名(传参列表){
    //   // 函数体
    // }
    function getSum(start=0,end=0){
      //形参
      let sum =0
      for(let i=start;i<=end;i++){
        sum +=i
      }
      console.log(sum);
    }
      // 函数的传参本质就是赋值的过程 实参给形参
    // 开发过程中实参尽量和形参保持一致
    getSum(1,50)//实参
  // 调用函数时写在函数名右边括号里的是实参
   // 声明函数时写在函数名右边括号里的是形参

    // 函数求和
    function getSum1 (num1=0 ,num2=0){
      console.log(num1 +num2);
    }
    getSum1 (1,2)
    
  </script>

参数默认值

 <script>
   /*  // 形参可以看作是变量如果变量不赋值 得到的结果就是undefined
    function getSum2(x=0,y=0){
     console.log(x+y);
    }
    // getSum2(10,20)
    getSum2()
  //  实参不赋值的到NaN  */
  function getSum(arr=[]){
  let sum =0
  for(let i=0;i<arr.length;i++){
    sum =sum+arr[i]
  }
  console.log(sum);
  }
  getSum([1,2,3,4,5])
  </script>

实参可以是变量

  <script>
    let sum=0
    function getSum(n=0,m=0){
 for(let i=n;i<=m;i++){
sum =sum+i
 }
 console.log(sum);
    }
    let num1=+prompt('请您输入第一个数')
    let num2=+prompt('请您输入第二个数')
    getSum(num1,num2)//实参可以是变量
  </script>

返回值

在函数体中使用return 关键字能将内部的执行结果交给函数外部使用

函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写

return会立即结束当前函数

函数可以没有return，这种情况默认返回值为 undefined

 <script>
    function getMax(x,y){   
  return x>y ? x:y
    }
  let max=getMax(1,2)
  console.log(max);
  </script>

求任意数组最大值案例

<script>
    // 求任意两个数之间的最大值
function getSum(x=0,y=0){
 
  if(x>y){
    return x
  }else{
return y
  }
}
//  let num1=+prompt('请输入第一个值')
//   let num2=+prompt('请输入第二个值')
// let res =getSum(num1,num2)
let res =getSum(1,2)
console.log(res);
// 求任意数组里最大值
// 声明函数
function getArrMax(arr=[]){
  // 声明最大值
let max=arr[0]
// 遍历数组
for(let i=1;i<arr.length;i++){
  // 条件判断
  if(max<arr[i]){
    max=arr[i]
  }
}
return max //for循环外
}
let max1= getArrMax([50,40,30,80,90,45,31,12])
console.log(max1);

  </script>

求任意数组的最大值和最小值

<script>
// 求任意数组的最大值和最小值并返回
//声明函数
function getNewArr(arr=[]){
let max=arr[0]
let min=arr[0]
for(let i=1;i<arr.length;i++){
  if (max <arr[i]){
  max=arr[i]
  }
  if(min>arr[i]){
    min=arr[i]
  }
}
return [max,min]//返回值
}
let res1= getNewArr([50,40,30,80,90,45,31,12])
console.log(`最大值是${res1[0]}`);
console.log(`最小值是${res1[1]}`);
</script>

函数的调用细节

<script>
    // return内部不需要输出结果,而是返回结果
    //简单理解函数返回值 函数内部不需要输出,需要返回一个结果给他人使用
    // return返回结果 定义一个变量名存储结果 输出这个变量名即可
    function fn(){
      return 20
    }//相当于执行了fn()=20
  //只有函数遇到return 就会把后面的结果返回给调用者函数名()=return后面的数据
  let res =fn() //存储 fn()结果,便于使用
  console.log(res);//实际开发中规范写法
    // console.log(fn());

    // 函数返回值细节注意事项
    function getSum1 (num1=0 ,num2=0){
      return num1+num2
    }
    let res1=getSum1(1,2)
    console.log(res1);
    //return后面的代码不会执行
    //return后面的代码不要换行 否则会返回undefined
    // 3.return可以没有但是默认情况下会返回undefined

    function getSum1 (x ,y){
      return x+y
    }
    let res2=getSum1(1,2)
    console.log(res1);
    // 执行流程
    // (1)先执行传参,将实参数值传参给形参
      //  (2)函数体
      // (3)返回值 函数的调用者
  </script>

函数细节

<script>
    //1. 函数名相同后面的会覆盖前面的
    function fn(){
      console.log(111);
    }
  fn()
function fn(){
      console.log(222);
    }
  fn()
  // (2)参数 不一致
 function getSum1 (x ,y){
  console.log(x+y);
    }
    // 2.1 实参有多余形参 剩余的参数不参与运算
    // getSum1(1,2,3)
// 2.2少于
// getSum1(1)//1+undefined =NaN
    getSum1(1,2)
  </script>

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

处于全局作用域内的变量，称为全局变量

 <script>
    // 全局变量在任何区域都可以访问
    // 1.全局作用域 对函数外部或者整个script有效
   num=10 //全局变量
    function fn(){
      fn()
    }
console.log(num);
// 2.局部作用域
// 局部变量只能在当前函数访问
function fn(){
  let str='张三'
  
}
fn()
console.log(str);//undefined 不能访问

let num=20 
    function fn(){
      let num=10 
      console.log(num);//10
    }
    fn()

   // 访问原则 在能够访问到的情况下 先局部局部没有在找全局
  //  就近原则 先局部后全局
  </script>

局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

处于局部作用域内的变量称为局部变量

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

匿名函数

函数可以分为具名函数和匿名函数

匿名函数：没有名字的函数,无法直接使用。

<script>
    //具名函数调用可以写到任意位置
    //匿名函数必须先声明函数表达式后调用
    //匿名函数 函数表达式
    let fun= function(x,y){
      // console.log('我是匿名函数');
      console.log(x+y);
    }
    //调用
    fun(2,3)
  </script>

立即执行函数

(function(){ xxx  })();
(function(){xxxx}());
<script>
    //立即执行函数,就是为了避免全局污染
    // 多个执行分号隔开
    // (function(){
    //   console.log(111);
    // })();
   /* (function(){
      let num =10
    })();
    (function(){
      let num =20
    })() */
    // 第一种写法
    (function (x,y){
      console.log(x+y);
      let  num =30
      let arr=[]
    })(1,2);
    //第二种写法
    (function(x,y){
      console.log(x+y);
      let  num =30
      let arr=[]
    }(4,6)) 
  </script>

逻辑中断

// 逻辑与短路
// 如果表达式1 结果为真则返回表达式2
// 如果表达式1 结果为假则直接返回表达式1

// 逻辑或短路
// 如果表达式1 结果为真则返回表达式1
// 如果表达式1 结果为假则直接返回表达式2

<script>
  // 逻辑与 短路
    // 如果表达式1 结果为真 则返回表达式2 
    // 如果表达式1 结果为假 则直接返回表达式1
    console.log(33&&66);//66
    console.log(false &&123);//false
    // 逻辑或 短路
     // 如果表达式1 结果为真 则返回表达式1
    //  如果表达式1 结果为假 则直接返回表达式2
    console.log(123||456);//123
    console.log(false ||123 ||456);//123
  </script>

计算剩余时间案例

 <script>
    // 用户输入一个数
    let second =+prompt('请您输入一个值')
    // 函数封装
    function getTime(t){
   let d= parseInt(t / 60 / 60 /24 );
   let h = parseInt(t / 60 / 60 % 24 ); //计算剩余的小时 
   let m = parseInt(t  / 60 % 60);//计算剩余的分钟 
   let s = parseInt(t  % 60);//计算剩余的秒数
    d=d<10? '0'+h:h  //三元运算符判断
    h= h<10 ? '0'+h :h 
    m= m<10 ? '0'+m :m 
    s= s<10 ? '0'+s :s 
    return `转换离毕业之后是${d}天${h}小时${m}分${s}秒`
   }
   let res= getTime(second)
console.log(res);
  </script>