JS高级 -- 作用域&解构&箭头函数

1. 作用域

作用域(scope)规定了变量能够被访问的“范围”离开了这个“范围”变量便不能被访问

作用域分为：局部作用域、全局作用域

1.1 局部作用域

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

函数作用域:

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

<script>
	function getSum() {
	// 函数内部是函数作用域 属于局部交量
		const num = 19
	}
	console.log(num) // 此处报错 函数外部不能使用局部作用城交
</script>

总结：

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

块作用域

在JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将[有可能] 无法被访问。

for (let t = 1; t <= 6; t++) {
	// t 只能在该代码块中被访问
	console.log(t) // 正常
}
//超出了t 的作用域
console.log(t) // 报错

总结：

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

1.2 全局作用域

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

全局作用域中声明的变量，任何其它作用域都可以被访问

<script>
// 全局作用域
// 全局作用城下声明了 num 变量
const num = 10
function fn() {
// 函数内部可以使用全局作用域的交
console.1og(num)
}
// 此处全局作用域
</script>

注意：

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

1.3 作用域链

作用域链本质上是底层的变量查找机制

在函数被执行时，会优先查找当前函数作用域中查找变量

如果当前作用域查找不到则会依次逐级查找父级作用域 直到全局作用域

总结:

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

<script>
	// 全局作用域
	let a = 1
	let b = 2
	// 局部作用域
	function f() {
		let a = 1
		// 局部作用域
		function g() {
			a= 2
			console.log(a)
		}
		g() // 调用g
	}
	f() // 调用f
</script>

1.4 JS垃圾回收机制

垃圾回收机制(Garbage Collection) 简称 GC

JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收

内存的生命周期
JS环境中分配的内存，一般有如下生命周期：

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

说明：

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

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

// 为变量分配内存
const age = 18
// 为对象分配内存
const obj = {
	age: 19
}
// 为函数分配内存
function fn() {
	const age = 18
	console.log(age)
}

算法说明

堆栈空间分配区别：

1. 栈(操作系统)：由操作系统自动分配释放函数的参数值、局部变量等，基本数据类型放到栈里面
2. 堆(操作系统)：一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型放到堆里面.

两种常见的浏览器垃圾回收算法：引用计数法 和 标记清除法

第一种：引用计数

IE采用的引用计数算法，定义“内存不再使用”，就是看一个对象是否有指向它的引用，没有引用了就回收对象

算法：

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

但它却存在一个致命的问题：嵌套引用 (循环引用)
如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄露。

function fn(){
	let o1 = {}
	let o2 = {}
	o1.a = o2
	o2.a = o1
	return '引用计数无法回收'
}
fn()

因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露

第二种：标记清除法
现代的浏览器已经不再使用引用计数算法了

现代浏览器通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的

核心：

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

1.5 闭包

概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域

简单理解：闭包 = 内层函数 + 外层函数的变量

闭包作用：封闭数据，提供操作，外部也可以访问函数内部的变量

闭包应用：实现数据的私有

闭包可能引起的问题：内存泄漏

//先看个简单的代码
function outer() {
	const a = 1
	function f() {
		console.log(a)
	}
	f()
}
outer()

闭包的基本格式：

function outer() {
	let i = 1
	function fn() {
		console.log(i)
	}
		return fn
}
const fun = outer()
fun() // 1
//外层函数使用内部函数的变量


// 简约写法
function outer() {
	let i = 1
	return function () {
		console.log(i)
	}
}
const fun = outer()
fun() // 调用fun 1
//外层函数使用内部函数的变量

function fn() {
	let count = 1
	function fun() {
		count++
		console.log(`函数被调用${count}次`)
	}
	return fun
}
const result = fn()
result() // 2
result() // 3

//这样实现了数据私有，无法直接修改count

1.6 变量提升

变量提升是JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问(仅存在于var声明变量)

注意：

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

<script>
// 访问变量 str
console.log(str + 'world!')
// 声明变量 str
var str = 'hello'
</script>

说明：
JS初学者经常花很多时间才能习惯变量提升，还经常出现一些意想不到的bug，正因为如此，ES6引入了块级作用域用let 或者 const声明变量，让代码写法更加规范和人性化。

2. 函数进阶

