前端JavaScript入门-day06

news2024/12/26 23:45:27

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

作用域

局部作用域 

全局作用域 

作用域链 

JS垃圾回收机制 

1. 什么是垃圾回收机制 

2.内存的生命周期 

3.算法说明

闭包 

变量提升 

函数进阶 

函数提升

函数参数 

动态参数

剩余参数

箭头函数 

基本语法 

箭头函数参数

箭头函数 this

解构赋值

数组解构

对象解构

遍历数组 forEach 方法 


作用域

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

局部作用域 

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

1. 函数作用域:

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

2. 块作用域: 

在 JavaScript 中使用 { } 包裹的代码称为代码块,代码块内部声明的变量外部将【 有可能 】无法被访问。
总结:
1. let 声明的变量会产生块作用域,var 不会产生块作用域
2. const 声明的常量也会产生块作用域
3. 不同代码块之间的变量无法互相访问
4. 推荐使用 let 或 const

全局作用域 

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

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

作用域链 

作用域链本质上是底层的 变量查找机制
在函数被执行时,会 优先查找当前 函数作用域中查找变量
如果当前作用域查找不到则会依次 逐级查找父级作用域 直到全局作用域
总结:
1. 嵌套关系的作用域串联起来形成了作用域链
2. 相同作用域链中按着从小到大的规则查找变量
3. 子作用域能够访问父作用域,父级作用域无法访问子级作用域

JS垃圾回收机制 

学习目的: 为了闭包做铺垫
学习路径:
1. 什么是垃圾回收机制
2. 内存的声明周期
3. 垃圾回收的算法说明

1. 什么是垃圾回收机制 

垃圾回收机制(Garbage Collection) 简称 GC
JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收。
正因为垃圾回收器的存在,许多人认为JS不用太关心内存管理的问题
但如果不了解JS的内存管理机制,我们同样非常容易成内存泄漏(内存无法被回收)的情况
不再用到的内存,没有及时释放,就叫做 内存泄漏

2.内存的生命周期 

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

3.算法说明

堆栈空间分配区别:
1. 栈(操作系统): 由 操作系统自动分配释放 函数的参数值、局部变量等,基本数据类型放到栈里面。
2. 堆(操作系统): 一般由程序员分配释放,若程序员不释放,由 垃圾回收机制 回收。 复杂数据类型 放到堆里面。
下面介绍两种常见的浏览器 垃圾回收算法 : 引用计数法 标记清除法

闭包 

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域
简单理解: 闭包 =  内层函数 + 外层函数的变量

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

闭包应用: 实现数据的私有
比如,我们要做个统计函数调用次数,函数调用一次,就++

 

变量提升 

变量提升是 JavaScript 中比较“奇怪”的现象,它允许在变量声明之前即被访问(仅存在于var声明变量)
注意:
1. 变量在未声明即被访问时会报语法错误
2. 变量在var声明之前即被访问,变量的值为 undefined
3. let/const 声明的变量不存在变量提升
4. 变量提升出现在相同作用域当中
5. 实际开发中推荐先声明再访问变量
说明:
JS初学者经常花很多时间才能习惯变量提升,还经常出现一些意想不到的bug,正因为如此,ES6 引入了块级作用域,用let 或者 const声明变量,让代码写法更加规范和人性化。

函数进阶 

函数提升

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

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

函数参数 

动态参数

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

总结:
1. arguments 是一个伪数组,只存在于函数中
2. arguments 的作用是动态获取函数的实参
3. 可以通过for循环依次得到传递过来的实参
<!-- 
    写一个求和函数
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getSum()
        {
            let sum =0;
            for(let i = 0;i<arguments.length;i++)
            {
                sum+=arguments[i]
            }
            console.log(sum)
        }
        getSum(2,3,4)
    </script>
</body>
</html>

剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组
1. ... 是语法符号,置于最末函数形参之前,用于获取 多余 的实参
2. 借助 ... 获取的剩余实参,是个 真数组
开发中,还是提倡多使用 剩余参数。

箭头函数 

目的: 引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁
使用场景: 箭头函数更适用于那些本来 需要匿名函数的地方

基本语法 

语法1:基本写法

语法2:只有一个参数可以省略小括号

 语法3:如果函数体只有一行代码,可以写到一行上,并且无需写 return 直接返回值

语法4:加括号的函数体返回对象字面量表达式

箭头函数参数

1. 普通函数有arguments 动态参数
2. 箭头函数 没有 arguments 动态参数,但是 有 剩余参数 ..args

箭头函数 this

