JavaScript进阶(九)

news2025/7/15 11:20:47

第三部分:JavaScript进阶

目录

第三部分:JavaScript进阶

一、作用域

1.1 局部作用域

1. 作用域

2. 局部作用域

函数作用域

块作用域

1.2 全局作用域

1.3 作用域链

1.4 JS垃圾回收机制

1. 什么是垃圾回收机制

2. 内存的声明周期

3. 垃圾回收的算法说明

引用计数

标记清除法

1.5 闭包

1.6 变量提升

二、函数进阶

2.1 函数提升

2.2 函数参数

2.2.1 动态参数

2.2.2 剩余参数

2.2.3 展开运算符

2.3 箭头函数(重要)

2.3.1 基本语法

2.3.2 箭头函数参数

2.3.3 箭头函数this

三、解构赋值

3.1 数组解构

1. 基本语法:

2. 变量多 单元值少的情况:

3. 变量少 单元值多的情况:

4. 利用剩余参数解决变量少 单元值多的情况:

5. 防止有undefined传递单元值的情况,可以设置默认值:

6. 按需导入,忽略某些返回值:

7. 支持多维数组的结构:

3.2 对象解构

1. 基本语法:

2. 给新的变量名赋值:

3. 多级对象解构:

遍历数组forEach方法(重点)

四、综合案例

筛选数组filter方法(重点)

案例-商品列表价格筛选

一、作用域

1.1 局部作用域

1. 作用域

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

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

 作用域分为:

  • 局部作用域
  • 全局作用域
     
2. 局部作用域

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

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


 

总结

  1. 函数内部声明的变量,在函数外部无法被访问
  2. 函数的参数也是函数内部的局部变量
  3. 不同函数内部声明的变量无法互相访问
  4. 函数执行完毕后,函数内部的变量实际被清空了
     
块作用域
  • 在JavaScript中使用{ }包裹的代码称为代码块,代码块内部声明的变量外部将【有可能】无法被访问。

总结

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

总结:

1. 局部作用域分为哪两种?

  • 函数作用域函数内部
  • 块级作用域{}

2.局部作用域声明的变量外部能使用吗?

  • 不能

1.2 全局作用域

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

全局作用域中声明的变量,任何其它作用域都可以被访问


 

注意:

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

总结:

1.全局作用域有哪些?

  • <script> 标签内部
  • js文件

2. 全局作用域声明的变量其他作用域能使用吗?

  • 相当能

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

1.3 作用域链

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

  • 在函数被执行时,会优先查找当前函数作用域中查找变量
  • 如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域
     

总结:

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

总结:

1. 作用域链本质是什么?

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

2. 作用域链查找的规则是什么?

  • 会优先查找当前函数作用域中查找变量
  • 查找不到则会依次逐级查找父级作用域直到全局作用域
     

1.4 JS垃圾回收机制

目标:了解JS垃圾回收机制的执行过程

学习目的:为了闭包做铺垫

1. 什么是垃圾回收机制

垃圾回收机制(Garbage Collection) 简称 GC

JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收。

正因为垃圾回收器的存在,许多人认为JS不用太关心内存管理的问题

但如果不了解JS的内存管理机制,我们同样非常容易成内存泄漏(内存无法被回收)的情况

不再用到的内存,没有及时释放,就叫做内存泄漏
 

2. 内存的声明周期

JS环境中分配的内存,一般有如下生命周期:

  1. 内存分配:当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
  2. 内存使用:即读写内存,也就是使用变量、函数等.
  3. 内存回收:使用完毕,由垃圾回收自动回收不再使用的内存
  4. 说明:
  • 全局变量一般不会回收(关闭页面回收);
  • 一般情况下局部变量的值,不用了,会被自动回收掉
     

总结:

1. 什么是垃圾回收机制?

  • 简称GC
  • JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收

2. 什么是内存泄漏?

  • 不再用到的内存,没有及时释放,就叫做内存泄漏

3. 内存的生命周期是什么样的?

  • 内存分配、内存使用、内存回收
  • 全局变量一 般不会回收;一般情况下局部变量的值,不用了,会被自动回收掉
     

3. 垃圾回收的算法说明

拓展-JS垃圾回收机制-算法说明

堆栈空间分配区别:

  1. 栈(操作系统):由操作系统自动分配释放函数的参数值、局部变量等,基本数据类型放到栈里面。
  2. 堆(操作系统):一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型放到堆里面。

下面介绍两种常见的浏览器垃圾回收算法:引用计数法标记清除法

引用计数

IE采用的引用计数算法,定义“内存不再使用”,就是看一个对象是否有指向它的引用,没有引用了就回收对象

算法:

  1. 跟踪记录被引用的次数
  2. 如果被引用了一次, 那么就记录次数1,多次引用会累加++
  3. 如果减少一个引用 就减1 --
  4. 如果引用次数是0,则释放内存
     