2.1 函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用

// 调用函数
foo()
// 声明函数
function foo() {
	console.log('声明之前即被调用...')
}

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

总结：

1. 函数提升能够使函数的声明调用更灵活
2. 函数表达式不存在提升的现象
3. 函数提升出现在相同作用域当中

2.2 函数参数

2.2.1 动态参数

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

//求和函数，计算所有参数的和
function sum() {
// console,log(arguments)
let s = 0
for(let i = 0; i < arguments.length; i++) {
	s += arguments[i]
}
console.log(s)
}
// 调用求和函数
sum(5，10) // 两个参数
sum(1，2，4) // 两个参数

2.2.2 剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

function getSum(...other) {
// other 得到[1,2,3]
console.log(other)
}
getSum(1，2，3)

1. … 是语法符号，置于最末函数形参之前，用于获取多余的实参
2. 借助 … 获取的剩余实参，是个真数组

function config(baseuRL,， ...other) {
	console.log(baseURL) // 得到http://baidu.com
	console.log(other)// other 得到 ['get’，"json']
}
// 调用函数
config('http://baidu.com', 'get', 'json');

开发中，还是提倡多使用 剩余参数

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

典型运用场景：求数组最大值（最小值）、合并数组等

const arr1 = [1,5,3,8,2]
console.log(...arr1) // 1 5 3 8 2
const arr2 = [23,21]
arr2 = [...arr,...arr2]
console.log(arr) //  1 5 3 8 2 23 21

说明： 不会修改原数组

总结：

• 剩余参数：函数参数使用，得到真数组
• 展开运算符：数组中使用，数组展开

2.3 箭头函数

目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景：箭头函数更适用于那些本来需要匿名函数的地方

2.3.1 基本语法

语法1：基本写法：

// 普通函数
const fn = function () {
	console.log('我是普通函数')
}
fn()

语法2：只有一个参数可以省略小括号

// 普通函数
const fn = function(x){
	return x+x
}
console.log(fn(1))

//箭头函数
const fn = x => {
	return x+x
}
console.log(fn(1))

语法3：如果函数体只有一行代码，可以写到一行上，并且无需写return直接返回值

// 普通函数
const fn = function (x, y) {
	return x + y
}
console.log(fn(1，2)) // 3

// 箭头函数
const fn = (x,y) => x + y
console.log(fn(1,2)) // 3

//更简洁的语法  阻止表单默认事件
const form = document.querySelector('form')
form.addEventlistener('click'，ev => ev.preventDefault())

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

const fn1 = uname => ({ uname: uname })
console.log(fn1('老师'))

2.3.2 箭头函数参数

普通函数有arguments动态参数

箭头函数没有 arguments 动态参数，但是有 剩余参数 …args

const getSum = (...args) => {
	let sum = @
	for (let i = 0; i < args.length; i++) {
		sum += args[i]
	}
return sum	// 注意函数体有多行代码需要return
}
console.log(getSum(1，2，3)) // 6

2.3.3 箭头函数this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this

