首页 > 其他分享 >对象解构

对象解构

时间:2023-02-19 12:45:16浏览次数:28  
标签:console log 对象 解构 let name2 name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象解构</title>
</head>
<body>

<script>
    let person = {
        name:'gpl',
        age:33
    };

    //一般的写法:对象解构赋值,属性名和对象对应,属性值是新变量名
    let {name:p1Name,age:p1Age} = person;
    console.log(p1Name); //gpl
    console.log(p1Age); //33

    //简洁的写法:直接使用对象的属性名作为变量名
    let {name,age} = person;
    console.log(name); //gpl
    console.log(age); //33

    //错误的写法
    let {p2name,p2age} = person;
    console.log(p2name); //undefined
    console.log(p2age); //undefined

    let person2 = {
        name2:'fbb',
        age2:38
    };

    //新变量不需要和属性一一对应
    // let {name2} = person2;
    // console.log(name2); //fbb
    //
    // let {age2} = person2;
    // console.log(age2); //38

    // let {age2,name2} = person2;
    // console.log(name2); //fbb
    // console.log(age2); //38

    // let {name2,job = 'female'} = person2;
    // console.log(name2,job); //fbb female
    //
    // let {name3,age3} = {name3:'lzl',age3:40};
    // console.log(name3,age3);

    //解构在内部使用函数ToObject()把原数据解构转换为对象,也就是原始值会被当成对象
    //下面的length是字符串'foobar'转换为对象之后的自带属性
    let {length} = 'foobar';
    console.log(length); //6

    //没有ddd这个属性
    let {ddd} = 'foobar';
    console.log(ddd); //undefined

    let{constructor:c} = 4;
    console.log(c); //数字4对象之后的构造函数
    console.log(c === Number); //true

    //根据ToObject()的定义,null和undefined不能被解构
    // let {_} = null; //TypeError
    // // let {_} = undefined; //TypeError


    //不要求新变量必须在表达式中声明,但如果是给事先声明的变量赋值,则赋值表达式必须包含在一对括号中
    let person3 = {
        name:'gadot',
        age:37
    };
    let p4name,p4age;

    ({name:p4name,age:p4age} = person3); //表达式必须包含在括号里,否则会报错
    console.log(p4name,p4age);




</script>
</body>
</html>

 

标签:console,log,对象,解构,let,name2,name
From: https://www.cnblogs.com/polin/p/17134565.html

相关文章

  • 对象解构2:嵌套解构
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>对象解构2:嵌套解构</title></head><body><script>letperson={nam......
  • 对象解构3:部分解构
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>对象解构3:部分解构</title></head><body><script>letperson={nam......
  • 对象解构
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>对象解构</title></head><body><script>letperson={name:'gpl',......
  • C++栈上创建对象和堆上创建对象
    一、在栈(Stack)上创建对象Student是一个类,创建一个实例化对象:Studentstu;下面进行创建对象指针的操作(非必须):上面代码中创建的对象stu在栈上分配内存,需要使用&获取......
  • C++基于面向对象思想的ATM 系统设计与实现(三级项目)[2023-02-19]
    C++基于面向对象思想的ATM系统设计与实现(三级项目)[2023-02-19]实验二基于面向对象思想的ATM系统设计与实现(三级项目)一、实验目的:(1)掌握派生类的使用方法。(2)......
  • java面向对象
    java面向对象以类的方式组织代码,以对象的组织(封装)程序。一个类里面只有方法和属性一个项目至多只有一个main方法创建对象类是抽象的,需要进行实例化publicclass......
  • 面向对象 续
    //类的格式声明//格式[修饰符]class类名{//属性列表//构造器列表//get/set方法//其他方法}如何创建对象new类名();  用无参构造new类名(......
  • 面向对象
    面向对象(重点难点)面向对象和面向过程都是编程思想面向过程注重过程,步骤,怎么做   执行者面向对象注重对象,谁来做        指挥者面向对象学习1......
  • 微软出品自动化神器【Playwright+Java】系列(九)多线程、重定向、弹出新窗口、截图、新
    写在前面关于Playwright系列的文章,真的很久没有写了,今天一个不小心官方API部分过完了,下面将为大家逐一演示,感兴趣的同学可以自行动手练习。API部分多线程直白点说就是......
  • 继承的对象模型
    继承的对象模型1)创建派生类对象时,先调用基类的构造函数,再调用派生类的构造函数。2)销毁派生类对象时,先调用派生类的析构函数,再调用基类的析构函数。如果手工调用派生类的......