JavaScript进阶之作用域解构箭头函数

目录

    • 一、作用域
      • 1.1 局部作用域
      • 1.2 全局作用域
      • 1.3 作用域链
      • 1.4 垃圾回收机制
      • 1.5 闭包
      • 1.6 变量提升
    • 二、函数进阶
      • 2.1 函数提升
      • 2.2 函数参数
      • 2.3 箭头函数(重要)
    • 三、解构赋值
      • 3.1 数组解构
      • 3.2 对象解构(重要重要)

一、作用域

1.1 局部作用域

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

  1. 函数作用域
    • 在函数内部声明,外部无法访问
    • 函数的参数也是函数内部的局部变量
    • 不同函数内部声明的变量无法互相访问
    • 函数执行完毕后,内部变量被清空
  2. 块作用域
    在大括号内包裹的都是代码块,在代码块就叫块作用域,代码块内部生命的变量外部【有可能】无法被访问
    • let和const声明的变量会产生作用域,var不会
    • 不同代码块之间的变量无法互相访问

1.2 全局作用域

<script>标签和.js文件最外层就是全局作用域

  • 为window对象动态添加的属性默认是全局的
  • 函数中未使用关键字声明的变量为全局变量
  • 尽可能少的声明全局变量,防止变量污染

1.3 作用域链

作用域链的本质是底层的变量查找机制

  • 在函数被执行,会优先查找当前函数作用域中查找变量,如果找不到就会依次逐级查找父作用域直到全局作用域
  • 嵌套关系的作用域串联起来形成作用域链
  • 相同作用域链中按从小到大的规则查找变量
  • 子作用域能够访问父作用域,父作用域不能访问子作用域

1.4 垃圾回收机制

垃圾回收机制(Garbage Collection)简称GC
js中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收

  • 内存的生命周期
    1. 内存分配:当声明变量、函数、对象的时候系统会自动为他们分配内存
    2. 内存使用:即读写内存,也就是使用变量、函数等
    3. 内存回收:使用完毕,有垃圾回收器自动回收不再使用的内存
  • 说明:① 全局变量一般不会回收(关闭页面回收) ② 一般情况下局部变量的值不用了会自动回收
  • 内存泄漏:程序中分配的内存由于某种原因程序未释放无法释放叫做内存泄漏
  • 算法说明:
    堆栈空间分配的区别:
    1. 栈(操作系统):由操作系统自动分配释放函数的参数值、局部变量等,基本数据类型放到栈里面
    2. 堆(操作系统):一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收,复杂 数据类型放到栈里面
      常用垃圾回收算法:
    3. 引用计数法(现在很少使用):
      定义“内存不再使用”,就是看一个对象是否有指向它的引用,没有引用了就回收对象
      弊端:如果两个对象嵌套引用(即相互引用),尽管他们不再使用垃圾回收器也不会进行回收,导致内存泄漏
      在这里插入图片描述
    4. 标记清除法:
      核心:从根部扫描对象,能查找到的就是使用的,否则就要回收

1.5 闭包

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到外层函数的作用域
简单理解:闭包 = 内层函数 + 外层函数的变量(即在嵌套的函数中,内层函数引用到了外层函数的变量)
作用:封闭数据,实现数据私有,提供操作,外部也可以访问函数内部的变量
闭包的基本格式:在这里插入图片描述

弊端:闭包可能会导致内存泄露

1.6 变量提升

