day11 ES6 箭头函数 解构

141 阅读6分钟

一、作用域

1.局部作用域

(1)函数作用域

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

(2)块作用域

被{}包含的变量,有可能在括号外不能使用。

  1. let和const声明的变量会产生块作用域。var声明的变量可以访问,不产生块作用域。
  2. 不同代码块之间的变量无法互相访问。
  3. 推荐用let 和const

2.全局变量

</script/>标签和.js文件的最外层就是所谓的全局作用域,在此声明的变量在函数内部也可以被访问。
注意:

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

二、作用域链

作用域链本质上是底层的变量查找机制
在函数被执行时,会优先查找当前函数作用域中查找变量
如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

  1. 嵌套关系的作用域串联起来形成了作用域链
  2. 相同作用域链中按着从小到大的规则查找变量
  3. 子作用域能够访问父作用域,父级作用域无法访问子集作用域

三、垃圾回收机制

js中内存的分配和回收都是自动完成的,内存不使用时候会被垃圾回收器自动回收
内存的生命周期:
js环境中分配的内存,一般有以下生命周期: 1.内存分配:当我们声明变量、函数、对象的时候,系统会自动会他们分配内存 2. 内存使用:即 读写内存,也就是使用变量,函数等 3. 内存回收:使用完毕,由垃圾回收器自动回收不再使用的内存

说明:

  • 全局变量一般不会回收(关闭页面回收)
  • 一般情况下局部变量的值不用了会被自动回收掉 内存泄漏:程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏。

四、js垃圾回收机制算法说明

1.引用计数法

看一个对象是否有指向它的引用,没有引用了就回收对象 算法:

  1. 跟踪记录被引用的次数
  2. 如果被引用了一次,那么就记录1次,多次引用会累加++
  3. 如果减少一个引用就减减
  4. 如果应用次数是0,则释放内存

两个对象相互引用就会造成无法回收,内存泄漏

2.标记清清除法

  1. 将不再使用的对象定义为“无法达到的对象”
  2. 就是从根部(在JS中就是全局对象)触发定时扫描内存中的对象。凡是能从根部到达的对象,都是还需要使用的。
  3. 那些无法由根部触发触及到的对象标记为不再使用,稍后进行回收。

五、闭包

一个函数对周围状态引用捆绑在一起,内层函数中访问到其外层函数的作用域
闭包=内层函数+外层函数变量 闭包作用:封闭数据,提供操作,外部也可以访问函数内部的变量
闭包应用:实现数据的私有
可能会引起内存泄漏。返回了一个函数一直被外部使用,标记清除法一直能找到。

六、变量提升

仅存在var中。
当前作用域用var声明的变量,都声明到当前作用域的最前面,只提升声明,不提升赋值。
注意:

  1. 变量在未声明即被访问时会报语法错误
  2. 变量在var声明之前即被访问,变量的值为undefined
  3. let,const变量不存在变量提升
  4. 变量提升出现在相同作用域中
  5. 推荐先声明再访问变量

七、函数提升

会把所有函数声明提升到当前作用域的最前面,只提升声明,不提升调用。
fun() var fun = function()这个是函数调用 函数表达式必须先声明和赋值,后调用。否则报错

1.函数参数

(1).动态参数

arguments是函数内部内置的伪数组变量,只存在函数里面。

image.png

(2).剩余参数

image.png 借助...获取的剩余实参,是个真数组。可以使用pop等数组方法。
提倡多使用真数组。

展开运算符...

展开运算符...可以将数组展开

image.png

  1. 求数组最大值 image.png 2.合并数组 image.png

七、箭头函数

使更简短的函数写法,并且不绑定this,比函数表达式更加简洁。
箭头函数更适用于那些本来需要匿名函数的地方。

1.基本语法

箭头函数属于表达式函数,因此不存在函数提升。
const fn=(x)=>{
console.log(x)}
fn(1)
只有一个形参的时候,可以省略小括号。
只有一行代码时,可以省略大括号
const fn = x => console.log(x)
const fn = x => x+x 只有一行代码可以省略return

image.png
箭头函数可以直接返回一个对象
const fn = (uname) =>({name:uname})对象的大括号和函数的大括号冲突了,用小括号括起来。
加括号的函数题返回对象字面量表达式。
image.png

2.箭头函数参数

箭头函数没有arguments动态参数,但有剩余参数 image.png

3.箭头函数this

箭头函数不会创建自己的this,他只会从自己的作用域链的上一层寻找this。
使用箭头函数前需要考虑函数中this 的值,事件回调函数使用箭头函数时,this为全局的window,因此DOM事件回调函数为了简便,还是不推荐使用箭头函数。

八、解构赋值

1.数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。 基本语法: image.png 一定要加分号

  1. 单元值少的情况。变量少,单元值多的情况。
    image.png
  2. 余参数解决变量少单元值多的情况。
    image.png
  3. 防止undefined传递 image.png
  4. 按需导入赋值
    image.png
  5. 支持多维数组

image.png

image.png

js前必须加分号的情况

image.png

  1. 即执行函数之间隔开
    image.png
    2.数组的时候,前面有代码需要加;以数组开头,视为和上一行连接在一起。

2.对象解构

对象结构是将对象属性和方法快速批量赋值给变量的简洁语法。

image.png

  1. 属性和变量名必须一致。uname,age
  2. 对象解构的变量名 可以重新改名 旧变量名:新变量名 image.png

3.数组对象的解构

image.png

4.多级对象解构

image.png
const {name,family:{mother,father,sister}} = pig注意加冒号
多级数组对象 image.png
const [{name,family:{father,mother,sister}}] = person image.png
注意渲染函数参数加{}做解构

九、遍历数组forEach方法

加强版的for循环,与map的区别:只遍历不返回数组。对象不能遍历,只能遍历数组 image.png

十、筛选数组filter方法

filter不能用+,只能用大于小于等于
image.png 简写法: image.png
item=>item>=20
第一个省略(),第二个省略return

十一、筛选渲染案例

image.png