js进阶——作用域、解构、箭头函数

作用域

局部作用域

（1）函数作用域
在函数内部声明的变量，只能在函数内部访问，外部无法直接访问
（2）块作用域
在js中使用{}包裹的代码被称为代码块，代码块内部声明的变量外部将有可能无法被访问。
let、const声明的常量会产生块作用域，但var声明的外部可以访问。
不同代码块之间无法相互访问。

全局作用域

在script和.js文件的最外层就是全局作用域，在此声明的变量在函数内部也可以被访问，全局作用域中声明的变量，任何其他作用域都可以被访问。

作用域链

本质（重要问题）：底层的变量查找机制：在函数被执行时，会优先查找当前函数作用域中查找变量。如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

垃圾回收机制

简称GC。
js中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。
内存的声明周期：
（1）内存分配：声明变量、函数、对象时，系统自动为他们分配内容
（2）内存使用：读写内存，也就是使用变量、函数
（3）内存回收：使用完毕，由垃圾回收器自动回收不再使用的内存
注意：全局变量一般不会回收（关闭页面回收），一般情况下局部变量的值不用了会被自动回收掉。
内存泄漏：程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏。

垃圾回收机制算法说明：

堆和栈空间分配区别：
堆：存放复杂数据类型。一般由程序员分配释放，若程序员不释放，就由垃圾回收机制回收。
栈：基本数据类型存放。由操作系统自动分配释放函数的参数值、局部变量等。
垃圾回收算法：引用计数法（循环引用的就会导致内存泄漏）、标记清除法（从根部定期扫描对象，找不到的就回收）

闭包

一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域。
简单来说：闭包=内层函数+外层函数的变量。一共是两个函数：内层函数+外层函数
作用：封闭数据，提供操作，使外部也能使用函数内部的变量。

闭包的基本格式

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

变量提升

var声明的变量（leltt、const不会提升）会被提升到当前作用域的最前面，但只提升声明不能提升赋值。

函数进阶

函数提升

把所有函数声明提升到当前作用域的最前面。
函数表达式不存在提升的现象。

函数参数

当不确定用户到底传入了几个实参的时候，就可以使用这两个参数。提倡多使用剩余参数。

• 动态参数
  只存在于函数中
  arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有参数。

• 剩余参数
  只存在于函数中
  剩余参数允许我们将一个不定数量的参数作为一个数组。

function oth(...other) {
    console.log(other)    //使用该数组时不用写...
    other.push(5)        //真数组可以使用数组方法
    let sum = 0
    for (let i = 0; i < other.length; i++) {
        sum += other[i]
    }
    console.log(sum)
}
oth(1, 2, 3)

…是语法符号，置于最末函数形参之前，用于获取多余的实参。
借助…获取的剩余实参，是个真数组。（可以使用数组中的pop、push方法）
提倡多使用剩余参数

• 展开运算符
  …将一个数组展开。
  是写在函数外面的，在数组中使用。不会修改原数组。
  使用场景：求数组最大最小值、合并数组。

箭头函数（重要）

基本语法

  <script>
        //普通函数
        function fn() {
            console.log('11');
        }

        //箭头函数基本写法
        const fn1 = () => {
            console.log('11')
        }
        fn1()

        //箭头函数：形参只有一个时，可以省略()，没有参数也不能省略
        const fn2 = a => console.log(a)
        fn2(1)

        //箭头函数：{}中只有一行代码时可以省略{}
        const fn3 = a => console.log(a)
        fn3(1)

        //箭头函数：可以省略return:本来是return a + a
        const fn4 = a => a + a
        console.log(fn4(1))

        //箭头函数可以直接返回一个对象，对象需要加小括号
        const fn5 = uname => ({ uname: uname })   //属性名：属性值（传过来的参数
        console.log(fn5('lxy'))   //打印对象{uname: "lxy"}

    </script>

箭头函数参数

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

箭头函数this

箭头函数不会创建自己的this（普通函数里面有this），它只会从自己的作用域链的上一层沿用this。
dom事件回调函数不推荐使用箭头函数

解构赋值（重要）

数组解构（加分号！）

将数组的单元值快速批量赋值给一系列变量的简洁语法。
基本语法：
赋值运算符 = 左侧的[]用于批量声明变量。右侧数组的单元值将被赋值给左侧的变量。
变量的顺序对应数组单元值的位置依次进行赋值操作。

//数组解构
const [max, min, avg] = [100, 80, 60]
console.log(max);

典型应用：变量交换。

• 变量多，单元值少的情况
  多出来的变量就是undefined
• 变量少，单元值多的情况
  多出来的单元值没有赋值给任何变量
• 剩余参数解决变量少，单元值多的情况
  const [a,b,…c] = [1,2,3,4]
• 防止undefined传递
  给一个默认值：const [a=0,b=0] = [1]
• 按需导入赋值
  const [a,b, ,d] = [1,2,3,4] 空了一个位置，a=1，b=2，d=4
• 支持多维数组的结构

//多维数组解构
const [e, f, [g, h]] = [1, 2, [3, 4]]
console.log(e)
console.log(f)
console.log(g)
console.log(h)

对象解构

将对象属性和方法快速批量赋值给一系列变量的简洁语法。
基本语法：
赋值运算符 = 左侧的{}用于批量声明变量。右侧对象的属性值将被赋值给左侧的变量。
对象属性的值将被赋值给与属性名相同的变量（属性名和变量名必须一致），当对象中找不到与变量名一致的属性时变量的值为undefined。
注意解构的变量名不能和外面的变量名冲突。

const obj={
    uname: 'red',
    age :18
}
const {uname,age}={ uname: 'red',age :18}
console.log(uname)
console.log(age)

• 给新的变量名赋值：可以从一个对象中提取变量并同时修改变量名。

//修改变量名
const { uname: username, age } = { uname: 'red', age: 18 }
console.log(username)

• 数组对象的解构

 //数组对象解构
        const pig = [{
            name: 'pig',
            gender: 'man'
        }]
        const [{ name, gender }] = pig
        console.log(name)
        console.log(gender)

• 多级对象解构

//多级对象解构
const pigf = {
    text: '佩奇一家',
    family: {
        mother: '猪妈妈',
        father: '猪爸爸',
        son: '猪宝宝'
    }
}
//family:{mother,father,son}  是解构family里面的对象
const { text, family: { mother, father, son } } = pigf
console.log(text)
console.log(mother)
console.log(father)

遍历数组forEach方法（重点）

适合遍历数组对象。
只能遍历，不会返回新数组。而map()会返回新数组。

const arr = ['red', 'pink', 'green']
arr.forEach(function (item, index) {
    console.log(item)
    console.log(index)
})

筛选数组filter方法（重点）

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

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