由上面可以看出,引用计数算法是个简单有效的算法。
 

但它却存在一个致命的问题:嵌套引用(循环引用)

如果两个对象相互引用,尽管他们已不再使用,垃圾回收器不会进行回收,导致内存泄露。


 

因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露
 

标记清除法

现代的浏览器已经不再使用引用计数算法了。

现代浏览器通用的大多是基于标记清除算法的某些改进算法,总体思想都是一致的。

核心:

  1. 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。
  2. 就是从根部(在JS中就是全局对象)出发定时扫描内存中的对象。 凡是能从根部到达的对象,都是还需要使用的。
  3. 那些无法由根部出发触及到的对象被标记为不再使用,稍后进行回收
     

标记所有的引用:

根部已经访问不到,所以自动清除
 

总结:

1. 标记清除法核心思路是什么?

  • 根部扫描对象,能查找到的就是使用的,查找不到的就要回收

1.5 闭包

目标:能说出什么是闭包,闭包的作用以及注意事项

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域

简单理解:闭包 = 内层函数 + 外层函数的变量

先看个简单的代码:

闭包作用:封闭数据,提供操作,外部也可以访问函数内部的变量

闭包的基本格式:


 

闭包应用:实现数据的私有

比如,我们要做个统计函数调用次数,函数调用一次,就++


 

总结:

1. 怎么理解闭包?

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

2. 闭包的作用?

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

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

  • 内存泄漏

1.6 变量提升

目标:了解什么是变量提升

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

注意:

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

说明:JS初学者经常花很多时间才能习惯变量提升,还经常出现一些意想不到的bug,正因为如此,ES6 引入了块级作用域,用let或者const声明变量,让代码写法更加规范和人性化。


 

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

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

相关文章

数据结构与算法分析实验11 实现顺序查找表

实现顺序查找表 1.上机名称2.上机要求3.上机环境4.程序清单(写明运行结果及结果分析)4.1 程序清单4.1.1 头文件4.1.2 实现文件4.1.3 源文件 4.2 实现展效果示 上机体会 1.上机名称 实现顺序查找表 顺序查找表的基本概念 顺序查找表是一种线性数据结构&#xff0c;通常用于存储…

获取高德地图JS API的安全密钥和Key的方法

要使用高德地图JavaScript API&#xff0c;您需要获取API Key和安全密钥(securityJsCode)。以下是获取步骤&#xff1a; 1. 注册高德开放平台账号 首先访问高德开放平台&#xff0c;如果没有账号需要先注册。 2. 创建应用获取Key 登录后进入"控制台" 点击"应…

JAVA研发+前后端分离,ZKmall开源商城B2C商城如何保障系统性能?

在电商行业竞争白热化的当下&#xff0c;B2C 商城系统的性能表现成为决定用户留存与商业成败的关键因素。ZKmall 开源商城凭借 Java 研发与前后端分离架构的深度融合&#xff0c;构建起一套高效、稳定且具备强大扩展性的系统架构&#xff0c;从底层技术到上层应用全方位保障性能…

嵌入式自学第二十天(5.13)

&#xff08;1&#xff09;线性表顺序存储的优缺点&#xff1a; 优点&#xff1a;无需为表中逻辑关系添加额外存储空间&#xff1b; 可以快速随机访问元素&#xff0c;时间复杂度O(1)。 缺点&#xff1a;插入删除需要移动元素O(n&#xff09;&#xff1b; 无法动态存储。 …

快速上手Linux nfs网络文件系统

一、nfs服务的安装与部属 1.安装软件 设置火墙 测试&#xff1a;在客户端上安装nfs-utils后 showmount 服务端IP 2.共享资源 测试&#xff1a; 参数&#xff08;参数写在共享策略文件的括号里&#xff09; 二、nfs客户端动态挂载机制 当客户端和服务器之间没有数据交互时&am…

26考研——中央处理器_异常和中断机制(5)

408答疑 文章目录 五、异常和中断机制异常和中断的基本概念异常和中断的分类异常的分类故障 (Fault)自陷 (Trap)终止 (Abort) 中断的分类可屏蔽中断不可屏蔽中断 异常和中断响应过程关中断保存断点和程序状态识别异常和中断并转到相应的处理程序 八、参考资料鲍鱼科技课件26王道…

数据库实验报告 SQL SERVER 2008的基本操作 1

实验报告&#xff08;第 1 次&#xff09; 实验名称 SQL SERVER 2008的基本操作 实验时间 9月14日1-2节 一、实验内容 数据库的基本操作:包括创建、修改、附加、分离和删除数据库等。 二、源程序及主要算法说明 本次实验不涉及程序和算法。 三、测…

Nature图形复现—两种快速绘制热图的方法

