前端JavaScript入门-day06

简介: 前端JavaScript入门-day06

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

目录

作用域

局部作用域

全局作用域

作用域链

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>

控制台显示为:                          

相关文章
|
2天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
33 19
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
24 13
|
2天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
7天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
2天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
11天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
23 0
|
11天前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
53 0
|
11天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
26 0
|
11天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
36 0
|
11天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
34 0

热门文章

最新文章