精华内容
下载资源
问答
  • 对象解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 圆括号问题 用途 数组的解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。 基本用法 let [a, b, c] = [1, 2, 3]...

    变量的解构赋值

    主要内容:

    • 数组的解构赋值
    • 对象的解构赋值
    • 字符串的解构赋值
    • 数值和布尔值的解构赋值
    • 圆括号问题
    • 用途
    1. 数组的解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

      • 基本用法

        let [a, b, c] = [1, 2, 3];
        console.log(a);
        /*
        输出结果:1
        解析:将数组中的每一个值取出,按照对应位置,给变量赋值。
        */
        
      • 嵌套数组的解构赋值:解构赋值写法本质上属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。

        let [foo, [[bar]], baz] = [1, [[2]], 3];
        console.log(bar);
        /*
        输出结果:2
        解析:数组解构赋值本质属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
        */
        
        let [x, y] = [1];
        console.log(y);
        /*
        输出结果:undefined
        解析:左右两侧模式不匹配,解构失败,变量的值等于undefined
        */
        
      • 不完全解构:即等号左边的模式只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

        let [x, y] = [1, 2, 3];
        console.log(x);
        console.log(y);
        /*
        输出结果:1, 2
        解析:以上数组的解构属于不完全解构,但是可以成功。
        */
        
      • 可以解构的数据类型:如果等号的右边不是数组(或者严格地说,不是可遍历地结构),则会报错。

        let [var1] = 1;
        let [var2] = false;
        let [var3] = NaN;
        let [var4] = undefined;
        let [var5] = null;
        let [obj] = {}; 
        /*
        输出结果:报错->1,false,NaN,undedined,null,{} is not iterable(即以上数据都不是可遍历的数据类型)
        解析:以上代码都会报错,因为等号右边的值,要么转换之后不具备Iterator接口(前五个表达式),要么本身就不具备Iterator接口(最后一个表达式)。
        */
        
      • 总结:只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。

      • 默认值:解构赋值允许默认值

        let [foo = true] = [];
        let [x, y = 'b'] = ['a'];
        console.log(foo);
        console.log(x);
        /*
        输出结果:true,a
        解析:解构赋值允许默认值,故解构成功,foo赋值为true,x赋值为a
        */
        
        解构默认值特殊情况:
        1.解构数组成员是null
        let [x = 1] = [null];
        console.log(x);
        /*
        输出结果:null
        解析:如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。
        */
        
        2.解构默认值是函数调用
        function f() {
            console.log('aaa');
        }
        
        let [x = f()] = [2];
        console.log(x);
        /*
        输出结果:2
        解析:因为x可以取到值,所以函数f根本不会执行。需要注意的是,该默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。
        */
        
        3.解构默认值引用解构赋值的其他变量
        let [x = 1, y = x] = [];
        let [x = 1, y = x] = [2];
        let [x = y, y = 1] = [];
        /*
        输出结果:前两行代码运行正常,最后一行代码报错
        解析:默认值可以引用解构赋值的其他变量,故前两行代码运行正常,最后一个表达式之所以会报错,是因为x用y做默认值时,y还没有声明。
        */
        总结:默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
        

        注意事项:ES6内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

    2. 对象的解构赋值:解构不仅可以用于数组,还可以用于对象。

      • 基本使用

        let {foo, bar} = {foo: 'aaa', bar: 'bbb'};
        console.log(foo);
        console.log(bar);
        /*
        输出结果:aaa,bbb
        */
        

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

        let {bar, foo} = {foo: 'aaa', bar: 'bbb'};
        console.log(bar);
        console.log(foo);
        
        let {baz} = {foo: 'aaa', bar: 'bbb'};
        console.log(baz);
        /*
        输出结果:bbb,aaa,undefined
        解析:上面代码的第一个例子,等号左边的变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined
        */
        

        总结:数组解构赋值左边变量的取值取决于变量的次序,而对象解构赋值左边变量的取值与次序无关,仅与右边同名属性的取值相关。如果对象解构失败,变量的值等于undefined。

      • 对象解构赋值的同时更改变量的名称

        let {foo:baz} = {foo: 'aaa', bar: 'bbb'};
        console.log(baz);
        /*
        输出结果:aaa
        解析:foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo
        */
        let {foo: foo, bar: bar} = {foo: 'aaa', bar: 'bbb'};
        
      • 对象结构赋值的机制:对象解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

      • 解构嵌套结构的对象

        let obj = {
            p: [
                'hello',
                {y: 'world'}
            ]
        }
        
        let {p:[x,{y}]} = obj;
        console.log(x);
        console.log(y);
        /*
        输出结果:hello,world
        解析:这时p是解构模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。
        */
        let obj = {
          p: [
            'Hello',
            { y: 'World' }
          ]
        };
        
        let { p, p: [x, { y }] } = obj;
        
        
      • 解构异常情况:如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

        let {foo: {bar}} = {baz: 'baz'};
        /*
        输出结果:报错
        解析:等号左边对象的foo属性,对应一个子对象。该子对象的bar属性,解构时会报错。原因很简单,因为foo这时等于undefined,再取子属性就会报错。
        */
        
      • 扩展:对象的解构赋值可以取到继承的属性。

        const obj1 = {};
        const obj2 = {foo: 'bar'};
        Object.setPrototypeOf(obj1, obj2);
        
        const {foo} = obj1;
        console.log(foo);
        /*
        输出结果:bar
        解析:对象obj1的原型对象是obj2。foo属性不是obj1自身的属性,而是继承自obj2的属性,解构赋值可以取到这个属性。
        */
        
      • 默认值:对象的解构赋值也可以指定默认值

        var {x, y = 3} = {x: 1}
        console.log(y);
        /*
        输出结果:3
        解析:左侧对象匹配不到y,故y的值为undefined,此时y使用默认值3
        */
        
        注意事项:默认值生效的条件是,对象的属性值严格等于undefined。
        
        var {x = 3} = {x: undefined};
        var {y = 3} = {y: null};
        console.log(x);
        console.log(y);
        /*
        输出结果:3
        解析:上面代码中,属性x等于null,因为null与undefined不严格相等,所以是个有效的赋值,导致默认值3不会生效。
        */
        
      • 注意事项:

        (1)如果要将一个已经声明的变量用于解构赋值,必须非常小心。
         let x = 1;
         {x} = {x: 1};
         /*
         输出结果:报错->Unexpected token '='
         解析:以上代码报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
         */
         
         //正确的写法
         let x;
         ({x} = {x: 1});
         /*
         解析:上面代码将整个解构赋值语句放在一个圆括号里面,就可以正确执行。
         */
         (2)解构赋值允许等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
          ({} = [true, false]);
          ({} = 'abc');
          ({} = []);
          /*
          解析:上面的表达式虽然毫无意义,但语法是合法的,可以执行。
          */
          (3)由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
           let arr = [1, 2, 3];
           let {0: first, [arr.length - 1]: last} = arr;
           console.log(first);
           console.log(last);
           /*
           输出结果:1, 3
           解析:上面的代码对数组进行对象解构。数组arr的0键对应值是1,[arr.length - 1]就是2键,对应值是3。方括号这种写法,属于“属性名表达式”。
        	*/
        
    3. 字符串的解构赋值:字符串也可以解构赋值。这是因为字符串被转换成了一个类似数组的对象。

      const [a, b, c, d, e] = 'hello';
      console.log(a);
      console.log(b);
      console.log(c);
      console.log(d);
      console.log(e);
      /*
      输出结果:h, e, l, l, o
      解析:此时字符串被转换成类似数组的对象,故可以解析
      */
      
      类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值
      
      let {length: len} = 'hello';
      console.log(len);
      /*
      输出结果:5
      解析:因为字符串被转换成类似数组的对象,且具有length属性,故可以解析length属性值
      */
      
    4. 数值和布尔值的解构赋值:解构赋值时,如果等号右边时数值和布尔值,则会先转换为对象。

      let {toString: s} = 123;
      console.log(s === Number.prototype.toString);
      
      let {toString: g} = true;
      console.log(g === Boolean.prototype.toString);
      /*
      输出结果:true, true
      解析:上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。
      */
      
      解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转换为对象。由于undefined和null无法转换为对象,所以对它们进行解构赋值都会报错。
      let {prop: x} = undefined;
      /*
      输出结果:报错->Cannot destructure property 'prop' of 'undefined' as it is undefined.(不能解构undefined属性)
      解析:解构针对的是对象或数组,而undefined无法转换为对象,故报错
      */
      let {porp: y} = null;
      /*
      输出结果:报错->Cannot destructure property 'null' of 'undefined' as it is undefined.(不能解构null属性)
      解析:解构针对的是对象或数组,而null无法转换为对象,故报错
      */
      
    5. 函数参数的解构赋值:函数的参数也可以使用解构赋值。

      function add([x, y]) {
          return  x + y;
      }
      
      console.log(add([1, 2]));
      /*
      输出结果:3
      解析:上面个代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被结构成变量x和y。对于函数内部的代码来说,他们能感受到的参数就是x和y。
      */
      

      扩展:函数参数的解构也可以使用默认值

      function move({x = 0, y = 0} = {}) {
          return [x, y];
      }
      
      console.log(move({x: 3, y: 8}));
      console.log(move({}));
      /*
      输出结果:[3, 8], [0, 0]
      解析:上面代码中,函数move的参数是一个对象,通过这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值。
      */
      
      function move({x, y} = { x: 0, y: 0 }) {
        return [x, y];
      }
      
      move({x: 3, y: 8}); // [3, 8]
      move({x: 3}); // [3, undefined]
      move({}); // [undefined, undefined]
      move(); // [0, 0]
      /*
      解析:上面代码是为函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。
      */
      
      undefined会触发函数参数的默认值。
      [1, undefined, 3].map((x = 'yes') => x)
      
    6. 圆括号问题

      解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。

      由此带来的问题是,如果模式中出现圆括号怎么处理。ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。

      但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。

      • 不能使用圆括号的情况

        以下三种解构赋值不得使用圆括号
        (1)变量声明语句:变量声明语句,模式不能使用圆括号。
          // 全部报错
         let [(a)] = [1];
         
         let {x: (c)} = {};
         let ({x: c}) = {};
         let {(x: c)} = {};
         let {(x): c} = {};
         
         let { o: ({ p: p }) } = { o: { p: 2 } };
         (2)函数参数:函数参数也属于变量声明,因此不能带有圆括号。
          // 报错
          function f([(z)]) { return z; }
          // 报错
          function f([z,(x)]) { return x; }
         (3)赋值语句的模式
          // 全部报错
          ({ p: a }) = { p: 42 };
          ([a]) = [5];
          上面代码将整个模式放在圆括号之中,导致报错。
          // 报错
          [({ p: a }), { x: c }] = [{}, {}];
          上面代码将一部分模式放在圆括号之中,导致报错。
        
      • 可以使用圆括号的情况:赋值语句的非模式部分,可以使用圆括号。

        [(b)] = [3]; // 正确
        ({ p: (d) } = {}); // 正确
        [(parseInt.prop)] = [3]; // 正确
        /*
        解析:上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。
        */
        
    7. 用途:变量的解构赋值用途很多

      • 交换变量的值

        let x = 2;
        let y = 3;
        
        [x, y] = [y, x];
        console.log(x);
        console.log(y);
        /*
        输出结果:3, 2
        解析:上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。
        */
        
      • 从函数返回多个值:函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

        function example() {
            return [1, 2, 3];
        }
        
        let [a, b, c] = example();
        console.log(a, b, c);
        /*
        输出结果:1, 2, 3
        */
        
      • 函数参数的定义:解构赋值可以方便地将一组参数与变量名对应起来

        function f([x, y, z]) {...}
        f(1, 2, 3)
        /*
        解析:根据数组解构地原则,x,y,z分别接收f调用时传过来地参数。
        */
        
      • 提取JSON数组

        let jsonData = {
                   id: 42,
                   status: "OK",
                   data: [867, 5309]
               };
        
        let {id, status, data:number} = jsonData;
        console.log(id, status, number);
        /*
        输出结果:42, OK, [867, 5309]
        */
        
      • 函数参数的默认值

        jQuery.ajax = function (url, {
          async = true,
          beforeSend = function () {},
          cache = true,
          complete = function () {},
          crossDomain = false,
          global = true,
          // ... more config
        } = {}) {
          // ... do stuff
        };
        /*
        解析:指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
        */
        
      • 遍历Map结构:任何部署了Iterator接口的对象,都可以用for…of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。

        const map = new Map();
        map.set('first', 'hello');
        map.set('second', 'world');
        
        for(let [key, value] of map) {
            console.log(key + ' is ' + value);
        }
        /*
        输出结果:first is hello, second is world
        解析:利用解构赋值接收map中的成员
        */
        
        如果只想获取键名,或者只想获取键值,可以写成下面这样。
        
        // 获取键名
        for (let [key] of map) {
          // ...
        }
        
        // 获取键值
        for (let [,value] of map) {
          // ...
        }
        
      • 输入模块的指定方法:加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

        const { SourceMapConsumer, SourceNode } = require("source-map");
        
    展开全文
  • 主要介绍了ES6数组与对象解构赋值,结合实例形式详细分析了ES6中数组与对象解构赋值原理、用法及相关操作注意事项,需要的朋友可以参考下
  • 什么是解构赋值:按照一定的模式从数组或者对象中提取值,然后对变量进行赋值,这被称为解构赋值。 数组解构赋值 基本用法 下标对下标。 let [a,b,c]=[1,2,3]; let [a,[[b],c]=[1,[[2],3]]; 结果: 同时声明三个变量...

    解构赋值

    什么是解构赋值:按照一定的模式从数组或者对象中提取值,然后对变量进行赋值,这被称为解构赋值。

    数组解构赋值

    基本用法

    下标对下标。

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

    结果: 同时声明三个变量a,b和c,a拿到值1, b拿到值2,c拿到值3。这种写法属于"模式匹配",只要模式相同左边的变量就会被赋予相对应的值。

    let [,,third] = ["foo","bar","baz"]   //third="baz"(解构部分)
    let [a,,b] = [1,2,3]   //a=1,b=3(解构部分)
    let [x,y] = [1,2,3]   //x=1,y=2(不完全解构)
    

    但是如果解构不成功变量的值就等于undefined

    let [a,b,...c] = ["1"]   //a=1,b=undefined,c=[]
    

    如果等号右边不是数组(或是可遍历的结构)就会报错。

    默认值

    数组的解构赋值允许指定默认值

    let [a = 1] = []; //a = 1
    

    注意:

    1. 如果一个数组成员不严格等于undefined,默认值是不会生效的。

    2. 注意null!== undefined,当数组成员等于null时,默认值是不会生效的。

    3. 默认值也可以引用解构赋值的其他变量,但是该变量必须已经声明。

    对象解构赋值

    基本用法

    属性名对属性名。

    let { foo:foo ,bar:bar } = { foo:"aaa",bar:"bbb" };
    //foo="aaa",bar="bbb"
    

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

    简写(语法糖):

    通常原对象中的属性名起的挺好,简洁又见名知意,所以没必要再另外起一个变量名,所以:

    let { foo:foo,bar:bar } = { foo:"aaa",bar:"bbb"};

    ​ 可简写为:

    let { foo,bar } = { foo:"aaa",bar:"bbb"};

    一个名两个用途:既当做配对的属性名,又当做将来单独使用的变量名

    注意:

    1. 等号左边要把变量装扮成和要解构的数组或者对象相同的结构

    2. 于数组一样,对象解构赋值也可以用于嵌套的解构的对象

    3. 看对象解构面试题时,一定要先把简写写成最开始的写法看清楚谁是模式谁是变量再进行判断

    //如果属性名不一样,必须写成如下例子中一样
    let { foo:baz } = { foo:"aaa",bar:"bbb"};
    //baz="aaa",实际上被赋值的是foo属性的baz变量
    

    默认值

    对象的解构赋值也允许指定默认值

    var {x = 3} = {};
    x // 3
    
    var {x, y = 5} = {x: 1};
    x // 1
    y // 5
    
    var {x: y = 3} = {};
    y // 3
    
    var {x: y = 3} = {x: 5};
    y // 5
    
    var { message: msg = 'Something went wrong' } = {};
    msg // "Something went wrong"
    

    注意

    1. 默认值生效的条件是,对象的属性值严格等于undefined
    2. 注意null不严格等于undefined会使默认值不生效
    3. 解构失败,变量的值等于undefined

    字符串解构赋值

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

    const [a,b,c,d,e] = "hello"
    //a="h",b="e",c="l",d="l",e="o"
    let {length:len} = "hello";
    //len=5
    

    数值和布尔值的解构赋值

    解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

    let {toString: s} = 123;
    s === Number.prototype.toString // true
    
    let {toString: s} = true;
    s === Boolean.prototype.toString // true
    

    上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。

    解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。

    由于undefinednull无法转为对象,所以对它们进行解构赋值,都会报错。

    由上的代码可以看出,左边写成let {toString: s} = 123;是可以把Number.prototype.toString方法的地址值复制一份出来给左边对象结构中的s,那么以后我们想调用别的父类型(原型对象)上的方法也是不是可以这样做?

    eg:查看一个数据是什么类型的:

    let { toString:objToString } = {};
    objToString.call(1) === "[object Number]"  //true
    objToString.call("") === "[object String]"  //true
    objToString.call([]) === "[object Array]"  //true
    

    可以看到我从{}.toString处拿到了Object顶级父对象toString的地址值然后解构赋值给了objToString找到了这个方法是可行的。

    函数参数解构赋值

    以数组或对象形式传递多个参数,调用时,所有实参值必须也放在一个数组或对象中传入。

    function fun([a,b]){
        console.log(a+b)
    }
    fun([1,2]);//3
    
    function fun({a:a,b:b}){
        console.log(a+b)
    }
    fun({a:1,b:2});//3
    

    简写: 语法糖: 如果形参名与属性名没必要区分,是相同的名字,也可以只写一个。

    function fun({a,b}){
        console.log(a+b)
    }
    fun({a:1,b:2});//3
    

    函数参数的定义和函数参数的默认值

    当一个函数内需要多个参数,但调用时不能确定参数有没有,而又要求参数值与函数内变量有对应关系这时就要用到参数解构;指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

    function order(
    {zhushi: zs = "香辣鸡腿堡",xiaochi: xc = "薯条薯条",yinliao: yl = "可口可乐"}={})
    {
      console.log(`您本次点的是:
      主食:${zs},
      小吃:${xc},
      饮料:${yl}
    `)
    }
    order()
    

    在这里插入图片描述

    实际应用

    1 交换变量的值

    let x = 1;
    let y = 2;
    
    [x, y] = [y, x];
    

    2 函数返回值

    函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回,然后用解构取值。

    // 返回一个数组
    
    function example() {
      return [1, 2, 3];
    }
    let [a, b, c] = example();
    
    // 返回一个对象
    
    function example() {
      return {
        foo: 1,
        bar: 2
      };
    }
    let { foo, bar } = example();
    

    3 提取JSON数据

    let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
    
    let { id, status, data: number } = jsonData;
    
    console.log(id, status, number);
    // 42, "OK", [867, 5309]
    

    4 输入模块的指定方法

    加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

    import { queryMicroInfoShopPost } from "@/api/sysmgr"
    

    ps: 学习阮一峰 ES6入门 个人理解心得总结(2)-解构赋值 个人理解难免有错误,欢迎大家指正

    展开全文
  • 本文实例讲述了ES6知识点整理之对象解构赋值应用。分享给大家供大家参考,具体如下: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 在对象的解构赋值中有一些需要...
  • 对象解构 let {a1,b2} = {a1:.., b2:...} let Menu ={title:'番茄炒蛋',price:12,} let {title , price} = Menu console.log(title);//番茄炒蛋 console.log(price);//12 若把一个属性赋值给另一个名字的变量,...

    对象解构

    let {a1,b2} = {a1:.., b2:...}

    let Menu ={title:'番茄炒蛋',price:12,}
    let {title , price}  = Menu
    console.log(title);//番茄炒蛋
    console.log(price);//12
    
    • 若把一个属性赋值给另一个名字的变量,比如把 options.width 属性赋值给变量 w,那么可以使用冒号来指定
    • 冒号表示“什么值:赋值给谁”。
    let Menu ={title:'番茄炒蛋',price:12,}
    let {title:t , price:p}  = Menu
    console.log(t);//番茄炒蛋
    console.log(p);//12
    
    • 对于可能缺失的属性,可以使用**=**设置默认值
    let Menu ={title:'番茄炒蛋',price:12,}
    let {title:t , price:p,star=5}  = Menu
    console.log(t);//番茄炒蛋
    console.log(p);//12
    console.log(star); //5
    
    • ps:具有很多属性的复杂对象,只需提取所需的内容

    剩余模式…

    let Menu ={title:'番茄炒蛋',price:12,name:'搜搜'}
    let {title:t,..other}  = Menu
    console.log(other)//{ price: 12, name: '搜搜' }
    

    嵌套解构

    -若是一个对象或者数组嵌套了其他的对象和数组,就需要在等号左侧使用复杂的模式来提取所需数据

    let prices = {
        banana: 1,
        orange: 2,
        meat: {
            a: 'qw',
            b: 'as'
        },
    };
    
    let { banana, meat: {
        a, b
    } } = prices
    console.log(b);//as
    
    展开全文
  • JS 对象解构赋值

    千次阅读 2019-11-22 18:37:48
    结构赋值的目的就是从对象或者数组中获取值赋值给变量,从而减少代码的编写 1. 最简单的案例 看下面的案例 let person = { name: 'yhb', age: 20 } /* 注意:下面虽然看起来是创建了一个对象对象中有两...

    结构赋值的目的就是从对象或者数组中获取值赋值给变量,从而减少代码的编写

    1. 最简单的案例

    看下面的案例

        let person = {
            name: 'yhb',
            age: 20
        }
        /*
        注意:下面虽然看起来是创建了一个对象,对象中有两个属性 name 和 age
        但是:其实是声明了两个变量
        name:等于对象person 中的name属性的值
        age:等于对象person 中的 age属性的值
        */
        let { name, age } = person
        console.log(name,age)

    如上面注释中所说,声明了变量 name和age,然后分别从对象person中寻找与变量同名的属性,并将属性的值赋值给变量

    所以,这里的关键,就是首先要知道对象中都有哪些属性,然后再使用字面量的方式声明与其同名的变量

    2. 属性不存在怎么办

    如果不小心声明了一个对象中不存在的属性怎么办?

    或者,实际情况下,可能是我们就是想再声明一个变量,但是这个变量也不需要从对象中获取值,这个时候,此变量的值就是 undefined

        let person = {
            name: 'yhb',
            age: 20
        }   
        let { name, age,address } = person
        console.log(name,age,address)

    此时,可以给变量加入一个默认值

    let { name, age,address='北京' } = person

    3.属性太受欢迎怎么办

    当前声明了 name 和 age 变量,其值就是person对象中name和age属性的值,如果还有其他变量也想获取这两个属性的值怎么办?

     let { name, age, address = '北京' } = person
     console.log(name, age, address)
     let { name, age } = person
     console.log(name, age)

    上面的方法肯定不行,会提示定义了重复的变量 name 和 age

    那怎么办呢?

    难道只能放弃结构赋值,使用老旧的方式吗?

    let l_name=person.name
    let l_age=person.age
    console.log(l_name,l_age)

    其实不然!

    let {name:l_name,age:l_age}=person
    console.log(l_name,l_age)

    说明:

    • 声明变量 l_name 并从对象person中获取name属性的值赋予此变量
    • 声明变量 l_age,   并从对象person中获取age属性的值赋予此变量

    这里的重点是下面这行代码

    let {name:l_name,age:l_age}=person

    按照创建对象字面量的逻辑,name 为键,l_name 为值。但注意,这里是声明变量,并不是创建对象字面量,所以争取的解读应该是

    声明变量 l_name,并从person 对象中找到与 name 同名的属性,然后将此属性的值赋值给变量 l_name

    所以,我们最后输出的是变量 l_name和l_age

    console.log(l_name,l_age)

    当然这种状态下,也是可以给变量赋予默认值的

    let {name:l_name,age:l_age,address:l_address='北京'}=person

    4. 嵌套对象如何解构赋值

    let person = {
        name: 'yhb',
        age: 20,
        address: {
            province: '河北省',
            city: '保定'
        }
    }
    // 从对象 person 中找到 address 属性,并将值赋给变量 address
    let {address}=person
    // 从对象 address 中找到 province 属性,并将值赋给变量 province
    let {province}=address
    console.log(province)

    上面代码一层层的进行结构赋值,也可以简写为如下形式

    let {address:{province}}=person  

    从peson 对象中找到 address 属性,取出其值赋值给冒号前面的变量 address,然后再将 变量address 的值赋值给 冒号 后面的变量 {province},相当于下面的写法

    let {province}=address

     

    展开全文
  • 对象解构赋值

    2018-05-13 08:34:48
    赋值看看:<script> let {abc:test1,def:test2}={abc:"first",def:"second"} console.log(test1) console.log(test2)</script>简化写法:<script>...
  • ES6中的对象解构赋值

    万次阅读 2018-11-07 13:50:54
    解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值...注意:对象解构赋值的键名对应很重要,不然会找不到。因为对象是无序的,必须通过...
  • 所谓的解构赋值就是:按照一定模式,从数组和对象中提取值,对变量进行赋值(先解析结构再进行赋值)。 对象解构赋值 对象是通过属性名进行解构(是用的最多的解构赋值) 基本使用 // 创建一个对象 let obj = {...
  • ES6 解构赋值(数组解构赋值 - 对象解构赋值)
  • 解构赋值 解构赋值是javascript表达式,这使得可以将好数据从数组或对象提取到不同的变量中。...注意:对象解构赋值的键名对应很重要。不然不会找到。因为对象时无序的,必须通过键名来识别 1.未先声明变量再进行对象解
  • es6对象解构赋值重命名

    千次阅读 2020-11-14 00:01:35
    // undefined 函数解构 function testdata( contractStatus, option = { auditStatus: ‘’, sendStatus: ‘’, whenContractSubmitAudit: ‘’, flowId: ‘’ } ) { console.log(contractStatus) console.log...
  • 对象解构赋值之后,不可再通过赋值改变这个属性的值 因为这是对象解构而不是属性解构 // 测试对象的解构赋值之后,能否改变原有对象对应属性的值 let obj={ a:22 } let {a}=obj; a=33; console.log(obj); // { a: ...
  • 最近看阮一峰的ES6发现了个地方有点不懂,理解之后,特意记录下来。 let obj = {}; let arr = []; ({ foo: obj.prop, bar: arr[0] } = {...首先是外面这个括号,我们知道如果提前定义了一个变量,下面再来解构赋值...
  • 定义了一个sjForm对象 后端返回的json对象: 也可以下面这样 这是个es6里面的方法,比较简单,就是Object.assign,如下图,再修改data对象里面的数据,response.data.data就不会改变。Object.assign只...
  • 我们开发的过程中,经常会碰到这样的情况:后端传给我们一串数据,我们需要对这个数据进行处理。 如果是这样的一个数据: let obj = { name:'myName', age:24, weight:'45KG', ... 以上我们说的都是对对象解构赋值
  • ES6 数组对象解构赋值 其他类型的解构赋值
  • 对象解构是一种快速赋值的方式 代码如下: // 对象解构是一种快速赋值的方式 let obj = { name: '小昭', age: 18, hobby: '听歌' } // 下面这句话表示定义了name,age,hobby三个变量,然后把obj对象的的...
  •  关于变量的解构赋值,其实有很多种解构方式,包括数组,对象,字符串等都可以进行解构赋值,但个人认为对象的结构赋值是最常用,也是最有用的。  下面来看一个应用场景:现在有一个person对象,然后你通过引用...
  • 主要介绍了ES6 对象的新功能与解构赋值介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 数组、对象解构赋值

    千次阅读 2021-01-30 13:49:31
    对象解构是获取对象并将对象内部属性提取到对象外部变量的一种方法 const obj = { x: 1, y: 2 } // 不使用解构语法 const x = obj.x const y = obj.y // 使用解构语法 const { x,y } = obj x // 1 y // 2 // ...
  • 对象解构赋值

    2021-01-19 12:08:05
    之前看同事写的对象解构赋值也能理解,类似下面的代码: let obj = { name: 'xiaoliu', age: 20, say(){ console.log(`hello`) } } const {name, age, say} = obj console.log(`name is: ${name}, age is:...
  • 7.对象解构赋值.md

    2019-10-09 21:56:19
    对象解构赋值
  • js常用对象解构赋值

    千次阅读 2019-10-30 10:29:53
    基本类型的包装对象 “包装对象”对于每种基本类型调用都是不同的,如String, Number, Boolean 和 Symbol。因此,他们提供了不同的方法。基本类型 null 和 undefined 是个例外。他们没有相应的“包装对象”,也没有...
  • vue解构赋值_ES6解构赋值

    千次阅读 2021-02-11 15:20:11
    解构赋值主要分为对象的解构和数组的解构,在没有解构赋值的时候,我们的赋值是这样的let arr = [1,2,3]let a= arr[0]let b= arr[1]let c= arr[2]这样写很繁琐,解构赋值可以轻松解决上面的问题。一、数...
  • 对象解构赋值详解

    2020-09-12 22:43:18
    */ // 注意点: 在对象解构赋值中, 左边的变量名称必须和对象的属性名称一致, 才能解构出数据 //let {a, b} = {name: "lnj",age: 34}; //console.log(a, b); // undefined undefined let {age} = {name: "lnj",age: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,751
精华内容 10,300
关键字:

对象解构赋值