精华内容
下载资源
问答
  • js中对象解构赋值
    2022-02-25 15:09:34
    // 简单地说,对象的解构赋值就是使用与对象匹配的结构来实现对象属性的赋值
    // (实际就是用对象中的属性为变量赋值)。
    
    // 不使用对象解构
    let person = {name: 'Jack', age: 22}
    let personName, personAge
    personName = person.name
    personAge = person.age
    console.log(personName) // 'Jack'
    console.log(personAge) // 22
    
    // 使用对象解构
    let person = {name: 'Jack', age: 22}
    let {name: personName, age: personAge} = person
    console.log(personName)
    console.log(personAge)
    
    // 如果想让变量直接使用属性的名称,可以使用简写语法
    let person = {name: 'Jack', age: 22}
    let {name, age} = person
    console.log(name) // 'Jack'
    console.log(age) // 22
    
    // 当解构出的属性在对象中不存在时,则对应变量的值就是undefined
    let person = {name: 'Jack', age: 22}
    let {name, age, job} = person
    console.log(name) // 'Jack'
    console.log(job) // undefined
    
    // 在解构的同时定义默认值,适用于解构出的属性不存在于源对象中的情况
    let person = {name: 'Jack', age: 22}
    let {name, age, job='software engineer'} = person
    console.log(name)
    console.log(job)
    
    // 在函数参数列表中也可以进行解构赋值,对参数的解构赋值不会影响arguments对象
    let person = {name: 'Jack', age: 22}
    function printPerson(foo, {name, age}, bar) {
        console.log(arguments)
        console.log(name, age)
    }
    printPerson('1st', person, '2nd') // {"0":"1st","1":{"name":"Jack","age":22},"2":"2nd"}  'Jack' 22
    
    

    更多相关内容
  • JS 对象解构赋值

    千次阅读 2019-11-22 18:37:48
    结构赋值的目的就是从对象或者数组中获取值赋值给变量,从而减少代码的编写 ... 注意:下面虽然看起来是创建了一个对象,对象中有两个属性 name 和 age 但是:其实是声明了两个变量 name:等于对象...

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

    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

     

    展开全文
  • js笔记-对象解构赋值

    2022-02-15 10:56:27
    然后,是使用对象解构的: // 使用对象解构 let person = { name: 'Matt', age: 27 }; let { name: personName, age: personAge } = person; console.log(personName); // Matt console.lo.
     personAge = person.age; 
    console.log(personName); // Matt 
    console.log(personAge); // 27 
    然后,是使用对象解构的:
    // 使用对象解构
    let person = { 
     name: 'Matt', 
     age: 27 
    }; 
    let { name: personName, age: personAge } = person; 
    console.log(personName); // Matt 
    console.log(personAge); // 27
    
     name: 'Matt', 
     age: 27 
    }; 
    let { name, age } = person; 
    console.log(name); // Matt 
    console.log(age); // 27
    
    let person = { 
     name: 'Matt', 
     age: 27 
    }; 
    let { name, job } = person; 
    console.log(name); // Matt 
    console.log(job); // undefined
    
    let person = { 
     name: 'Matt', 
     age: 27 
    }; 
    let { name, job='Software engineer' } = person; 
    console.log(name); // Matt 
    console.log(job); // Software engineer
    
    解构并不要求变量必须在解构表达式中声明。不过,如果是给事先声明的变量赋值,则赋值表达式
    必须包含在一对括号中:
    let personName, personAge; 
    let person = { 
     name: 'Matt', 
     age: 27 
    }; 
    ({name: personName, age: personAge} = person); 
    console.log(personName, personAge); // Matt, 27
    
     name: 'Matt', 
     age: 27, 
     job: { 
     title: 'Software engineer' 
     } 
    }; 
    // 声明 title 变量并将 person.job.title 的值赋给它
    let { job: { title } } = person; 
    console.log(title); // Software engineer
    
    展开全文
  • 对象解构赋值详解

    2020-09-12 22:43:18
    */ // 注意点: 在对象解构赋值中, 左边的变量名称必须和对象的属性名称一致, 才能解构出数据 //let {a, b} = {name: "lnj",age: 34}; //console.log(a, b); // undefined undefined let {age} = {name: "lnj",age: ...
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    </head>
    <body>
    	<script type="text/javascript">
    		/*
            注意点:
            对象的解构赋值和数组的解构赋值 除了符号不一样, 其它的一模一样
            数组解构使用[]
            对象解构使用{}
            */
          	//左边的格式与右边的格式要一样。
          	/*let [a,b,c]=[6,66,666];
          	console.log(a,b,c);*/
          	//个数可以不一样.
          	/*let [a,b]=[1,11,111];
          	console.log(a,b);
          	*/
          	/*let [a,b,c,d]=[1,11,111];
          	console.log(a,b,c,d);
          	*/
           // 3.在数组的解构赋值中,如果右边少于左边, 我们可以给左边指定默认值
           /*let [a,b,c=555]=[1,3];
           console.log(a,b,c);
           */
          let obj={
          	name:"cyg",
          	age:666
          };
          /*let name=obj.name;
          let age=obj.age;*/
          //let {name,age}=obj;
        /* let {name,age}={name:"cyg",age:666};
          console.log(name,age);*/
    			/*let {name} = {name: "lnj",age: 34};
             console.log(name);    */
               /*let {name, age, height} = {name: "lnj",age: 34};
             console.log(name, age, height); */
    
             /*let {name, age, height = 1.80} = {name: "lnj",age: 34};
             console.log(name, age, height);*/
               // 注意点: 在对象解构赋值中, 左边的变量名称必须和对象的属性名称一致, 才能解构出数据
                //let {a, b} = {name: "lnj",age: 34};
             //console.log(a, b); // undefined undefined
    
           let {age} = {name: "lnj",age: 34};
            console.log(age); // 34
            
    	</script>
    </body>
    </html>
    
    展开全文
  • 解构赋值是一种表达式,允许您使用数组或对象,将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多变量的赋值,大大的减少了代码量。解构表达式有种:array和object。 今天的文章笔者将从...
  • 对象解构赋值

    2021-04-15 20:54:24
    ES6新增了对象解构的语法,可在一条语句里面实现一或多赋值操作,简单来说,就是使用与对象匹配的结构实现对象属性的赋值。 不使用解构赋值: let person = { name: "Matt", age: 12 } let personName = ...
  • Es6对象解构赋值

    2022-03-26 16:45:32
    对象解构与简单写法
  • ES6 对象解构赋值

    2019-01-17 16:24:00
    3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何类型的单个值的集合   默认值 1.数组成员的值不严格等于undefined,默认值不生效(null的话相应值依然为null) ...
  • 2.2 对象解构赋值

    2019-08-02 13:49:29
    对象解构赋值 简单介绍 数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值 如果解构失败,变量的值等于undefined 解构赋值的规则是,只要等号右边...
  • 什么是解构赋值:按照一定的模式从数组或者对象中提取值,然后对变量进行赋值,这被称为解构赋值。 数组解构赋值 基本用法 下标对下标。 let [a,b,c]=[1,2,3]; let [a,[[b],c]=[1,[[2],3]]; 结果: 同时声明三变量...
  • ES6入门:对象解构赋值原理及应用 一、对象解构赋值的原理 1、模式(结构)匹配 {}={} 2、属性名相同的完成赋值 const { age, username } = { username: 'Alex', age: 18 }; //18 "Alex" //完整形式为: const { ...
  • ES6中的对象解构赋值

    万次阅读 2018-11-07 13:50:54
    解构赋值: 解构赋值语法是一Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值...注意:对象解构赋值的键名对应很重要,不然会找不到。因为对象是无序的,必须通过...
  • 解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值。说直白点,等号两边的结构相同,右边的值会赋给左边的变量。 一、数组的解构赋值: 1.基本用法 let [a, b, c] = [1, 2, 3]; console....
  • 数组的解构赋值 解构匹配,索引值相同 <script> let a =[11,122,33]; const [ b,c,d ]=[11,122,33]; console.log(b,c,d); </script> 默认值的基本用法 右边没有需要被解构的值,那么左边的值...
  • js常用对象解构赋值

    千次阅读 2019-10-30 10:29:53
    基本类型的包装对象 ...基本类型 null 和 undefined 是例外。他们没有相应的“包装对象”,也没有提供任何方法。 数字类型–JavaScript中所有的数字都以64位格式IEEE-754存储 <script> let n...
  • 对象解构与数组有一重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。 let { bar, foo } = { foo: 'aaa', bar: 'bbb' }; foo //...
  • 所谓的解构赋值就是:按照一定模式,从数组和对象中提取值,对变量进行赋值...// 创建一个对象 let obj = {username: '妲己', age: 18, gender: 'girl'} // 进行解构赋值 let {age, username, gender} = obj // 通过...
  • 数组,对象解构赋值 基本原则如下: 数组的元素是按次序排列的,变量的取值由它的位置决定; 对象的属性没有次序,变量必须与属性同名,才能取到正确的值。 数组的解构赋值: let [x, y]= [1, 2]; // x = 1 // y =...
  • 对象解构赋值的多次解构,之前项目中用到的并不多,今天在项目中看到了一次,特此记录一下,详情见阮一峰老师的es6专业博客 对象的解构赋值这块。
  • 解构赋值 解构赋值是javascript表达式,这使得可以将好数据从数组或对象提取到不同的变量中。...注意:对象解构赋值的键名对应很重要。不然不会找到。因为对象时无序的,必须通过键名来识别 1.未先声明变量再进行对象解
  • ES6之变量的解构赋值

    2019-05-22 11:16:41
    ES6之变量的解构赋值数组的解构赋值基本用法默认值对象解构赋值 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 以前,为变量赋值,只能...
  • 在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码 let options = { repeat: true, save: false }; // 从对象中提取数据 let repeat = options.repeat, save = ...
  • 解构赋值是javascript 语法,作用是将值从数组、或属性从对象,提取到不同的变量中。 1. 数组解构 1.1 声明变量并赋值: let hi = ['hello', 'world']; let [hello, world] = hi console.log(hello) =&...
  • 对象解构是一种快速赋值的方式 代码如下: // 对象解构是一种快速赋值的方式 let obj = { name: '小昭', age: 18, hobby: '听歌' } // 下面这句话表示定义了name,age,hobby三变量,然后把obj对象的的...
  • es6-对象解构赋值 参考文档:https://es6.ruanyifeng.com/#docs/destructuring 自己的理解: const { 变量 } = 对象; // 这是es6的写法,相当于 const 变量 = 对象.属性【变量和属性要相同】 // 例如 const { ...
  • 解构赋值 是一种特殊的语法,它使我们可以将数组或对象“拆包”至一系列变量中,因为有时这样更方便。 解构操作对那些具有很多参数和默认值等的函数也很奏效。我们马上会看到类似的例子。 数组解构 下面是一将数组...
  • 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。...扩展运算符(...)可以用于合并两个对象 let aa = { age: 18, name: 'aaa' } let bb = { sex: '男' } let cc = {...aa, ..

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,775
精华内容 6,710
关键字:

两个对象解构赋值