【JavaScript】JavaScript 进阶-1-作用域&解构&箭头函数

作用域 2024.10.23

局部作用域

• 函数作用域
• 块作用域（大括号{}内部）
  let、const 会产生块作用域，var不会（不推荐使用）

全局作用域

• script 标签、.js文件最外层 （尽量少使用）

作用域链（变量查找机制）

• 就近原则：优先查找当前作用域，逐级查找父级作用域，直到全局作用域

JS垃圾回收机制GC

• 生命周期（内存分配、使用、回收）
  全局变量一般不回收，局部变量自动回收
• 内存泄露（内存未释放或无法释放）
• 算法说明
  栈：自动，基本数据类型
  堆：手动，复杂数据类型
  • 引用计数法（不再使用的对象——跟踪记录被引用的次数）
    问题：嵌套/循环引用——内存无法释放——内存泄露
  • *标记清除法（无法达到的对象——标记根部可到达——回收未被标记的）
    解决了嵌套/循环引用

闭包 Closure（内层函数+外层变量）

// 简单写法
function outer(){
	const a = 1
	function f(){
		console.log(a) //内层函数访问到外层函数的作用域
	}
	f()
}
outer()

// 常见写法
function outer(){
	const a = 1
	return function(){
		console.log(a)
	}
}
const fun = outer()
fun() //调用函数

• 作用：外部访问函数内部的变量
• 应用：实现数据私有（数据封装）

function count(){
	let i = 0
	return function(){
		i++
		console.log(i)
	}
}
const fun = count()
fun() //调用函数

• 问题：内存泄露

变量提升

把所有var的变量声明提升到当前作用域的最前面

注意： 只提升变量声明，不提升变量赋值； let、const不存在变量提升； 相同的作用域； 推荐先声明再访问

函数进阶 2024.10.24

函数提升

把所有函数声明提升到当前作用域的最前面

// 错误
fun()
var fun = function(){
	console.log("函数表达式 不存在提升")
}

函数参数

• 动态参数 (arguments: 伪数组)
• 剩余参数 (…arr: 真数组)：推荐使用

展开运算符： …
应用：

Math.max(...arr) //数组最大值
const arr = [...arr1, ...arr2] //合并数组

箭头函数（重要）

• 使用场景：替代匿名函数
• 基本语法：

const fn = function(){} // 匿名函数
const fn = () => {} // 箭头函数
const fn = x => console.log(x) 
const fn = x => x + x
const fn = () => ({key:value})

• 注意：表达式函数，无函数提升；
• 箭头函数参数：无动态参数，有剩余参数
• this：
  传统：谁调用指向谁；箭头函数没有自己的this，指向上一层作用域的this（事件监听DOM回调函数不推荐使用箭头函数）

解构赋值 2024.10.24

• 数组解构（快速批量赋值）

const arr = [1, 2, 3]
const [a, b, c] = arr
const [a, b, ...c] = [1, 2, 3, 4, 5]
const [a = 0, b = 1] = [1]
const [a, , c, d] = [1, 2, 3, 4, 5]
const [a, b, [c, d]] = [1, 2, [3, 4]] // 多维数组解构
// 典型应用：交换2个变量
let a = 1
let b = 2; // 这个分号必须要加
[b, a] = [a, b]

// 立即执行函数 必须加分号
(function(){})()

• 对象解构（属性和方法 快速批量赋值）

const obj = { name: '', age: 18}
const {name, age} = obj  // 属性名和变量名一致
const {name:username , age} = obj //改名

const arr = [
	{name: '', age: 10}
]
const [{name, age}] = arr // 数组对象解构

const obj = { name: '', age: 18, family: {mother:''}}
const {name, age, family:{mother} } = obj  // 多级对象解构

function render({data: mydata}){
}

*综合案例

• 遍历数组 forEach

const arr =[]
arr.forEach(function(item, index){
})

• 筛选数据 filter

const arr =[]
arr.filter(function(item, index){
	return item >=20
})
arr.filter(item => item >= 20)