对象的解构赋值

曾经终败给现在 2022-04-05 08:52 235阅读 0赞

１．对象解构赋值的内部机制：先找到同名属性，然后赋值给相应的变量，实际被赋值的是后者

var {first:baz,last:bar} = {first:"aaa",last:"bbb"};
    baz//"aaa"
    bar//"bbb"

２．对于let 和const 而言，变量不能重复声明，所以一旦赋值的变量以前声明过，就会报错。例子如下：

let foo;
    let {foo} = {foo:1};
    
    let baz;
    let {first:baz} = {first:"aaa"};

因为var命令允许重复声明变量，所以这个错误只在let和const命令中出现，如果没有第二个let命令，就不会报错，例子如下：

let foo;
    ({foo} = {foo:1});

let baz; 
    ({first:baz} = {first:"aaa"});

３．解构也可以用于嵌套的对象：

var node = {
        loc:{
            start:{
                line:1,
                column:5
            }
        }
    };
    var {loc:{start:{line,column}}} = node;
    console.log(line);//1
    console.log(column);//5

４．对象的解构也可以指定默认值：

var {x = 2} = {};
    console.log(x);x//2
    var {x,y = 3} = {x:1};
    console.log(x);x//1
    console.log(y);y//3

var {x = 3} = {x:undefined};
    console.log(x);//3
    var {y = 2} = {y:null};
    conole.log(y);//null

默认值生效的条件是：对象的属性值严格等于undefined。

５．下面写法会抛出语法错误：

var x;
    {x} = {x:1};

因为JS引擎会将｛ｘ｝理解成一个代码块，从而发生语法错误。正确的写法如下：

var x;

(\{x\} = \{x:1\});

６．对象的解构赋值可以很容易的将现有对象的某些方法赋值到某个变量

let {log,sin,cos} = Math;

上面代码将Math对象的log(), sin(), cos()三个方法赋值给log,sin,cos变量。

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 es6 对象的解构赋值使用

用法通常用来深拷贝对象（只能拷贝对象属性是基本数据类型的，属性本身也是个对象或数组的，拷贝的是对象的指针），类似于Object.assign方法不足当需要拷

骑猪看日落/ 2023年01月02日 06:26/ 0 赞/ 182 阅读

相关变量的解构赋值

变量的解构赋值 > ES6 允许按照一定模式, 从数组和对象中提取值, 对变量进行赋值, 这被称为解构(Destructruing) 一. 数组的解构赋值 1.

短命女/ 2022年12月18日 08:59/ 0 赞/ 204 阅读

相关变量的解构赋值→对象的解构赋值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

矫情吗；*/ 2022年10月02日 04:44/ 0 赞/ 259 阅读

相关对象解构赋值

先赋值看看： < script> let \{abc:test1,def:test2\} =\{abc: "first",def: "second"\} console.

柔情只为你懂/ 2022年05月25日 10:28/ 0 赞/ 225 阅读

相关对象的解构赋值

１．对象解构赋值的内部机制：先找到同名属性，然后赋值给相应的变量，实际被赋值的是后者 var {first:baz,last:bar} = {first:"aaa",

曾经终败给现在/ 2022年04月05日 08:52/ 0 赞/ 236 阅读

相关解构赋值

详解解构赋值什么是解构赋值？传统做法 var array = ['hello', 'JavaScript', 'ES6']; var x =

￡神魔★判官ぃ/ 2022年02月01日 13:11/ 0 赞/ 289 阅读

相关变量的解构赋值→数组的解构赋值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

逃离我推掉我的手/ 2022年01月12日 18:19/ 0 赞/ 346 阅读

相关解构赋值

[ES 6 : 变量的解构赋值][ES 6 _] 1. 数组的解构赋值 \[ 基本用法 \] 　　按照一定的模式从数组或者对象中取值，对变量进行赋值的过程称为解

ゞ浴缸里的玫瑰/ 2022年01月12日 13:43/ 0 赞/ 275 阅读

相关 ES6 解构赋值详解：对象解构赋值、数组解构赋值

所谓的解构赋值就是：按照一定模式，从数组和对象中提取值，对变量进行赋值（先解析结构再进行赋值）。对象的解构赋值对象是通过属性名进行解构（是用的最多的解构赋值）

迈不过友情╰/ 2021年12月05日 15:09/ 0 赞/ 420 阅读

相关变量的解构赋值 - 对象篇

上次讲了数组的解构赋值，这次来看下对象的解构赋值对象的解构和数组不同之处在于，数组的元素是按次序排列的，变量的取值是由位置决定的，而对象的属性没有次序，变量必须与属性同名才

左手的ㄟ右手/ 2021年09月29日 12:02/ 0 赞/ 389 阅读