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;我是博主英杰…

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;我开发的初衷是想要在电…

Mysql-查询

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

解决显存不足问题:深度学习中的 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;&#…

数据库中的事务

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

国内访问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;的连接性、身份识别、跟踪及…

Sui主网升级至V1.28.4版本

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

MyBatis:高级标签使用技巧的详细指南

请关注微信公众号&#xff1a;拾荒的小海螺 博客地址&#xff1a;http://lsk-ww.cn/ 1、简述 MyBatis 是一个优秀的持久层框架&#xff0c;提供了简单和灵活的 SQL 映射功能。除了基础的查询、插入、更新和删除操作外&#xff0c;MyBatis 还提供了一些高级标签&#xff0c;帮…

SQL 简单查询

目录 一、投影查询 1、指定特定列查询 2、修改返回列名查询 3、计算值查询 二、选择查询 1、使用关系表达式 2、使用逻辑表达式 3、使用 BETWEEN关键字 4、使用 IN关键字 5、使用 LIKE关键字 6、使用 IS NULL/ NOT NULL关键字 7、符合条件查询 三、聚合函数查询 一…

Docker_一刀流_好用、好玩还方便_(持续更新)

Docker 简介一、镜像和容器的概念镜像&#xff08;Image&#xff09;容器&#xff08;Container&#xff09;镜像和容器的关系 宿主机二、Dockerfile2.1 什么是Dockerfile2.2 Dockerfile中的常见指令2.3Dockerfile实例2.4 详细扩展 三、镜像3.1 镜像的创建3.2对于镜像的一些常用…

知识表示 | 利用 Protégé 软件构建小型本体

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本项目旨在利用 Protg 软件构建小型本体&#xff0c;探索本体建模的实际应用&#xff0c;特别是应用本体与上层本体之间的关系继承与映射。我们将重点理解应用本体如何继承上层本体的关系&#xff0c;以及如何通过推理机制揭示实…

一起搭WPF界面之MVVM架构的简单搭建

一起搭WPF界面之MVVM架构的简单搭建 1 前言2 创建项目2.1新建项目2.2WPF2.3创建完成 3 MVVM划分3.1 划分逻辑3.2文件夹创建3.3文件创建3.3.1 Views——可在主界面的基础上&#xff0c;划分多个用户控件模块3.3.2 ViewModels——创建数据结构存放的cs文件3.3.3 Models——创建处…

网络安全入门教程(非常详细)从零基础入门到精通_网路安全 教程

前言 1.入行网络安全这是一条坚持的道路&#xff0c;三分钟的热情可以放弃往下看了。2.多练多想&#xff0c;不要离开了教程什么都不会了&#xff0c;最好看完教程自己独立完成技术方面的开发。3.有时多百度&#xff0c;我们往往都遇不到好心的大神&#xff0c;谁会无聊天天给…

用神经网络求解微分方程

微分方程是物理科学的主角之一&#xff0c;在工程、生物、经济甚至社会科学中都有广泛的应用。粗略地说&#xff0c;它们告诉我们一个量如何随时间变化&#xff08;或其他参数&#xff0c;但通常我们对时间变化感兴趣&#xff09;。我们可以了解人口、股票价格&#xff0c;甚至…

艺术成分很高的完全自定义的UITabBar(很简单)

引言 在iOS应用开发中&#xff0c;UITabBar是一个非常场景且重要的UI组件。系统为我们提供的UITabBar虽然功能强大&#xff0c;但是在某些情况下&#xff0c;它的标准样式并不能满足我们特定的设计需求&#xff0c;它的灵活性也有一些局限。为了打造更具个性化好的用户友好的交…