JavaScript 高级第一天

目录

作用域

局部作用域

1. 函数作用域:

2. 块作用域:{}

全局作用域

作用域链

JS垃圾回收机制

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

引用计数法

标记清除法

闭包

变量提升

函数进阶

函数提升

函数参数

展开运算符

箭头函数(重要)

解构赋值

数组解构

对象解构

遍历数组 forEach 方法(重点)

筛选数组 filter 方法(重点)


作用域

作用域分为:
Ø 局部作用域
Ø 全局作用域

局部作用域

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

1. 函数作用域:

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

2. 块作用域:{}

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

全局作用域

1 <script> 标签 .js 文件 的【最外层】就是所谓的 全局作用域 ,在此声明的变量在函数内部也可以被访问。
2 全局作用域中声明的变量, 任何其它作用域都可以被访问
注意:
1. 为 window 对象动态添加的属性默认也是全局的,不推荐!
2. 函数中未使用任何关键字声明的变量为全局变量 ,不推荐!!!
3. 尽可能少的声明全局变量,防止全局变量被污染

作用域链

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

JS垃圾回收机制

1. 什么是垃圾回收机制?
1 垃圾回收机制(Garbage Collection) 简称 GC
2 JS中内存的分配和回收都是自动完成的, 内存在不使用的时候会被垃圾回收器自动回收。
3 正因为垃圾回收器的存在,许多人认为JS不用太关心内存管理的问题
4 但如果不了解JS的内存管理机制,我们同样非常容易成内存泄漏(内存无法被回收)的情况
5 不再用到的内存,没有及时释放,就叫做内存泄漏
2.内存的生命周期
JS环境中分配的内存, 一般有如下生命周期:
1. 内存分配 :当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
2. 内存使用 :即读写内存,也就是使用变量、函数等
3. 内存回收 :使用完毕,由垃圾回收自动回收不再使用的内存
4. 说明:
Ø 全局变量一般不会回收(关闭页面回收);
Ø 一般情况下局部变量的值, 不用了, 会被自动回收掉

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

堆栈空间分配区别:
1. 栈(操作系统): 由 操作系统自动分配释放 函数的参数值、局部变量等,基本数据类型放到栈里面。
2. 堆(操作系统): 一般由程序员分配释放,若程序员不释放,由 垃圾回收机制 回收。 复杂数据类型 放到堆里面。
下面介绍两种常见的浏览器 垃圾回收算法 : 引用计数法 标记清除法
引用计数法
IE采用的引用计数算法, 定义“ 内存不再使用 ”,就是看一个 对象 是否有指向它的引用,没有引用了就回收对象
算法:
1. 跟踪记录被 引用的次数
2. 如果被引用了一次,那么就记录次数1,多次引用会 累加 ++
3. 如果减少一个引用就 减1 --
4. 如果引用次数是 0 ,则释放内存
由上面可以看出,引用计数算法是个简单有效的算法。
但它却存在一个致命的问题: 嵌套引用 (循环引用)
如果两个对象 相互引用 ,尽管他们已不再使用,垃圾回收器不会进行回收,导致内存泄露。
因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露
标记清除法
现代的浏览器已经不再使用引用计数算法了。
现代浏览器通用的大多是基于 标记清除算法 的某些改进算法,总体思想都是一致的。
核心:
1. 标记清除算法将“不再使用的对象”定义为“ 无法达到的对象 ”。
2. 就是从 根部 (在JS中就是全局对象)出发定时扫描内存中的对象。 凡是能从 根部到达 的对象,都是还 需要使用 的。
3. 那些 无法 由根部出发触及到的 对象被标记 为不再使用,稍后进行 回收
标记所有的引用
根部已经访问不到,所以自动清除
标记清除法 核心思路是什么?
根部 扫描对象,能查找到的就是使用的,查找不到的就要回收

闭包

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域
简单理解: 闭包 =  内层函数 + 外层函数的变量         并且内层函数中要有外层函数的变量
闭包作用:
封闭数据,提供操作,外部也可以访问函数内部的变量
它允许将函数与其所操作的某些数据(环境)关联起来
闭包的基本格式:
闭包可能引起的问题?
Ø 内存泄漏