变量提升指在执行代码之前,把函数、变量、类或导入的声明移动到其作用域的顶部的过程(把var变量提升到当前作用域的最前面,只提升声明,不提升赋值
【注意】:① 变量在未声明即被访问时会报语法错误 ② 变量在var声明之前即被访问,变量的值为undefined ③ let/const声明的变量不存在变量提升,只有var声明的才会变量提升 ④ 变量提升出现在相同的作用域中 ⑤ 实际开发中推荐先声明在访问变量

二、函数进阶

2.1 函数提升

把所有函数声明提升到当前作用域前面,只提升声明,不提升调用
【总结】:① 函数提升使函数的声明调用更灵活 ② 函数表达式不存在提升的现象 ③ 函数提升出现在相同的作用域中

2.2 函数参数

  1. 动态参数
    arguments是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参
    eg:

    fucntion getSum() {let sum = 0for(let i = 0; i < arguments.length; i++) {sum += arguments[i]}console.log(sum)
    }
    getSum(1,2,3)
    

    【总结】:① arguments是一个伪数组,只存在于函数中 ② arguments的作用是动态获取函数的实参 ③ 可以通过for循环依次得到传递过来的实参

  2. 剩余参数
    剩余参数允许我们将一个不定量的参数表示为一个数组
    eg:

    fucntion getSum(...other) {console.log(other)
    }
    getSum(1,2,3)
    

    在这里插入图片描述

    【注意】:① …是语法符号,置于最末函数形参之前,用于获取多余的实参 ② 借助…获取的剩余实参,是个真数组 ③ 传参的时候使用…,使用的时候不用写… ④ …后面的名字随便写 ⑤ 推荐使用剩余参数

  3. 补充:展开运算符...
    可以展开数组,不会修改原数组
    eg:

    const arr = [1,2,3,4,5]
    console.log(...arr)  // 1 2 3 4 5
    

    应用:

    1. 求数组最大值 eg:Math.max(...arr)
    2. 合并数组 eg:const arr = [...arr1,...arr2]

2.3 箭头函数(重要)

语法更简洁,适用于写匿名函数的地方

  1. 基本语法:

    // 箭头函数
    const fn = () => {}
    fn()
    // 普通函数
    const fn = function () {}
    fn()
    

    【注意】:

    1. 如果函数题只有一行代码,可以写到一行上,并且无需写return直接写返回值即可
      在这里插入图片描述

    2. 如果只有一个参数,可以省略小括号

    3. 加括号的函数体返回对象字面量表达式
      在这里插入图片描述

  2. 箭头函数参数
    普通函数由arguments动态参数,箭头函数没有arguments动态参数,只有剩余参数

  3. 箭头函数this
    箭头函数中没有this,写在箭头函数中的this是上一层的作用域的this
    DOM事件回调函数需要用到this的时候不推荐使用箭头函数,DOM事件回调函数使用箭头函数的时候,this为全局的window

三、解构赋值

3.1 数组解构

数组解构时将数组的单元值快速批量赋给一系列变量的简介语法
基本语法:

  1. 赋值运算符 = 左侧的[]用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作
    eg:左侧[]中的abc均表示变量名
    在这里插入图片描述

应用:交换变量在这里插入图片描述

  1. 利用剩余参数可以解决变量少单元值多的问题
    在这里插入图片描述

  2. 防止传递undefined,可以设置默认值
    const [a='1',b='2']

  3. 按需导入,忽略某些返回值
    const [a, b, , d] = [1, 2, 3, 4]

  4. 支持多维数组

    const arr = [a, b, [c, d]]
    console.log(arr[0])  // a
    console.log(arr[1])  // b
    console.log(arr[2])  // [3, 4]
    console.log(arr[2][0])  // 3
    console.log(arr[2][1])  // 4
    

3.2 对象解构(重要重要)

对象解构时将对象的属性和方法快速批量赋给一系列变量的简介语法
基本语法:
语法:const { uname, age } = { uname: 'pink老师', age: 18}

  1. 赋值运算符 = 左侧的{}用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
  2. 对象属性的值将被赋值给与属性名相同的变量
  3. 注意解构的变量名不要和外面的变量名冲突,否则会报错
  4. 对象找不到与变量名一致的属性时变量值为undefined
    【注意】:
  5. 对象解构的变量名可以重新改名 旧变量名:新变量名
    eg:const { uname:username, age } = { uname: 'pink老师', age: 18}
  6. 数组对象解构:
    const pig = [{name:'佩奇',age:6}
    ]
    const [{name, age}] = pig
    
  7. 多级对象解构
    const { name, family:{ mother,father,sister }}= pig
    如上,若只需要family中的mother属性值则{mother}即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/48660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【BUG】已解决:ModuleNotFoundError: No module named‘ pip‘

已解决&#xff1a;ModuleNotFoundError: No module named‘ pip‘ 目录 已解决&#xff1a;ModuleNotFoundError: No module named‘ pip‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰…

揭开黑箱:目标检测中可解释性的重要性与实现

揭开黑箱&#xff1a;目标检测中可解释性的重要性与实现 在深度学习的目标检测任务中&#xff0c;模型的准确性虽然重要&#xff0c;但模型的决策过程是否透明也同样关键。可解释性&#xff08;Explainability&#xff09;是指模型能够为其预测结果提供清晰、可理解的解释。本…

SpringCloud--负载均衡

目录 前言 一.负载均衡的引入 1.1问题引入 1.2代码修改实现 二.负载均衡介绍 2.1实现负载均衡 2.2负载均衡策略 2.3LoadBalancer 原理 学习专栏&#xff1a;http://t.csdnimg.cn/tntwg 前言 在前面的Eureka当中&#xff0c;我们虽然实现了从注册中心中获取url&#xf…

桌面小宠物发布一周,第一次以独立开发者的身份赚到了100块

收入数据(AppStore一周收入统计) AppStore付费工具榜第七 应用简介 桌面新宠(NewPet)&#xff0c;是我耗时半年开发的一款桌面宠物。我是被 QQ 宠物影响的那批人&#xff0c;上学时天天给 QQ 宠物喂食&#xff0c;很可惜它现在不在了。所以&#xff0c;我开发的初衷是想要在电…

将SQL中的占位符替换成参数

将SQL中的占位符替换成参数 描述 描述 此方法是将SQL中的${}或#{}替换为直接拼接到SQL中或直接替换为?的形式。具体详情看下面代码。 import java.util.*; import java.util.regex.Matcher; import java.util.regex.Pattern;/*** author HuYu* date 2023-09-21* since 1.0**…

编码和解码

编码 编码的原理 编码是将信息&#xff08;如文本、图像、音频等&#xff09;转换成计算机可以处理和存储的二进制格式&#xff08;0和1&#xff09;的过程。不同的编码方案定义了不同的信息转换规则&#xff1a; 字符编码&#xff1a;用于将字符转换为数字。常见的有&#…

WPF 解决: DataGrid 已定义列,但是还是会显示模型的所有属性的问题

AutoGenerateColumns 属性 AutoGenerateColumns&#xff1a;这个属性决定 DataGrid 是否根据数据源中的属性自动生成列。如果设置为 true&#xff0c;DataGrid 会根据数据源中的属性自动生成列。如果设置为 false&#xff0c;则 DataGrid 不会自动生成列&#xff0c;开发者需要…

Mysql-查询

1.基本查询 //查询所有内容 select * from 表名;//查询指定字段 select 字段1&#xff0c;字段2&#xff0c;字段3.....from 表名;//查询时给字段起别名 select 字段1 as 别名1 , 字段2 as 别名2 ... from 表名&#xff1b;//去重查询 select distinct 字段列表 from 表名; …

假设我写了一段C++循环代码,我希望对这段代码做 profiling,计算出每次循环需要消耗的指令 cycle 数。我应该如何实现这种 profiling?

为了对你编写的C循环代码进行profile并计算每次循环消耗的指令周期数&#xff0c;可以采用以下步骤&#xff1a; 使用硬件性能计数器 使用 rdtsc 指令 rdtsc&#xff08;读时间戳计数器&#xff09;指令可以返回一个64位时间戳计数器的值&#xff0c;这个计数器从系统启动时开…

解决显存不足问题:深度学习中的 Batch Size 调整【模型训练】

解决显存不足问题&#xff1a;深度学习中的 Batch Size 调整 在深度学习训练中&#xff0c;显存不足是一个常见的问题&#xff0c;特别是在笔记本等显存有限的设备上。本文将解释什么是 Batch Size&#xff0c;为什么调整 Batch Size 可以缓解显存不足的问题&#xff0c;以及调…

杰发科技AC7840——SENT数据解析及软件Sent发送的实现

0. 测试环境 AC7840官方Demo板&#xff1b; 图莫斯0503 DSlogic U2Basic 使用引脚 输出脚&#xff1a;PB1 时钟&#xff1a;PB2&#xff0c;其他引脚可以不初始化&#xff0c;不接线 1. 数据解析 以下是SENT数据的格式&#xff08;1tick以3us为例&#xff09;&#…

watch和watchEffect的区别

废话不多说&#xff0c;先看两者代码&#xff1a; <template><div><h1>watchs</h1><div>{{ countRef }} - {{ name }} - {{ age }}</div></div> </template><script> import { ref, watch } from vue export default {…

数据库中的事务

一、理解事务 1、本质 事务由一组DML语句组成&#xff0c;这一组语句要么全部成功&#xff0c;要么全部失败。在逻辑上&#xff0c;事务就是一组sql语句&#xff0c;但在实际中&#xff0c;公共的数据库一定会高并发地接受各种事务的请求&#xff0c;所以一个事务要有4个属性…

WEB开发-HTTP认证

1 需求 2 接口 3 示例 HTTP Authentication&#xff08;HTTP认证&#xff09;是Web服务器用来验证客户端请求的一种机制。它通常用于保护需要用户凭据&#xff08;如用户名和密码&#xff09;才能访问的资源。HTTP认证有几种不同的分类或方法&#xff0c;以下是其中一些主要的分…

java 中stream.map()和stream.reduce()

stream.map 和 stream.reduce 是 Java Stream API 中的两个不同操作&#xff0c;用于对流中的元素进行转换和聚合。它们在功能和用途上有很大的区别。 stream.map map 方法用于将流中的每个元素应用一个函数&#xff0c;并返回一个包含应用该函数后的新元素的流。它通常用于将…

国内访问Docker Hub慢问题解决方法

在国内访问Docker Hub时可能会遇到一些困难&#xff0c;但幸运的是&#xff0c;有多种解决方案可以帮助你顺利下载Docker镜像。以下是一些有效的解决方案&#xff1a; 配置Docker镜像源&#xff1a;你可以通过配置Docker的daemon.json文件来使用国内镜像源&#xff0c;比如DaoC…

SpringCloud极限速通版

1.SpringCloud概述 1.1 什么是微服务 1.1.1 单体架构 业务所有功能都打包在一个war包或jar包&#xff0c;这种方式就是单体架构&#xff0c;单体架构的应用就是单体应用。这种架构开发简单&#xff0c;部署简单&#xff0c;一个项目包含所有功能&#xff1b;省去了多个项目之…

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(七)-广播远程识别码(Broadcast Remote ID)

目录 引言 5.5 广播远程识别码&#xff08;Broadcast Remote ID&#xff09; 5.5.1 使用PC5的广播远程识别码 5.5.2 使用MBS的广播远程识别码 引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及…

来自Transformers的双向编码器表示(BERT) 通俗解释

来自Transformers的双向编码器表示&#xff08;BERT&#xff09; 目录 1. 从上下文无关到上下文敏感2. 从特定于任务到不可知任务3. BERT&#xff1a;把两个最好的结合起来4. BERT的输入表示5. 掩蔽语言模型&#xff08;Masked Language Modeling&#xff09;6. 下一句预测&am…

Sui主网升级至V1.28.4版本

Sui主网现已升级至V1.28.4版本&#xff0c;同时Sui协议升级至51版本。其他升级要点如下所示&#xff1a; #18536 将所有可能的connect_lazy错误推迟到请求时间处理。 #18206 明确将每轮领导者人数设置为1&#xff0c;以支持Mysticeti提交。 #17868 引入新功能标志和协议配…