JavaScript -作用域&解构&箭头函数

作用域&解构&箭头函数

一.作用域

变量作用的范围

1.局部作用域

(1)函数作用域

在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。

注意:

1. 函数内部声明的变量，在函数外部无法被访问

2. 函数的形参也可以看做是函数内部的局部变量

3. 不同函数内部声明的变量无法互相访问

(2)块级作用域

1. let/const 声明会产生块作用域，var 不会产生块作用域

2. 不同代码块之间的变量无法互相访问

3. 推荐使用 let 或 const

2.全局作用域

<script> 标签内部和.js 文件的最外层就是全局作用域

3.作用域链

嵌套关系的作用域串联起来形成了作用域链

查找规则：就近原则

二.垃圾回收机制

垃圾回收机制(Garbage Collection) 简称 GC JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收

内存的生命周期 内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存 内存使用：即读写内存，也就是使用变量、函数等 内存回收：使用完毕，由垃圾回收器自动回收不再使用的内存

注意： 全局变量一般不会回收(关闭页面回收) 一般情况下局部变量的值, 不用了, 会被自动回收掉

内存泄漏：程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏

1.引用计数法

“对象有没有其他对象引用到它”，如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。

弊端：循环引用 两个对象内的属性相互引用对象，两个对象的引用计数永远都大于 0，无法回收导致内存泄漏

2.标记清除法

把全局作用域当做根,从上至下查找所有变量,只要访问到了就打上标记,收集完成后清除所有没有标记的对象

优化:

分代收集

增量收集

闲时收集

三.闭包

概念：一个函数对周围状态的引用捆绑在一起，闭包让开发者可以从内部函数访问外部函数的作用域 简单理解：闭包 = 内层函数 + 外层函数的变量

闭包作用：实现数据的私有，避免全局污染，外层函数也可以访问里层函数变量

闭包的使用:

四.变量提升

允许在变量声明之前即被访问（仅存在于var声明变量）

说明： 1.变量提升出现在当前作用域的最前面

2.只提升变量声明，不提升变量赋值

3.let/const 声明的变量不存在变量提升(仅限var)

4.实际开发中推荐先声明再访问变量

五.函数提升

1.函数提升提升到当前作用域最前面

2.函数提升只提升声明，不提升调用

3.函数表达式不存在提升的现象

4.函数提升能够使函数的声明调用更灵活

六.函数参数

1.arguments对象

arguments 是函数内部内置的对象(伪数组)，它包含了调用函数时传入的所有实参

1. arguments是一个伪数组，只存在于函数中

2. arguments的作用是动态获取函数的实参

3. 可以通过for循环依次得到传递过来的实参

   arguments现在已经被淘汰了，原因有两个：

   1.是剩余参数的出现

   2.性能原因

   arguments就是一个伪数组，仅存在于function中，它的作用就是装载着所有的实参，因为arguments是动态伪数组，数据变化带来的性能损耗较大，每次都会同步更新所有参数，如果参数过多则会出现问题，在开启严格模式后就会彻底禁用arguments，现在开发中基本不用arguments，可以使用可变参数完全替代arguments的功能

   arguments.callee代表函数本身,一般用于匿名函数自调用,后来由于ES6的出现,不让用arguments了,所以callee自然也无法使用了,官方建议给函数起名字

开启'use strict'严格模式 时无法使用 arguments

2.剩余参数

允许我们将一个不定数量的参数表示为一个数组 简单理解：用于获取多余的实参，并形成一个真数组

1. ... 是语法符号，置于最末函数形参之前，用于获取多余的实参

2. 借助 ... 获取的剩余实参，是个真数组

3. 箭头函数不支持arguments，但是可以使用剩余参数 开发中，还是提倡多使用 剩余参数

3.展开运算符

展开运算符(…),将一个数组/对象进行展开

七.箭头函数

用法：

1. 当箭头函数只有一个参数时，可以省略参数的小括号，其余个数不能省略（没有参数也需要写小括号）

2. 当箭头函数的函数体只有一句代码 可以省略函数体大括号，这句代码就是返回值（可以不用写return）

3. 如果返回的是个对象，则需要把对象用小括号包裹

4. 箭头函数里面没有arguments，但是有剩余参数

箭头函数中的this

以前函数中的this指向是根据如何调用来确定的。简单理解就是this指向调用者

箭头函数本身没有this,它只会沿用上一层作用域的this

ES6对象简写

1. 在对象中，如果属性名和属性值一致，可以简写只写属性名即可

2. 在对象中，方法（函数）可以简写

八.解构赋值

解构赋值：可以将数组中的值或对象的属性取出，赋值给其他变量 解构：其实就是把一个事物的结构进行拆解

数组解构:

1. 右侧数组的值将被赋值给左侧的变量变量的顺序对应数组值的位

2. 置依次进行赋值操作

注意:变量的数量大于值数量时，多余的变量将被赋值为 undefined

对象解构:

对象解构赋值：可以将对象的属性取出，赋值给其他变量

注意： 对象的属性名一定要和变量名相同 变量名如果没有和对象属性名相同的则默认是 undefined 注意解构的变量名不要和外面的变量名冲突否则报错

九.筛选数组 filter 方法

filter() 方法创建一个新的数组，新数组中的元素是符合条件的所有元素 主要使用场景： 筛选数组符合条件的元素，并返回筛选之后元素的新数组，不影响原数组 语法：

const newArr = arr.filter(function (element, index) { return 筛选条件 })

element 是数组元素 index 是数组元素的索引号