zoukankan      html  css  js  c++  java
  • 三.变量的解构赋值

    前言:

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。

    数组的解构赋值:

    ** 简单的数组解构:**

    以前,为变量赋值,我们只能直接指定值。比如下面的代码:

    var a=0;
       b=1;
       c=2;
    

    而现在我们可以用数组解构的方式来进行赋值。

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

    上面的代码表示,可以从数组中提取值,按照位置的对象关系对变量赋值。

    ** 数组模式和赋值模式统一:**

    可以简单的理解为等号左边和等号右边的形式要统一,如果不统一解构将失败。

    let [a,[b,c],d]=[1,[2,3],4];
    

    如果等号两边形式不一样,很可能获得undefined或者直接报错。

    解构的默认值:

    解构赋值是允许你使用默认值的,先看一个最简单的默认是的例子。

    let [foo = true] =[];
    console.log(foo); //true
    

    上边的例子数组中只有一个值,可能你会多少有些疑惑,我们就来个多个值的数组,并给他一些默认值。

    let [a,b="rong"]=['蓉']
    console.log(a+b);   //蓉rong
    

    现在我们对默认值有所了解,需要注意的是undefined和null的区别。

    let [a,b="rong"]=['蓉',undefined];
    console.log(a+b);  //蓉rong 
    

    undefined相当于什么都没有,b是默认值。

    let [a,b="rong"]=['蓉',null];
    console.log(a+b);   //蓉null
    

    null相当于有值,但值为null。所以b并没有取默认值,而是解构成了null。

    对象的解构赋值

    解构不仅可以用于数组,还可以用于对象。

    let {foo,bar} = {foo:'rong',bar:'蓉'};
    console.log(foo+bar);   //rong蓉
    

    注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    圆括号的使用

    如果在解构之前就定义了变量,这时候你再解构会出现问题。下面是错误的代码,编译会报错。

    let foo;
    {foo} ={foo:'rong'};
    console.log(foo);  //报错
    

    要解决报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了。

    let foo;
    ({foo} ={foo:'rong'});
    console.log(foo);   //控制台输出rong
    

      

    字符串解构

    字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。

    const [a,b,c,d]="rong";
    console.log(a);  //r
    console.log(b);  //o
    console.log(c);  //n
    console.log(d);  //g
    

      

      

      

      

  • 相关阅读:
    Ubuntu 16 安装redis客户端
    crontab 参数详解
    PHP模拟登录发送闪存
    Nginx配置端口访问的网站
    Linux 增加对外开放的端口
    Linux 实用指令之查看端口开启情况
    无敌的极路由
    不同的域名可以指向同一个项目
    MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled. Please check Redis logs for details about the error
    Redis 创建多个端口
  • 原文地址:https://www.cnblogs.com/wangRong-smile/p/11511679.html
Copyright © 2011-2022 走看看