前端学习--JS进阶(1) 作用域/函数进阶/解构赋值

一、作用域

确定变量被访问的范围

1.1 局部作用域

函数作用域：在函数内声明的变量只能在函数内部访问

函数的参数也是函数内的局部变量

不同函数内部声明的变量无法互相访问

函数执行完毕，函数内部变量就被清空

 块作用域：使用{ }包裹的代码称为块，块内部声明的变量外部有可能无法访问

1.2 全局作用域

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

尽可能少声明全局变量，防止被污染

1.3 作用域链

本质上是变量查找机制

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

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

子作用域可以访问父作用域，父作用域无法访问子作用域

1.4 JS垃圾回收机制

内存的生命周期

内存分配 -- 声明变量、函数时，系统自动分配内存

内存使用 -- 读写内存，使用变量、函数

内存回收 -- 使用完毕，由垃圾回收器自动回收不再使用的内存

内存泄漏

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

垃圾回收算法--引用计数法

IE采用的方法，如果该对象被引用一次，次数++，减少一个引用，次数--,如果引用是0，就自动释放内存

如果两个变量相互引用，则无法回收导致内存泄漏

垃圾回收算法--标记清除法

将引用计数法中“不再使用的对象”定义为“无法达到的对象”

从根部出发扫描内存中对象，如果可达就标记，清除那些不被标记的对象

1.5 闭包

内层函数中访问到外层函数的作用域（外部创建的变量）

//闭包的基本写法 函数外部可以调用函数内部的变量
        function outer(){
            const a = 20
            function inner(){
                console.log(a)
            }
            return inner
        }
        const fun = outer()
        fun()

 应用：统计函数被调用的次数--数据私有

1.6 变量提升

允许在变量声明之前被访问（var）

如果使用了一个未声明的变量，就把所有var声明的变量提升到当前作用域的最前面，且只提升声明，不提升赋值

二、函数进阶

2.1 函数提升

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

2.2 函数参数

动态参数

函数传入参数的数量不确定

       function getSum(){
            //arguments伪数组
            let sum = 0
            for(let i = 0; i < arguments.length; i++){
                sum+=arguments[i]
            }
            return sum
        }
        console.log(getSum(2,3))
        console.log(getSum(2,3,4))
        console.log(getSum(2,3,4,5))

剩余参数

允许将一个不定量的参数表示为一个数组

        function fun(a, b,...arr){
            //arr真数组
            //提倡使用
            console.log(a)
            console.log(b)
            console.log(arr)
        }
        fun(1)//1 undefined []
        fun(1,2,3,4,5) //1 2 [3,4,5]

展开运算符 

将一个数组展开

const arr = [1,2,3,4]
//展开运算符
console.log(...arr) //1 2 3 4

//求数组最值
console.log(Math.max(...arr)) // 4

//合并数组
const arr2 = [5,6,7,8]
const arrMerge = [...arr,...arr2]
console.log(arrMerge) //[1,2,3,4,5,6,7,8]

应用场景：求数组最值、合并数组 

2.3 箭头函数

使用更简单的函数写法且不绑定this，适用于本来需要匿名函数的地方

        const fn = function(){
            console.log(123)
        }
        //箭头写法
        const fnj = () => {
            console.log(123)
        }

        //有参数
        const fn1 = function(x){
            console.log(x)
        }
        const fn2 = (x) => {
            console.log(x)
        }
        //如果只有一个形参
        const fn3 = x =>{
            console.log(x)
        }
        //只有一行代码省略大括号
        const fn4 = x => console.log(x)
        //如果是返回值
        const fn5 = x => x + x  //等价return x+x

        //加括号直接返回对象 属性名：属性值
        const fun = (uname) =>({uname: uname})
        fun('刘德华')

箭头函数没有动态参数，只有剩余参数

箭头函数this 

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

        const obj = {
            uname:'august',
            sayHi: function (){
                console.log(this) //obj
                const fn = () => console.log(this) //obj
                fn()
            }
        }
        obj.sayHi()

三、解构赋值

3.1 数组解构

将数组的单元值快速批量赋值给一系列变量

const arr = [10,20,30]
const [min,avg,max] = arr

//等价于
//const min = arr[0]
//const avg = arr[1]
//const max = arr[2]

//变量值快速交换
let a = 1
let b = 2; //分号必须有
[b, a] = [a, b]
console.log(a, b) //2 1

js中必须加分号的情况

//1 立即执行函数
(function f(){})();

//2 数组开头
;[a, b] = [b, a]

3.2 对象解构

        //要求属性名和变量名一致
        const {uname, age} = {uname:'august', age:18}
        //等价于
        //const uname = obj.uname
        //const age = obj.age
        console.log(uname, age) //august 18

        //如果要改名
        const {uname:username, age:userage} = {uname:'seven',age:7}
        console.log(username,userage) //seven 7

        //数组对象
        const goods = [
            {
                goodsName:'小米',
                price:1999
            }
        ]
        const [{goodsName, price}] = goods
        console.log(goodsName, price)

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

        const {name,family:{mother,father,brother},age} = pig
        console.log(name,mother,father,brother)

forEach（）

与map类似，但是没有返回值

arr.forEach(function(item,index){
    //函数体
})