• ES6--解构赋值


    解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组、对象、字符串的解构赋值等;

    今天是要说的是数组、对象和函数参数的解构赋值:

    一、 数组的解构赋值

    1.前后模式必须匹配,如果前面的声明的是二维数组后面的数据也是二维数组

     //数组的解构赋值
        let [a,b,c]=[12,23,34]
        console.log(a,b,c) //12,23,34
    
        let [d,[e,f],g]=[1,[2,3],4]
        console.log(d,e,f,g) //1,2,3,4
    

    2.前多后少,即前面声明的变量多,后面赋值少

    所以某些变量会解构不成功,这种情况就相当于只声明了变量未定义值,所以为undefined

    let [a,b,c]=[1,2]
    console.log(a,b,c) //1,2,undefined
    

    3.前少后多,即前面的变量少,后面的值多;这种情况分为两种:

    (1)省略赋值

    (2)不定参数解构赋值

             ...是拓展运算符

       //省略赋值
        let [,,a]=[1,2,3];
        console.log(a) // 3
    
        //...不定参数解构赋值
        let [c,...s]=[1,2,3,4];
        console.log(c,s)  // 1  [2, 3, 4]
    

    4.数组解构赋值的默认值

    Q1:先赋值默认值再解构赋值还是直接解构赋值不考虑默认值?

    A:直接解构赋值不考虑默认值

    //先赋值默认值再解构赋值还是直接解构赋值不考虑默认值?
        let [x, y = (function () {
            console.log("1111");
            return 10;
        })()] = [45, 32]
    
        console.log(y) 

    Q2:什么时候会赋值为默认值?

    A:当解构不成功,则前有变量,后未定义时,此时此变量的值为undefined就会走默认值;其他的情况都不是未定义

    var a= null var a= [ ] 这些情况都是定义了

    二、对象的解构赋值

    1.变量和属性名必须同名,才可以解构赋值、

       //变量和属性必须同名 才可以解构赋值
        let {a,b}={a:"张三",b:"李四"}
        console.log(a,b) //张三 李四
    

    2.解构不成功,值为undefined

        let {a,b}={a:"张三"}
        console.log(a,b) //张三 undefined
    

    3.如果需要变量名和属性名不一致时

        //变量名和属性名不一致时
        let {aa:A,bb:B}={aa:"张三",bb:"李四"}
        console.log(A,B) //张三 李四
    

    4.对象解构赋值的默认问题  

    与数组解构相同,解构成功时直接赋值,不考虑默认值,解构不成功没有值或undefined就会赋值默认值

    5.对象解构赋值时需要注意

    {}前必须加 let

    {a}={a:"zhangsan"}   ✖
    
    let   {a}={a:"zhangsan"}   ✔
    

    6.当声明一些方法等于它的类时,就可以直接使用这个方法

        let {ceil}=Math;
        let a=ceil(2.3);
        console.log(a)  //3
    
        let {log}=console;
        log("aaa") //aaa

    三、函数参数的解构赋值

    1.函数参数的默认值

    function f(a=5){  //等号左边是形参,右边是默认值
       console.log(a)
     }
     f(3)
     //  a是形参 5是默认值  3是实参  

     当函数的参数解构赋值的时候要理清函数的默认参数

    2.函数作用域:函数在调用的时候会形成一个私有作用域,在这个作用域下声明的变量和参数变量外界都访问不到

    3.arguments:是函数中一个类数组参数,它是实参构成的集合

    function f(a,b,c){
        console.log(arguments)
    }
    f(1,2,3)
    

      

    4.箭头函数

    (1)只适合用于匿名函数

        // 匿名函数
        let fn=function(){}  //函数表达式
        fn(12,function(){
    
        })  // 回调函数
    

     除了用function 声明的有名函数 剩下的都是匿名函数

    (2)箭头函数的写法

    let fn =(变量)=>{代码}
    

     每个箭头函数结束的时候一定要return

    (3)当只有一个变量的时候可以省略()

    let fn=x=>{return x;}
    

    (4)当只有一行代码,且这行代码是return xxx;时,可以省略{}和return

    let fn=x=>x;
    

    (5)箭头函数的优势:箭头函数没有this指向,只指向他的父级作用域

    (6)箭头函数获取实参,不能使用arguments,需要用...arg

    let fn=(...arg)=>{
        console.log(arg)
    }
    fn(1,2,3)

    (7)箭头函数不能定义类函数:因为箭头函数中的this指向父级作用域,而类中的this指向实例对象

     

  • 相关阅读:
    iOS屏幕旋转
    iOS使用NSURLSession发送POST请求,后台无法接受到请求过来的参数
    iOS NET Error Code
    Android App在Google App Store中搜不到
    postman中 form-data、x-www-form-urlencoded、raw、binary的区别
    Android的缓存图片不在系统图库中显示的解决办法
    Android的Notification相关设置
    iOS+PHP图片上传
    解决ndk编译lua时遇到 undefined reference to '__srget'的问题
    避免修改Android.mk添加cpp文件路径
  • 原文地址:https://www.cnblogs.com/qinlinkun/p/11166372.html
Copyright © 2020-2023  润新知