持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

作用域

作用域简单理解就是一个变量在js代码中能够被调用的位置.作用域分为局部作用域和全局作用域

局部作用域

局部作用域又分为块作用域和函数作用域

函数作用域

在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。

<script>
  // 声明 counter 函数
  function counter(x, y) {
    // 函数内部声明的变量
    const s = x + y
    console.log(s) // 18
  }
  // 设用 counter 函数
  counter(10, 8)
  // 访问变量 s
  console.log(s)// 报错
</script>

块作用域

在 JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。

<script>
  {
    // num 只能在该代码块中被访问
    let num = 18;
    console.log(num); // 正常
  }
  
  // 超出了 num 的作用域
  console.log(num) // 报错
  
  let flag = true;
  if(flag) {
    // str 只能在该代码块中被访问
    let str = 'hello world!'
    console.log(str); // 正常
  }
  </script>

全局作用域

<script> 标签和 .js 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。

 <script>
  let num = 123
  function fn() {
   console.log(num)
  }
  fn()
 </script>
 <script src="../lod.js"></script>
 <script>
  console.log(num)
  console.log(num2)
 </script>

打印函数名和打印执行函数的区别

先说结论打印函数名返回的是整个函数体而打印执行函数返回的是函数运行的结果

<script>
  function fn() {
   console.log(111)
   function fn2() {
    console.log(222)
    return 333
   }
   console.log(fn2)

  }
  console.log(fn())
  //函数名返回函数体,执行函数返回结果
 </script>

剩余参数

函数接收实参时可以通过第二个形参前面加三个点的方式创建剩余参数,动态参数可以接收用户传过来的多个值

 <script>
  function getSum(group, ...arg) {
   console.log(arg)
  }
  getSum('第一组', 11, 22, 33, 44, 55)
  getSum('第二组', 66, 77, 88, 99, 77)
  getSum('第三组', 77, 22, 33, 44, 55)
  //第一个形参默认接收第一个实参,后面的剩余参数自动接收多余的值
 </script>

展开运算符

展开运算符格式与剩余参数相等,但作用相反.展开运算符把数组展开成参数序列

<script>
  let arr = [12, 13, 14, 15, 16]
  console.log(...arr)
  const num1 = Math.max(...arr)
  const num2 = Math.min(...arr)
  console.log(num1)
  console.log(num2)
  //原数组不会被修改,散开成参数序列
 </script>

js高级第一天

作用域