JavaScript-作用域、解构、箭头函数

作用域

局部作用域

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

函数作用域

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

<script>
	function counter(x, y) {
		const s = x + y
		console.log(s)
	}
	// 设用 counter 函数
	counter(10, 8)
	// 访问变量 s
	console.log(s)// 报错
</script>

总结：

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

块作用域

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

for(let t = 1; t < 6; t++) {
	console.log(t) //正常运行
}
console.log(t) //报错

总结：

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

全局作用域

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

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

<script>
	const num = 10
	function fn() {
		//函数内部可以访问全局作用域的变量
		console.log(num)
	}
</script>

总结：

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

作用域链

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

• 在函数被执行时，会优先在当前函数作用域内查找变量
• 如果当前作用域查找不到则会依次逐级查找父级作用域，直到全局作用域

总结：

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

JS垃圾回收机制

垃圾回收机制（Garbage Collection） 简称GC

JS中内存的分配和回收都是自动的，内存在不使用的时候会被系统自动回收

不在用到的内存，没有及时释放，就会造成内存泄漏（内存无法被回收）

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

1. 内存分配：当声明变量、函数、对象时，系统会自动为他们分配内存
2. 内存使用：即读写内存，也就是使用变量、函数等
3. 内存回收：使用完毕，由垃圾回收程序自动回收不再使用的内存
4. 说明：
   • 全局变量一般不会回收（关闭页面时才回收）
   • 一般情况下，局部变量的值不再被使用，就会被自动回收

补充知识_堆栈空间分配区别：

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

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

引用计数法

IE采用的引用计数算法，定义“内存不再使用”，就是检查一个对象是否有指向它的引用，没有被引用则视为不再使用，就会回收

算法：

1. 跟踪记录被引用的次数
2. 如果被引用一次，则即为1，每次引用会累加++
3. 减少引用则累减–
4. 如果引用数达到0时，则会释放内存

const arr = [1, 2, 3, 4]
arr = null //原先arr指向数组，现在指向null，则原先的数组不再被引用，则被回收

let person = {
	age: 18,
	name: '牛马程序员'
}
let p = person  //person记作一次引用
person = 1
p = null //不再被引用，对象被回收

引用计数法存在一个致命的问题，就是嵌套引用（循环引用）

如果两个对象相互引用，尽管他们已经不再使用，垃圾回收器也不会进行回收，导致内存泄露

function fn() {
	let o1 = {}
	let o2 = {}
	o1.a = o2
	o2.a = o1
	// 这种情况永远也不会被回收的
}

解决这个问题就用到另外一种回收算法：标记清除法

标记清除法

现在的浏览器大多不再使用引用计数法，而是使用标记清除法

核心算法：

1. 标记清除算法将“不再使用的对象”定义为“无法到达的对象”
2. 就是从根部（全局）出发定时地扫描内存中的对象，能够到达的对象则还需要使用
3. 无法从根部到达的对象，会被标记为不再使用，会被回收

• 这就解决了引用计数法遇到循环引用的时候无法判断的情况

闭包

闭包是一种比较特殊的函数，使用闭包能够访问函数作用域中的变量。从代码形式上看闭包是一个做为返回值的函数，可以实现数据私有化。

闭包 = 内层函数 + 外层函数的变量

闭包的作用：

• 封闭数据，实现数据私有，外部也可以访问函数内部的变量
• 闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来

// 例如实现累加的操作，需要累加数据不被随意修改
function num() {
	let count = 1
	function fn() {
		count++
		console.log(`函数被调用${count}次`)
	}
	return fn
}
const result = num() // 相当于返回一个函数，即fn()
result() // 打印2
result() // 打印3
// 这样实现了累加的同时，count值不会被随意修改，实现了数据的私有

函数进阶

变量提升

变量提升是 JavaScript 中比较奇怪的现象，它允许在变量声明之前即被访问

// 访问变量 num
console.log(str + '件')  // 打印出undefined件
// 声明变量 str
var num = 10
// 只提升声明，不提升赋值，相当于在最前面声明var num，然后在此处赋值

总结：

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

函数提升

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

// 只提升函数声明，不提升函数调用
foo()
function foo() {
	console.log(`函数在声明前被调用`)
}

bar()
var bar = function () {
	console.log(`函数表达式不存在提升`)
}

总结：

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

函数参数

函数参数的使用细节，能够提升函数应用的灵活度。

参数默认值

// 设置参数默认值
function sayHi(name="小明", age=18) {
	document.write(`<p>大家好，我叫${name}，我今年${age}岁了。</p>`);
}
// 调用函数
sayHi();
sayHi('小红');
sayHi('小刚', 21);

总结：

1. 声明函数时为形参赋值即为参数的默认值
2. 如果参数未自定义默认值时，参数的默认值为 undefined
3. 调用函数时没有传入对应实参时，参数的默认值被当做实参传入

动态参数

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) // 两个参数

总结：

1. arguments 是一个伪数组，只存在于函数之中
2. arguments 的作用是动态获取函数的实参
3. 可以通过for循环依次得到传递过来的实参

剩余参数

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

总结：

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

展开运算符

展开运算符（...），将一个数组进行展开

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

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

const arr = [1, 2, 3]
console.log(Math.max(...arr)) // 3
console.log(Math.min(...arr)) // 1

const arr2 = [4, 5, 6]
const arr3 = [...arr, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5, 6]

