js 进阶

1.作用域

1.1局部作用域

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

1.1.1函数作用域

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

1.1.2块作用域

1.2全局作用域

1.3作用域链

本质 ：底层的变量查找机制

规则 ：就近原则  （优先查找当前函数作用域查找变量）

1.4JS垃圾回收机制

 目的 ： 了解垃圾回收机制的执行过程

学习目的 为了闭包做铺垫 

1.4.2 内存的生命周期 - 内存分配-内存使用-内存回收

①内存分配  当我们声明变量、函数、对象的时候。系统自动为他们分配内存

②内存使用   读写内存 使用变量函数等，

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

特殊情况 ： 全局变量只有在关闭页面的时候才会回收。

1.4.3l垃圾回收算法说明

①引用计数：特殊情况 变量相互引用的时候就会导致内存泄露

\

②标记清除法 （最新方法）

1.5闭包

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

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

也可以 外层函数使用内部函数的变量

1.6变量提升

只提升声明不提升赋值

 2.1函数提升

 //会把函数所有声明提升到当前作用域 
        //函数提升只会提升函数声明 不提升函数调用
        fn()
        function fn(){
            console.log('函数提升');
        }

 2.2函数实参

2.2.1动态参数

arguments 是函数内置的伪数组变量

function getSum(){
            console.log(arguments);//返回的是数组长度
            let sum = 0;
            for(let i=0;i<arguments.length;i++)
            {
                sum+=arguments[i]
            }
            console.log(sum);

        }
        getSum(2,3,4)
        getSum(1,2,4,2,2,3,4)

 2.2.2 剩余参数   开发过程中提倡使用

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

...代表剩余参数

/剩余参数 ... 将所有的实参当成a数组的 数组元素
        function getSum(...a){
           console.log(a);
            let sum = 0;
            for(let i=0;i<a.length;i++)
            {
                sum+=a[i]
            }
            console.log(sum);

        }
        getSum(2,3,4)
        getSum(1,2,4,2,2,3,4)

 2.3-箭头函数 

基本能语法写法 如下

  //箭头函数 基本语法
        // fn() 方法1
        // const fn =() =>{
        //     console.log(1);
        // }
        // fn()
         
        // 只有一个形参的时候 可以是省略小括号
        // const fn = item =>{
        //     console.log(item);
        // }
        // fn(123);
        //只有一行代码的时候，我们可以省略大括号
        // const fn = item=> item+10
        // const res = fn(123)
        // console.log((res));
        //箭头函数可以直接返回一个对象
        // const fn=(item)=>({uname:item})
        // const o = fn('张三')
        // console.log(o);   

案例1

 //利用箭头函数求和
        const  getSum=(...arr)=>{
            let sum = 0;
            for(let i=0;i<arr.length;i++){
                sum+=arr[i]
            }
            return sum
        }
        console.log(getSum(1,2,3));
        console.log(getSum(1,2,3,4,5,6));

箭头函数 没有this 

3.展开运算符

将一个数组进行展开,并且不会修改

应用场景你 求数组的最大值，最小值，合并数组.

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

//展开数组使用
        // const arr = [1,2,3]
        // console.log(...arr);
        // 拼接
        // const arr1 = [1,2]
        // const arr2 = [3,4]
        // const arr= [...arr1,...arr2]
        // console.log(arr);
        //求最大最小
        const arr =[1,2]
        console.log(Math.max(...arr));
        console.log(Math.min(...arr));

3.解构赋值

3.1.1数组解构 

 

        const arr = [100,60,80]

        // const [max,min,avg]=[100,60,80]
        const [max,min,avg]=arr;
        console.log(max,min,avg);

 

3.1.2 对象解构

 //     const obj = {
    //         uname:'pink老师',
    //         age : 18

    //     }

    //     // const {uname,age} = obj
    //     // console.log(uname,age);

    //    //对象解构的变量名 可以重新改名 对象的属性名：新变量名


    //     const{uname,age:age1}=obj
    //     //2.解构数组对象 
    //     console.log(uname,age1);

    const pig = [
        {
            name:'pig',
            age:6
        }
    ]
    const [{name,age}]=pig
    console.log(name,age);

3.3多级对象解构

        const pig={
            name:'佩奇',
            family:{
                mother:'猪妈妈',
                father:'猪爸爸',
                sister:'乔治'
            },
            age:6
        }
        
        const {name,age,family:{mother,father,sister}}=pig
        console.log(name,age,mother,father,sister);

4.遍历数组 forEach方法

 

 5.筛选数组filter 方法重点