在箭头函数出现之前,每一个新函数根据它是被 如何调用的 来定义这个函数的this值, 非常令人讨厌。
箭头函数不会创建自己的this ,它只会从自己的作用域链的上一层沿用this。

解构赋值

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。
基本语法:
1. 赋值运算符 = 左侧的 [] 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作
变量多 单元值少的情况:

 变量的数量大于单元值数量时,多余的变量将被赋值为 undefined

变量少 单元值多的情况:

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

剩余参数返回的还是一个数组 

防止有undefined传递单元值的情况,可以设置默认值: 允许初始化变量的默认值,且只有单元值为 undefined 时默认值才会生效

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

支持多维数组的结构:

对象解构

1. 基本语法:
1. 赋值运算符 = 左侧的 {} 用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名 相同的 变量
3. 注意解构的变量名不要和外面的变量名冲突否则报错
4.对象中找不到与变量名一致的属性时变量值为 undefined

给新的变量名赋值:

可以从一个对象中提取变量并同时修改新的变量名

冒号表示“什么值:赋值给谁” 

数组对象解构 

多级对象解构:  

遍历数组 forEach 方法 

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
主要使用场景: 遍历数组的每个元素

语法:

注意:
1. forEach 主要是遍历数组
2. 参数当前数组元素是必须要写的, 索引号可选。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const arr = ['red','green','pink']
        arr.forEach(function(item,index)
        {
            document.write(item)
            document.write(index)
        })
    </script>
</body>
</html>

控制台显示为:                           

 

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

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

相关文章

链路传播(Propagate)机制及使用场景

服务间链路追踪传播机制是指在微服务架构中&#xff0c;通过记录和跟踪服务之间的请求和响应信息&#xff0c;来实现对服务间链路的追踪和监控。这种机制可以帮助开发人员快速定位服务间出现的问题&#xff0c;并进行优化和调整。 具体来说&#xff0c;服务间链路追踪传播机制…

nvm的简介、安装、使用

一、nvm是什么&#xff1f; .nvm是一个node的版本管理工具&#xff0c;可以简单操作node版本的切换、安装、查看。。。等等&#xff0c;与npm不同的是&#xff0c;npm是依赖包的管理工具。 二、nvm的安装。 点击如下文件进行安装&#xff1a; &#xff08;1&#xff09;安装…

超声波功率放大器工作原理是什么意思

超声波功率放大器是一种能够将低功率、小振幅的超声波信号放大至足够高功率和大振幅输出的电子设备。它通常被用于超声波清洗、焊接、切割、医疗等领域中。 超声波功率放大器的工作原理基于声学共振的原理。具体来说&#xff0c;超声波功率放大器由一个压电陶瓷换能器和一个功放…

增强型(RX651)R5F56514EDFP、R5F5651EHDFP、R5F5651CDDBP微控制器,强化工业物联网安全。

RX651 微控制器 (MCU)系列产品&#xff0c;以满足工业自动化、楼宇自动化和智能表计系统更高的安全需求。扩展的微控制器集成了Trusted SecureIP&#xff08;TSIP&#xff09;&#xff0c;以及用于工业和网络控制系统的增强型可靠闪存功能和人机界面&#xff08;HMI&#xff0…

C# HTTP Error 500.19

解决办法&#xff1a; .vs configapplicationhost.config 修改<section name"windowsAuthenticationnurununoverrideModeDefault"Allow”/>

QQ消息是如何到达接收方的?看完这个你就明白了

A通过QQ给异地的B发了条消息&#xff0c;直到B收到了消息&#xff0c;中间经历了怎样的过程? 北京的A通过QQ给深圳的B发了一条消息&#xff0c;B在QQ上接收到了消息&#xff0c;从A点击发送开始&#xff0c;到B看到消息结束&#xff0c;中间过程是如何实现的&#xff1f;中间…

.Net Core Restful Api 版本区分第一种

前言&#xff1a;在我们进行Web Api开发时&#xff0c;版本的区分&#xff0c;是必须要考虑的&#xff0c;涉及到我们的版本发布&#xff0c;切换等&#xff0c;如何从旧版本无缝的切换到新版本&#xff1f; 下面&#xff0c;我们通过使用[ApiVersion]特性&#xff0c;实现两个…

超详细的学习笔记:CSS定位装饰(附代码示例)

笔记参考b站网课&#xff1a;【前端开发入门教程&#xff0c;web前端零基础html5 css3前端项目视频教程】https://www.bilibili.com/video/BV1Kg411T7t9?p124&vd_source06e5549bf018e111f4275c259292d0da 目录 一、网页常见布局方式 1、标准流 2、浮动 3、定位 二、定…