...运用区别：

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

箭头函数

箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。

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

基本语法

基础写法：

// 普通写法
const fn = function () {
	console.log('我是普通函数')
}
fn()
// 箭头函数
const fn = () => {
	console.log('我是箭头函数')
}
fn()

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

// 普通写法
const fn = function (x) {
	return x + x
}
// 箭头函数
const fn = x => {
	return x + x
}
console.log(fn(2)) // 打印2

如果函数体只有一行，可以写在一行上，并且无需写return返回：

// 普通写法
const fn = function (x, y) {
	return x + y
}
// 箭头函数
const fn = (x, y) => x + y

console.log(fn(1, 2)) // 打印3

箭头函数可以直接返回一个对象：

// 普通写法
const fn = function (uname) {
	return {uname: uname}
}
// 箭头函数
const fn = uname => ({uname: uname})

console.log(fn('周杰伦')) // {uname: '周杰伦'}

箭头函数参数

1. 普通函数有arguments动态函数
2. 箭头函数没有arguments动态函数，但是有剩余函数...args

const getSum = (...args) => {
	let sum = 0
	for (let i = 0; i < args.length; i++) {
		sum += args[i]
	}
	return sum
}
console.log(getSum(2, 3)) // 5

箭头函数this

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

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

// 以前this的指向：  谁调用的这个函数，this 就指向谁
console.log(this)  // window
// 普通函数
function fn() {
	console.log(this)  // window
}
window.fn()
// 对象方法里面的this
const obj = {
	name: 'andy',
	sayHi: function () {
		console.log(this)  // obj
	}
}
obj.sayHi()

// 箭头函数的this  是上一层作用域的this 指向
const fn = () => {
	console.log(this)  // window
}
fn()
// 对象方法箭头函数 this
const obj = {
	uname: 'pink老师',
	sayHi: () => {
		console.log(this)  // window
	}
}
obj.sayHi()

const obj = {
	uname: 'pink老师',
	sayHi: function () {
		console.log(this)  // obj
		let i = 10
		const count = () => {
			console.log(this)  // obj ，沿用上一级的this
		}
		count()
	}
}
obj.sayHi()

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

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

解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：

// 普通的数组
let arr = [1, 2, 3]
// 批量声明变量 a b c 
// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
let [a, b, c] = arr
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 典型用法：交换两个变量
let x = 1
let y = 2; // 必须有分号
[y, x] = [x, y]
console.log(x) // 2
console.log(y) // 1

// 按需导入，可忽略部分参数
const [a, , c, d] = [1, 2, 3, 4]
console.log(a) // 1
console.log(c) // 3
console.log(d) // 4

// 支持多维数组的结果
const [a, b] = [1, [2, 3]]
console.log(b) // [2, 3]
const [a, [b, c]] = [1, [2, 3]]
console.log(a) // 1
console.log(b) // 2

总结：

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作
3. 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined
4. 变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位
5. 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

注意_需要前面加分号的情况：

1. 立即执行函数

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

2. 数组解构

//数组开头的，特别是前面有语法的一定要注意加分号
;[b, a] = [a, b]

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示：

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

// 允许给定新的变量名
const {name: uname, age} = user
console.log(uname) // 小明

// 支持数组对象解构，也支持多级对象解构
const user = [
	{
		name: '小明',
		age: 18
	}
];
const [{name, age}] = user
console.log(name, age) // {name: '小明'， age: 6}

总结：

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 对象中找不到与变量名一致的属性时变量值为 undefined
4. 允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效

注：支持多维解构赋值

// 1. 这是后台传递过来的数据
const msg = {
	"code": 200,
	"msg": "获取新闻列表成功",
	"data": [
		{
			"id": 1,
			"title": "5G商用自己，三大运用商收入下降",
			"count": 58
		},
		{
			"id": 2,
			"title": "国际媒体头条速览",
			"count": 56
		},
		{
			"id": 3,
			"title": "乌克兰和俄罗斯持续冲突",
			"count": 1669
		},
	]
}

// 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
const { data } = msg
console.log(data)
// 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
// msg 虽有很多属性，但是我们利用解构只要 data值
function render({ data }) {
	// 我们只要 data 数据
	// 内部处理
	console.log(data)
}
render(msg)  // 在此处相当于const { data } = msg传入函数

// 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData
function render({ data: myData }) {
	// 要求将 获取过来的 data数据 更名为 myData
	// 内部处理
	console.log(myData)
}
render(msg)

遍历数组forEach方法

forEach()方法用于调用数组的每个元素，并将元素传递给回调函数

注意：

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

// forEach 就是遍历  加强版的for循环  适合于遍历数组对象
const arr = ['red', 'green', 'pink']
arr.forEach(function (item, index) {
	console.log(item)  // 数组元素 red  green pink
	console.log(index) // 索引号
})

filter筛选数组

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

主要使用场景： 筛选数组符合条件的元素，并返回筛选之后元素的新数组

const arr = [10, 20, 30]
const nA = arr.filter(function (item, index) {
	return item >= 20
})
console.log(nA) // [20, 30]
// 返回的符合条件的新数组
// 使用箭头函数
const newArr = arr.filter(item => item >= 20)
console.log(newArr)

• 返回值： 返回数组，包含了符合条件的所有元素，如果没有符合条件的元素则返回空数组
• 参数： currentValue必须写，index可选
• 因为返回新数组，所有不会影响原数组