前端JavaScript入门-day06

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

目录

作用域

局部作用域 

全局作用域 

作用域链 

JS垃圾回收机制 

1. 什么是垃圾回收机制 

2.内存的生命周期 

3.算法说明

闭包 

变量提升 

函数进阶 

函数提升

函数参数 

动态参数

剩余参数

箭头函数 

基本语法 

箭头函数参数

箭头函数 this

解构赋值

数组解构

对象解构

遍历数组 forEach 方法 


作用域

作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问,
作用域分为:
        局部作用域
        全局作用域

局部作用域 

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

1. 函数作用域:

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

2. 块作用域: 

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

全局作用域 

剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组
1. ... 是语法符号,置于最末函数形参之前,用于获取 多余 的实参
2. 借助 ... 获取的剩余实参,是个 真数组
前端JavaScript入门-day06_第8张图片
开发中,还是提倡多使用 剩余参数。

箭头函数 

目的: 引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁
使用场景: 箭头函数更适用于那些本来 需要匿名函数的地方

基本语法 

语法1:基本写法
前端JavaScript入门-day06_第9张图片

语法2:只有一个参数可以省略小括号前端JavaScript入门-day06_第10张图片

 语法3:如果函数体只有一行代码,可以写到一行上,并且无需写 return 直接返回值前端JavaScript入门-day06_第11张图片

语法4:加括号的函数体返回对象字面量表达式

箭头函数参数

1. 普通函数有arguments 动态参数
2. 箭头函数 没有 arguments 动态参数,但是 有 剩余参数 ..args 前端JavaScript入门-day06_第12张图片

箭头函数 this

在箭头函数出现之前,每一个新函数根据它是被 如何调用的 来定义这个函数的this值, 非常令人讨厌。
箭头函数不会创建自己的this ,它只会从自己的作用域链的上一层沿用this。 前端JavaScript入门-day06_第13张图片

前端JavaScript入门-day06_第14张图片

解构赋值

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。
基本语法:
1. 赋值运算符 = 左侧的 [] 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作 前端JavaScript入门-day06_第15张图片
变量多 单元值少的情况: 前端JavaScript入门-day06_第16张图片

 变量的数量大于单元值数量时,多余的变量将被赋值为 undefined

变量少 单元值多的情况:前端JavaScript入门-day06_第17张图片

利用剩余参数解决变量少 单元值多的情况

前端JavaScript入门-day06_第18张图片

剩余参数返回的还是一个数组 

防止有undefined传递单元值的情况,可以设置默认值:前端JavaScript入门-day06_第19张图片 允许初始化变量的默认值,且只有单元值为 undefined 时默认值才会生效

 按需导入,忽略某些返回值:前端JavaScript入门-day06_第20张图片

支持多维数组的结构:前端JavaScript入门-day06_第21张图片

前端JavaScript入门-day06_第22张图片

对象解构

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

前端JavaScript入门-day06_第23张图片

给新的变量名赋值:

可以从一个对象中提取变量并同时修改新的变量名前端JavaScript入门-day06_第24张图片

冒号表示“什么值:赋值给谁” 

数组对象解构 前端JavaScript入门-day06_第25张图片

多级对象解构:  前端JavaScript入门-day06_第26张图片

遍历数组 forEach 方法 

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
主要使用场景: 遍历数组的每个元素

语法:

注意:
1. forEach 主要是遍历数组
2. 参数当前数组元素是必须要写的, 索引号可选。



    
    
    Document


    

控制台显示为:                           

 前端JavaScript入门-day06_第27张图片

你可能感兴趣的:(#,前端JavaScript入门,html5,css3,前端,JavaScript)