【箭头函数-解构赋值(对象/数组解构)-多维数组】 js进阶

目录

多维数组

1. 对象解构的变量名更改，

 多级对象解构的写法

 解构数组，多级对象的方法

对象多级数组多级解构，并传参

 

箭头函数的基本写法 

        /*  箭头函数的基本写法
                1. 箭头函数也是一种表达式，是用来替代匿名函数的
                2. 只有一个形参的时候，可以省略形参的小括号,除此之外不能省
                3. 函数只有一行代码的时候可以省略大括号，并自动做为返回值被返回 (return)
                5. 也可以返回一个对象
                6. 箭头函数属于表达式函数，因此不存在函数提升
        */
       
    //    1.函数的表达式
    const fn1 = function(){
        console.log('我是函数的表达式')
    } 
    fn1()

    //   1. 箭头函数的写法
    const fn2 = () => {
        console.log('我是箭头函数的写法')
    }

    //  2.只有一个形参的时候，可以省略形参的小括号
    const fn3 = x => {
        console.log(x)
    }
    fn3('我只有只有一个形参')

    //  3.只有一行代码的时候可以省略大括号
    const fn4 = () => console.log('省略大括号')
    fn4()

    //  4. 只有一行代码的时候，可以省略return
    const fn5 = x => x+x
    console.log(fn5(4));

    //  5. 也可以返回一个对象
    const fn6 = obj => ({uname:obj})
    console.log(fn6('刘谦'))

箭头函数的this指向 

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

    /*  1. 箭头函数指向谁
            箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
        2. 以前this的指向：  谁调用的这个函数，this 就指向谁
    */

   console.log(this)    //window

   function fn(){
    console.log(this)
   }
   fn() //window.fn()


    //  2. 普通函数的this  是谁调用我，我指向谁
    const obj = {
      name: 'andy',
      sayHi: function () {
        console.log(this)  // obj   
      }
    }
    obj.sayHi()
    console.log(undefined+10)


    // 3. 箭头函数没有this  他指向上一层作用域的this 
    const fn7 = () => {
      console.log(this)  // window
    }
    fn7()

    const obj1 = {
        uname:'名字',
        age:18,
        sayHi:()=>{
            console.log(this);  //window
        }
    }
   obj1.sayHi() // window调用的obj1 所以 this 指向window


//    4.
   const obj2 = {
    name:'迪丽热巴',
    age:18,
    say:()=>{   //上层函数也是箭头也没有this
        let a = 10
        const fn8 = ()=>{
            console.log(this)   //window    箭头函数没有this
        }
        fn8()
    }
   }
   obj2.say()   //这里调用也是window调用  所以最终this指向的是window



//    5.
const obj3 = {
    name:'刘德华',
    age:18,
    say:function(){ //这是普通函数，有this  所以而调用他的是obj3 所以this最终指向obj3
        console.log(this)
        const fn9 = ()=>{
            console.log(this)   // 箭头函数没有this，往自己上级作用域找this
        }
        fn9()
    }
}
obj3.say()  //  {name: '刘德华', age: 18, say: ƒ}       obj3是调用者

 数组解构

        /*  数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法
            数组解构主要应用：
                交换两个变量值
            两种后面继续添加 ； 分号的情况
                1. [] 数组开头的，在前面添加分号
                2. 立即函数 ()();
        */
       
        let [max,min,avg] = [100,0,50]  //批量依次把max=arr[0]  min = arr[1]
        console.log(max,min,avg);

        // 交换俩个变量值
        let [a,b] = ['a','b'];
        [b,a] = ['a','b']
        console.log(b)
        console.log(a)



        const pc = ['海尔','联想']
        function getValue(){
            return ['海尔','联想']
        }
        let [hr,lx] = getValue()
        console.log(hr);
        console.log(lx);

 解构数组里面的变量多于值，或少于值，或剩余参数

 // 解构数组接收的类似于函数的形参接收
        let [d,e,f] = [1,2]
        console.log(d,e,f); //f是undefined
        let [g,...x] = [1,2,3,4,5]
        console.log(g)
        console.log(x)  //得到的是一个数组

多维数组

多维数组的声明和查询 

        // 多维数组
        let arr2 = [1,2,[3,4]]
        console.log(arr2[1]);   //2
        console.log(arr2[2]);   //(2) [3, 4]
        console.log(arr2[2][0]);//3
        console.log(arr2[2][1]);//4

多维数组的解构

        // 1. 多维数组的解构
        let [r,u] = [1,[2,3]]
        console.log(r);//1
        console.log(u);//(2) [2, 3]
        // 2. 多维数组的解构
        let [l,[w,m]] = [1,[2,3]]
        console.log(l);//1
        console.log(w);//2
        console.log(m);//3

对象解构

        // 一个对象
        const obj = {
            name:'刘军',
            age:18
        }
        // 解构语法 要求解构变量名要与obj里面属性名字一模一样
        const {name,age} = obj
        console.log(name)
        console.log(age)
        // 解构2
        const {uname,say} = {uname:'夏雪',say:function(){console.log(1);}}
        console.log(uname); //夏雪
        console.log(say);   //ƒ (){console.log(1);}
        say()   //调用它

1. 对象解构的变量名更改，

2. 解构数组对象

        // 解构变量名进行改名字
        const pig = {name:'佩奇',age:6}
        // 解构
        const {name:uname,age} = pig
        // 改名字了
        console.log(uname);
        console.log(age);



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

 多级对象解构的写法

        const pig = {
            name:'佩奇',
            family:{
                mother:'猪妈妈',
                father:'猪爸爸'
            },
            age:6
        }

        // 多级对象解构
        const {name,family:{mother,father},age} = pig
        console.log(mother);

 解构数组，多级对象的方法

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

对象多级数组多级解构，并传参

// 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选出当做参数传递给 函数
        function render({data}) {
            // 我们只要 data 数据
            console.log(data);
        }
        render(msg)

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