美文网首页
2018-06-08深入浅出ES6(解构赋值)

2018-06-08深入浅出ES6(解构赋值)

作者: Cyril丶 | 来源:发表于2018-06-08 14:35 被阅读0次

    当我们定义多个变量的时候还要一个一个去命名的和赋值,很麻烦。用结构赋值那么就是:

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

    他会默认的吧右边赋的值都解出来分配给左边的变量,一一对应进行赋值

    结构赋值的意思就是说两侧的结构和格式都必须一模一样

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

    两侧不一致就会导致想上面这样的结果 ,解决方式就是:

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

    数组还有一种玩法就是:

    let [a,b,c='暂无数据'] = [1,2];
    console.log(a,b,c); //1 2 暂无数据
    

    方然上面这两种方法用处不大,但是在交换两个变量的值得时候,正常是还得找第三个变量打配合就行转换,现在不需要了:

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

    以上者是数组的结构赋值,下面看一下json的解构赋值是怎样的:

    let {name,age,gender} = {
      name: 'Cyril',
      age: 25,
      gender: 'male'
    }
    

    解构赋值一般用在和后台进行数据交互的时候,后台数据大多都是json形式的传递的,数据多的时候都是json嵌套json,以至于有很多,这是就可以用解构赋值全部都解出来就可以了

    let json = {
      name: 'Cyril',
      age: 25,
      gender: 'male'
    }
    let {name,age,gender} = json;
    console.log(name,age,gender); // Cyril 25 male
    

    第二种写法:

    let json = {
      name: 'Cyril',
      age: 25,
      gender: 'male'
    }
    let {name:a,age:b,gender:c} = json;
    console.log(a,b,c); // Cyril 25 male
    

    注意:如果给变量起了名字之后,下面调用时候里面的参数还是写以前的名字,name就会报错is not defined

    解构赋值的小应用

    function getPos(){
      return {
        l:10,
        t:20
      }
    }
    let {l,t} = getPos();
    console.log(l,t); //10 20 
    

    当然解构赋值也可以作为参数进行传递,用法都是一样的,保持一一对应即可。给大家插入一个小tip(提示).

    function show(a,b,c){
      console.log(a,b,c); //1 2 3
    }
    show(1,2,3,);
    

    仔细看会发现在我们传值的时候,多传了一个逗号,但是数据依然能够显示出来,这个看似没用,但是在与后台交互的时候,往往会因为多了个逗号而导致程序报错;微信小程序,里面有一个配置文件app.json,是用来配置整个小程序所有的页面的,当我们想把另一个作为首页访问的话,还要特意去删除掉那个多余的逗号。


    GitHub个人主页 :https://github.com/Cyrildog

    如果一件事情你不能拒绝,就学会去享受它!

    你活得有多精彩,你赢的可能就有多高!

    ByeBye

    image

    相关文章

      网友评论

          本文标题:2018-06-08深入浅出ES6(解构赋值)

          本文链接:https://www.haomeiwen.com/subject/hycasftx.html