console.log(this) // 此处为window
const sayHi = function (){
	console.log(this) // 普通函数指向调用者 此处为window
}
btn.addEventListener('click', function () {
	console.log(this) // 当前this 指向 btn
}

const user = {
	name:'小明'
	// 该箭头函数中的 this 为函数声明环境中 this 一致
	walk: () =>{
		console.log(this) // 指南window 不是user
	}
}
user.walk()


const user = {
	name:'小明',
	sleep: function () {
		console.log(this) // 指向 user
		const fn = () => {
			console.log(this) // user 该箭头函数中的 this 与 sleep 中的 this 一致
		}
		// 调用箭头函数
		fn()
	}
}
user.sleep()

在开发中，【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数

<script>
	// DOM 节点
	const btn = document.queryselector(".btn')
	// 箭头函数 此时 this 指向了 window
	btn.addEventlistener("click",() => {
		console.log(this)
	})
	// 普通函数 此时 this 指向了 DOM 对象
	btn.addEventListener("click", function () {
		console.log(this)
	})
</script>

3. 解构赋值

3.1 数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

基本语法：

1. 赋值运算符 =左侧的 [ ] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作

// 普通的数组
const arr = [100,60, 80]
// 批量声明变量 max min avg
// 同时将数组单元值 100 60 80 依次值给变 max min avg
const [max, min, avg] = arr
console.log(max) // 100
console.log(min) // 60
console.log(avg) // 80

基本语法:典型应用交互2个变量

let a = 1
let b = 3; //这里必须有分号
[b,a] = [a, b]
console.log(a) // 3
console.log(b) // 1

注意：js前面必须加分号的情况

1. 立即执行函数

   (function t() [ })();
   // 或者
   ;(function t() { }()
   

2. 数组解构：数组开头的，特别是前面有语句的一定注意加分号

   ;[b, a] = [a, b]
   

数组解构的细节：

<script>
// 1. 变量多， 单元值少 ， undefined
    // const [a, b, c, d] = [1, 2, 3]
    // console.log(a) // 1
    // console.log(b) // 2
    // console.log(c) // 3
    // console.log(d) // undefined
    // 2. 变量少， 单元值多
    // const [a, b] = [1, 2, 3]
    // console.log(a) // 1
    // console.log(b) // 2
    // 3.  剩余参数 变量少， 单元值多
    // const [a, b, ...c] = [1, 2, 3, 4]
    // console.log(a) // 1
    // console.log(b) // 2
    // console.log(c) // [3, 4]  真数组
    // 4.  防止 undefined 传递
    // const [a = 0, b = 0] = [1, 2]
    // const [a = 0, b = 0] = []
    // console.log(a) // 1
    // console.log(b) // 2
    // 5.  按需导入赋值
    // const [a, b, , d] = [1, 2, 3, 4]
    // console.log(a) // 1
    // console.log(b) // 2
    // console.log(d) // 4

    // const arr = [1, 2, [3, 4]]
    // console.log(arr[0])  // 1
    // console.log(arr[1])  // 2
    // console.log(arr[2])  // [3,4]
    // console.log(arr[2][0])  // 3

    // 多维数组解构
    // const arr = [1, 2, [3, 4]]
    // const [a, b, c] = [1, 2, [3, 4]]
    // console.log(a) // 1
    // console.log(b) // 2
    // console.log(c) // [3,4]


    const [a, b, [c, d]] = [1, 2, [3, 4]]
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
    console.log(d) // 4
  </script>

3.2 对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法

1. 赋值运算符 = 左侧的 { } 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2. 对象属性的值将被赋值给与属性名相同的变量

3. 注意解构的变量名不要和外面的变量名冲突否则报错

4. 对象中找不到与变量名一致的属性时变量值为 undefined

   <script>
   	// 普通对象
   	const user = {
   		name:'小明',
   		age: 18
   	};
   	// 批量声明变量 name age
   	// 同时将数组单元值 小明 18 依次赋值给变量 name age
   	const {name, age} = user
   
   	console.log(name) // 小明
   	console.log(age) // 18
   </script>
   

给新的变量名赋值

可以从一个对象中提取变量并同时修改新的变量名

// 普通对象
const user = {
	name:小明'
	age: 18
// 把 原来的name最重新命名为 uname
const {name:uname,age} = user
console.log(uname)//小明
console.log(age) // 18

冒号表示 " 什么值：赋值给谁 " 即“旧变量名：新变量名”文章来源地址https://www.toymoban.com/news/detail-426396.html

数组对象解构

const pig = [
	{
	uname :"佩奇",
	age: 6
	}
]
const [{ uname, age }] = pig
console.log(uname)
console.log(age)

多级对象解构

const pig = {
	name:'佩奇',
	family:{
		mother:'猪妈妈'
		father:'猪爸爸'
		sister:'乔治'
	},
	age: 6
}
// 多级对象解构
const { name,family:{ mother, father, sister } } = pig
console.log(name)
console.log(mother)
console.log(father)
console.log(sister)

多级数组对象解构

const pig = [
	{
		name:'佩奇',
		family:{
			mother:'猪妈妈'
			father:'猪爸爸'
			sister:'乔治'
		},
		age: 6
	}
]
// 多级对象解构
const [{ name,family:{ mother, father, sister } }] = pig
console.log(name)
console.log(mother)
console.log(father)
console.log(sister)

到了这里，关于JS高级 -- 作用域&解构&箭头函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！