当前位置:网站首页 > Vue.js开发 > 正文

auto.js全局变量(js设置全局变量并赋值)



目录

 

一、前言

二、作用域

1.局部作用域

2.全局作用域

三.作用域链

 四、闭包

五、变量提升

六、函数 

1.函数提升

 2.函数参数

默认值

动态参数 

剩余参数

3.箭头函数

箭头函数参数

箭头函数 this

4.解构赋值

数组解构

对象解构

七、综合案例

1.forEach遍历数组

2.filter筛选数组


  在本章博客中,我们将学习理解作用域对程序执行的影响,能够分析程序执行的作用域范围,理解闭包本质,利用闭包创建隔离作用域,了解什么变量提升及函数提升,掌握箭头函数、解析剩余参数等简洁语法。

了解作用域对程序执行的影响及作用域链的查找机制,使用闭包函数创建隔离作用域避免全局变量污染。

作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问,作用域分为全局作用域和局部作用域。

1.局部作用域

(1).函数作用域

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

 

 总结:

  1. 函数内部声明的变量,在函数外部无法被访问
  2. 函数的参数也是函数内部的局部变量
  3. 不同函数内部声明的变量无法互相访问
  4. 函数执行完毕后,函数内部的变量实际被清空了

(2).块作用域

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

 

JavaScript 中除了变量外还有常量,常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】,常量值为对象时其属性和方法允许重新赋值  

 

总结:

  1. 声明的变量会产生块作用域, 不会产生块作用域
  2. 声明的常量也会产生块作用域
  3. 不同代码块之间的变量无法互相访问
  4. 推荐使用 或

注:开发中 和 经常不加区分的使用,如果担心某个值会不小被修改时,则只能使用 声明成常量。  

2.全局作用域

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

 

 全局作用域中声明的变量,任何其它作用域都可以被访问,如下代码所示:

 

总结:

  1. 为 对象动态添加的属性默认也是全局的,不推荐!
  2. 函数中未使用任何关键字声明的变量为全局变量,不推荐!!!
  3. 尽可能少的声明全局变量,防止全局变量被污染

JavaScript 中的作用域是程序被执行时的底层机制,了解这一机制有助于规范代码书写习惯,避免因作用域导致的语法错误。  

 

 函数内部允许创建新的函数, 函数内部创建的新函数 ,会产生新的函数作用域,由此可知作用域产生了嵌套的关系。

如下图所示,父子关系的作用域关联在一起形成了链状的结构,作用域链的名字也由此而来。

作用域链本质上是底层的变量查找机制,在函数被执行时,会优先查找当前函数作用域中查找变量,如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域,如下代码所示:

 

总结:

  1. 嵌套关系的作用域串联起来形成了作用域链
  2. 相同作用域链中按着从小到大的规则查找变量
  3. 子作用域能够访问父作用域,父级作用域无法访问子级作用域。

内层函数+外层函数变量

闭包是一种比较特殊和函数,使用闭包能够访问函数作用域中的变量。从代码形式上看闭包是一个做为返回值的函数,如下代码所示:

 

总结:

1.怎么理解闭包?

  • 闭包 = 内层函数 + 外层函数的变量

2.闭包的作用?

  • 封闭数据,实现数据私有,外部也可以访问函数内部的变量
  • 闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来

3.闭包可能引起的问题?

  • 内存泄漏

变量提升是 JavaScript 中比较“奇怪”的现象,它允许在变量声明之前即被访问,

 

 总结:

  1. 变量在未声明即被访问时会报语法错误
  2. 变量在声明之前即被访问,变量的值为
  3. 声明的变量不存在变量提升,推荐使用
  4. 变量提升出现在相同作用域当中
  5. 实际开发中推荐先声明再访问变量

1.函数提升

函数提升与变量提升比较类似,是指函数在声明之前即可被调用。

 

总结:

  1. 函数提升能够使函数的声明调用更灵活
  2. 函数表达式不存在提升的现象
  3. 函数提升出现在相同作用域当中

 2.函数参数

默认值
 

总结:

  1. 声明函数时为形参赋值即为参数的默认值
  2. 如果参数未自定义默认值时,参数的默认值为
  3. 调用函数时没有传入对应实参时,参数的默认值被当做实参传入
动态参数 

是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参。

 

总结:

  1. 是一个伪数组
  2. 的作用是动态获取函数的实参
剩余参数
 

总结:

  1. 是语法符号,置于最末函数形参之前,用于获取多余的实参
  2. 借助 获取的剩余实参,是个真数组

3.箭头函数

 箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上。

 

总结:

  1. 箭头函数属于表达式函数,因此不存在函数提升
  2. 箭头函数只有一个参数时可以省略圆括号
  3. 箭头函数函数体只有一行代码时可以省略花括号 ,并自动做为返回值被返回
箭头函数参数

箭头函数中没有 ,只能使用 动态获取实参

 
箭头函数 this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

 

4.解构赋值

解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法,如下代码所示:

 

总结:

  1. 赋值运算符 左侧的 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作
  3. 变量的数量大于单元值数量时,多余的变量将被赋值为
  4. 变量的数量小于单元值数量时,可以通过 获取剩余单元值,但只能置于最末位
  5. 允许初始化变量的默认值,且只有单元值为 时默认值才会生效
对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法,如下代码所示:

 

总结:

  1. 赋值运算符 左侧的 用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
  2. 对象属性的值将被赋值给与属性名相同的变量
  3. 对象中找不到与变量名一致的属性时变量值为
  4. 允许初始化变量的默认值,属性不存在或单元值为 时默认值才会生效
 

1.forEach遍历数组

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数

注意:

1.forEach 主要是遍历数组

2.参数当前数组元素是必须要写的, 索引号可选。

 

2.filter筛选数组

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

主要使用场景: 筛选数组符合条件的元素,并返回筛选之后元素的新数组

 

到此这篇auto.js全局变量(js设置全局变量并赋值)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • ip1921681001登录入口(登入ip192.168.1.1)2025-03-17 22:54:06
  • docker-ce版本(docker1.7.1)2025-03-17 22:54:06
  • pcie5.0固态硬盘推荐(pcie50固态硬盘推荐)2025-03-17 22:54:06
  • vue2项目升级为vue3项目(vue项目怎么升级依赖版本)2025-03-17 22:54:06
  • vb6.0名词解释大全(vb的名词解释)2025-03-17 22:54:06
  • 天气预报接口调用方法js(js获取天气预报接口)2025-03-17 22:54:06
  • vue钩子函数(Vue钩子函数有哪些)2025-03-17 22:54:06
  • 插槽vue使用(vue3插槽)2025-03-17 22:54:06
  • jsj啥意思(jsjl是什么意思)2025-03-17 22:54:06
  • vue安装教程(vue3.0怎么安装)2025-03-17 22:54:06
  • 全屏图片