作用域&箭头函数&解构

作用域&箭头函数&解构

这篇总结主要讲解了作用域&箭头函数&解构的使用

1.作用域

局部作用域：分为函数作用域与块级作用域

函数作用域：函数内部的代码块称为函数作用域
注意：

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

块作用域：被{ }包裹的代码块称为块作用域 if语句 for语句 部分有大括号的函数
注意：

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

全局作用域：<script>标签内部.js文件

注意：尽可能少的声明全局变量，防止全局变量污染

2.作用域链

是什么？本质是底层的变量查找机制
在函数被执行时，会优先查找当前作用域中的变量，如果没找到，则依次向上查找
注意：

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

3.js垃圾回收机制：简称GC

内存的生命周期：
内存分配：当我们声明变量，函数，对象时，系统会自动为他们分配内存
内存使用：即读写内存，也就是使用变量，函数
内存回收：使用完毕后，由垃圾回收器自动回收不再使用的内存
说明：
1.全局变量一般不会被回收（关闭页面，则被回收）
2.一般情况下，局部变量的值，不用了，会被回收

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

4.变量提升（预解析）

1.仅仅存在于var声明的变量
2.只提升到当前作用域的最前面
3.只提升声明，不提升变量

二.函数进阶(箭头函数)

1.函数提升

1.会把所有函数声明提升到当前作用域的最前面
2.只提升函数声明，不提升函数调用
注意：函数表达式不存在函数提升

2.函数参数

动态参数：arguments

1.返回的是一个伪数组
2.只存在于函数当中
3.作用是动态获取函数的实参
4.利用for循环依次得到传递过来的实参

剩余参数(推荐使用,ES6新增)

语法： ... 例如：...arr
返回的是一个真数组
只存在于函数当中
...是语法符号，置于最末函数形参之前，用于获取多余参数

function fun(a,b,...arr) {}
fun(1,2,3,4,5)
实参1给了形参a
实参2给了形参b
实参3，4，5则都给了...arr			

展开运算符

语法： ... 例如：...arr

1.不会修改原数组
2.运用场景  求数组最大值/最小值   合并数组等
3.只存在于数组
4.返回的不是一个数组

箭头函数

语法：()=>{}
1.只有一个形参时可以省略小括号：x =>{}
2.只有一行代码时，可以省略大括号，并且无需写return：x => x
3.箭头函数可以返回一个对象
4.加括号的函数体返回的是一个对象字面量的表达式

const fn = (uname) => ({name:uname})
fn('刘德华')

使用场景：替代需要匿名函数的地方，用于函数表达式

箭头函数参数
1.没有arguments动态参数
2.有剩余参数 ...arr

箭头函数this

1.箭头函数不绑定this关键字，箭头函数中的this，
指向的是上一层作用域的this执向
2.箭头函数适合与this无关的回调，定时器，数组方法的回调
3.箭头函数不适合与this有关的回调，构造函数，事件回调，对象的方法
4.箭头函数不能作为构造函数，因为构造函数的new关键字会改变this指向，
而箭头函数没有自己的this，则改变不了this的指向

三.解构赋值

解构赋值

数组解构

是什么？将数组的单元值快速批量的去赋值给一系列的变量的简洁语法
1.let [a,b,c] = [1,2,3]
2.在这个数组里面，a,b,c与1,2,3一一对应 d则返回undefined
let [a,b,c,d] = [1,2,3]
3.变量少，单元值多，则只返回应有的变量，多的单元值则不返回
剩余参数解决 const [a,b,…c] = [1,2,3,4]
4.防止有undefined传递单元值，可以设置默认值
const [a = 1,b=2] = [1]
5.按需导入赋值
const [a,b, ,d] = [1,2,3,4]
返回1,2,4
6.多维数组解构
const [a,b,[c,d]] = [1,2,[3,4]]
交换2个变量

let a = 1
let b = 2;(这里必须打分号)
[a,b]=[b,a]

对象解构

1.语法：const {uname,age} = {uname:’pink’,age:’18’}

注意
变量名与属性名必须相同
解构的变量名不能和外面的变量名冲突
对象中找不到与解构赋值的变量名相同的属性名，则会返回undefined
2.改变对象解构的变量名
const {uname：username,age} = {uname:’pink’,age:’18’}
3.解构数组对象
const [{uname,age}] = [{uname:’pink’,age:6}]
4.多级对象解构

const {name,family:{m,f,s},age} = {
           name:'pink',
           family:{
                      m:'妈妈',
                      f:'爸爸',
                      s:'妹妹'
           },
           age:6}

5.数组多级对象解构

const [{name,family:{m,f,s},age}] = [{
           name:'pink',
           family:{
                      m:'妈妈',
                      f:'爸爸',
                      s:'妹妹'
           },
           age:6}]

函数参数的解构赋值

function fn({name,age}) {
            console.log(name,age)
         }
         fn({name:'1',age:2})

1.当函数的“参数是对象类型”的时候，就可以对参数进行解构。一般会封装发送ajax请求的函数，ajax参数一般是对象类型函数参数解构实际开发中有什么好处?
2 .登录函数: 参数是用户名和密码
参数是对象obj的弊端 :
a.阅读性不高 : 阅读性不高，不知道这个接口参数到底是什么?b.会增加参数误传的风险(2)使用

解构赋值接收参数
1.阅读性高 :一看形参就知道你传的是是什么
2.避免参数误传导致bug