相信大家在科研过程中&#xff0c;会遇到热图&#xff0c;有时候会觉得热图理解起来比较困难&#xff0c;或者觉得绘制热图也比较困难。本期教程我们来深入了解热图、绘制热图。 热图是一种通过颜色深浅或色阶变化来直观展示数据分布、密度或数值大小的可视化工具。它在多个领域…

INFINI Console 纳管 Elasticsearch 9(一):指标监控、数据管理、DSL 语句执行

Elasticsearch v9.0 版本最近已发布&#xff0c;而 INFINI Console 作为一款开源的非常轻量级的多集群、跨版本的搜索基础设施统一管控平台&#xff0c;是否支持最新的 Elasticsearch v9.0 集群管理呢&#xff1f;本文以 INFINI Console v1.29.2 为例&#xff0c;从指标监控、数…

texlive 与 Texmaker 安装

一、安装 Texmaker 1、下载Texmaker 链接地址: Texmaker (free cross-platform latex editor) 点击 FREE DOWNLOAD &#xff0c;点击 Texmaker_6.0.1_Win_x64.msi &#xff0c;下载即可。 2、安装Texmaker 双击如下文件 若出现如下&#xff0c;点击更多信息 点击仍要运行 …

机试刷题:进制转换3

题目来源&#xff1a;N诺 一、题目描述 二、解题思路 过程模拟&#xff0c;先转换为十进制&#xff0c;再转换为N进制即可。 注意&#xff1a;转换的时候可能出现字母&#xff0c;注意字母的表示。 用string和char类型对数据进行存储要更方便。 #include <iostream>…

(顺序表、单链表、双链表)==>一篇解决!(Java版)

文章目录 一、线性表二、顺序表三、单链表四、双链表 一、线性表 线性表是最基本、最简单、也是最常用的一种数据结构。一个线性表是n个具有相同特性的数据元素的有限序列。 线性表的特征&#xff1a;数据元素之间具有一种“一对一”的逻辑关系。 线性表的分类&#xff1a; 线…

JPG与PDF格式转换器

该插件可实现JPG与PDF格式的互转。 MainForm.Designer.cs using System.Windows.Forms; namespace JpgToPdfConverter {partial class MainForm{private System.ComponentModel.IContainer components null;protected override void Dispose(bool disposing){if (disposing &…

手搓传染病模型(SEIARW)

在传染病传播的研究中&#xff0c;水传播途径是一个重要的考量因素。SEAIRW 模型&#xff08;易感者 S - 暴露者 E - 感染者 I - 无症状感染者 A - 康复者 R - 水中病原体 W&#xff09;综合考虑了人与人接触传播以及水传播的双重机制&#xff0c;为分析此类传染病提供了全面的…

【Mac 从 0 到 1 保姆级配置教程 15】- Python 环境一键安装与配置,就是这么的丝滑

文章目录 前言安装 Python 环境VSCode 配置Python 环境NeoVim 配置 Python 环境&#xff08;选看&#xff09;1. Python LSP 配置2. 打开 python 语言支持 最后参考资料系列教程 Mac 从 0 到 1 保姆级配置教程目录&#xff0c;点击即可跳转对应文章&#xff1a; 【Mac 从 0 到 …

【递归、搜索与回溯】专题一:递归(二)

&#x1f4dd;前言说明&#xff1a; 本专栏主要记录本人递归&#xff0c;搜索与回溯算法的学习以及LeetCode刷题记录&#xff0c;按专题划分每题主要记录&#xff1a;&#xff08;1&#xff09;本人解法 本人屎山代码&#xff1b;&#xff08;2&#xff09;优质解法 优质代码…

Spark缓存-cache

一、RDD持久化 1.什么时候该使用持久化&#xff08;缓存&#xff09; 2. RDD cache & persist 缓存 3. RDD CheckPoint 检查点 4. cache & persist & checkpoint 的特点和区别 特点 区别 二、cache & persist 的持久化级别及策略选择 Spark的几种持久化…

记录算法笔记(2025.5.13)二叉树的最大深度

给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3 示例 2&#xff1a; 输入&#xff1a;root [1,null,2] …

【Linux】简单设计libc库

&#x1f4dd;前言&#xff1a; 经过之间两篇文章&#xff0c;【Linux】基础IO&#xff08;一&#xff09;和【Linux】基础IO&#xff08;二&#xff09;的学些&#xff0c;我们对文件的基础IO已经有了一定的理解。 这篇文章我们来简单设计一下libc库&#xff0c;来复习一下文…

milvus+flask山寨《从零构建向量数据库》第7章case2

继续流水账完这本书&#xff0c;这个案例是打造文字形式的个人知识库雏形。 create_context_db: # Milvus Setup Arguments COLLECTION_NAME text_content_search DIMENSION 2048 MILVUS_HOST "localhost" MILVUS_PORT "19530"# Inference Arguments…