变量提升

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

 1. 把所有var声明的变量提升到 当前作用域的最前面
 2. 只提升声明, 不提升赋值

函数进阶

函数提升

函数提升与变量提升比较类似, 是指函数在声明之前即可被调用。
总结:
1. 函数提升能够使函数的声明调用更灵活
2. 函数表达式不存在提升的现象
3. 函数提升出现在相同作用域当中

1. 会把所有函数声明提升到当前作用域的最前面
2. 只提升函数声明,不提升函数调用

函数参数

1. 动态参数
arguments 是函数内部内置的 伪数组 变量,它包含了调用函数时传入的所有实参
总结:
1. arguments 是一个伪数组, 只存在于函数中
2. arguments 的作用 是动态获取函数的实参
3. 可以通过for循环依次得到传递过来的实参
2. 剩余参数
剩余参数允许我们将一个不定数量的参数表示为一个数组
1. ... 是语法符号,置于最末函数形参之前, 用于获取多余的实参
2. 借助 ... 获取的剩余实参,是个 真数组
开发中,还是提倡多使用 剩余参数。
剩余参数和动态参数区别是什么?开发中提倡使用哪一个?
Ø 动态参数是伪数组
Ø 剩余参数是真数组
Ø 开发中使用剩余参数想必也是极好的

展开运算符

展开运算符(…),将一个数组进行展开
说明:
1. 不会修改原数组
典型运用场景: 求数组最大值(最小值)、合并数组等
剩余参数: 函数参数使用,得到真数组
展开运算符: 数组中使用, 数组展开
...arr  === 1,2,3

箭头函数(重要)

语法2:只有一个参数可以省略小括号
语法3:如果函数体只有一行代码,可以写到一行上,并且无需写 return 直接返回值
语法4:加括号的函数体返回对象字面量表达式
1. 箭头函数属于表达式函数,因此不存在函数提升
2. 箭头函数只有一个参数时可以省略圆括号 ()
3. 箭头函数函数体只有一行代码时可以省略花括号 {},并自动做为返回值被返回
4. 加括号的函数体返回对象字面量表达式
2. 箭头函数参数
1. 普通函数有arguments 动态参数
2. 箭头函数 没有 arguments 动态参数,但是 有 剩余参数 ..args
3. 箭头函数 this
箭头函数不会创建自己的this ,它只会从自己的作用域链的上一层沿用this。
在开发中【使用箭头函数前需要考虑函数中 this 的值】,事件回调函数使用箭头函数时,this 为全局的 window,因此 DOM事件回调函数为了简便,还是不太推荐使用箭头函数

解构赋值

解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值。

数组解构

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

典型应用交互2个变量

注意: js 前面必须加分号情况
1. 立即执行函数
2. 数组解构
2. 变量多 单元值少的情况:
变量的数量大于单元值数量时,多余的变量将被赋值为 undefined
2. 变量少 单元值多的情况:
剩下的单元值,我不要了
3. 利用剩余参数解决变量少 单元值多的情况:
剩余参数返回的还是一个数组
4. 防止有undefined传递单元值的情况,可以设置默认值:
允许初始化变量的默认值,且只有单元值为 undefined 时默认值才会生效
5. 按需导入,忽略某些返回值:
6. 支持多维数组的结构:
剩余参数... 获取剩余单元值,但只能置于最末位

对象解构

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

2.给新的变量名赋值:

可以从一个对象中提取变量并同时修改新的变量名
冒号表示“什么值:赋值给谁”
2. 数组对象解构
3. 多级对象解构:
例子

遍历数组 forEach 方法(重点)

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
主要使用场景: 遍历数组的每个元素
语法:
例如:
注意:
1. forEach 主要是遍历数组
2. 参数当前数组元素是必须要写的, 索引号可选。
forEach 就是遍历          加强版的for循环  适合于遍历数组对象
只便利,不返回东西

筛选数组 filter 方法(重点)

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
主要使用场景: 筛选数组符合条件的元素 ,并返 回筛选之后元素的新数组
语法:
例:
返回值: 返回数组,包含了符合条件的所有元素。如果 没有符合条件的元素则返回空数组
参数: currentValue 必须写, index 可选
因为返回新数组,所以不会影响原数组
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值