软件鉴定测试报告需要哪些材料?

软件鉴定测试报告是对软件产品进行功能、性能和安全等方面的测试和评估后所生成的报告。软件鉴定测试报告作为软件质量的重要指标&#xff0c;为软件的发布和应用提供可靠的依据。以下是软件鉴定测试报告中常见的材料内容&#xff1a; 1. 软件测试计划&#xff1a;包括测试目的…

UncategorizedSQLException 报错

85、UncategorizedSQLException 报错 出现问题的原因&#xff1a; 本身是没有这个问题的&#xff0c;后来服务器上的一张表&#xff0c;被误删了&#xff0c;重新创建之后&#xff0c;就出现了这个问题 org.springframework.jdbc.UncategorizedSQLException: ### Error upd…

C++—类和对象

文章目录 1 类2 对象2.1 创建对象2.2 对象的操作2.3 构造函数2.4 析构函数 3 静态成员4 this指针5 友元 一切我们研究的事物&#xff0c;都可以叫做对象。对象具有状态&#xff0c;操作和行为。通常用一个数值来描述对象的状态。对象的操作用于改变对象的状态。对象和对象的操作…

BlueZ 开发学习指南(一) --- D-Bus介绍

BlueZ 开发学习指南&#xff08;一&#xff09; — D-Bus介绍 一、 BlueZ与D-Bus简介 Linux使用的蓝牙协议栈是Blue Z&#xff0c;不同于我们以往的开发方式&#xff0c;Blue Z提供的API 并不是通过头文件这样的形式&#xff0c; 而是通过D-Bus的方式来提供的。 Blue Z提供的是…

AutoDL 训练stable-diffusion lora模型

1.创建镜像实例 2. 启动实例 3.启动服务 4.配置参数 4.1 基础模型选择 4.2 文件路径设置 5.点击打印训练信息 6.训练模型&#xff08;点击Train model&#xff09;

C++ 迭代器的设计与使用

C 迭代器是一种用于访问容器&#xff08;例如数组、向量、列表等&#xff09;元素的工具。它们允许我们以一种统一的方式遍历和操作容器中的数据&#xff0c;而不用关心容器内部数据结构的细节 C 迭代器 std 重要函数 std::begin 和 std::endstd::advance(iter,n)向前移动…

从零开始,用Python编写EA实战指南

在外汇交易领域&#xff0c;EA&#xff08;Expert Advisor&#xff09;是一种基于计算机程序的交易策略&#xff0c;被广泛应用于机器人化交易和量化交易。Python作为一种高效、灵活的编程语言&#xff0c;被越来越多的投资者用于编写EA和数据分析。本文将提供一份从零开始&…

Postgresql在哪里使用列统计信息?

对pg_statistic表的查询都是走syscache的&#xff0c;要找到所有使用列统计信息地方&#xff0c;遍历系统表索引即可 enum SysCacheIdentifier {...STATEXTDATASTXOID,STATEXTNAMENSP,STATEXTOID,STATRELATTINH,... }下面是最常用的STATRELATTINH索引场景&#xff0c;即 Sear…

行业追踪,2023-07-13,新样式来了,更清晰地追踪行业趋势

自动复盘 2023-07-13 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

利用 Elasticsearch、ESRE、LLM 和 LangChain 加速制药行业的研发 — 第 1 部分

作者&#xff1a;Valerio Arvizzigno, Dimitri Marx, Francesco Di Stefano 这是一篇通过生成式 AI/LLM、自定义模型和 Elasticsearch 相关性引擎 (ESRE​​) 支持制药行业更快的药物创新和发现的综合指南。更快的药物发现带来有前途的候选药物是制药行业的主要目标。 为了支持…

Mysql表空间、段、区、页的关系

提示&#xff1a;mysql表空间、段、区、页的关系详细描述 文章目录 表空间-TABLE SPACE1 查看 表空间相关参数段&#xff08;segment&#xff09;区&#xff08;extent&#xff09;页&#xff08;page&#xff09; 表空间-TABLE SPACE 从 InnoDB 逻辑存储结构来看&#xff0c;…

顺序表 --- C语言实现

目录 1.线性表 2.顺序表 2.1 概念和结构 2.2 接口实现 2.3 数组相关面试题 2.4 顺序表的问题及思考 1.线性表 什么是线性表 &#xff1a; 线性表&#xff08;linear list)是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常…