-
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>
-
ES6基础之解构赋值(destructuring assignment)
2020-12-01 14:35:52解构赋值是一种表达式,允许您使用数组或对象,将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值,大大的减少了代码量。解构表达式有两种:array和object。 今天的文章笔者将从... -
对象的解构赋值
2021-04-15 20:54:24ES6新增了对象解构的语法,可在一条语句里面实现一个或多个赋值操作,简单来说,就是使用与对象匹配的结构实现对象属性的赋值。 不使用解构赋值: let person = { name: "Matt", age: 12 } let personName = ... -
Es6对象解构赋值
2022-03-26 16:45:32对象的解构与简单写法 -
ES6 对象的解构赋值
2019-01-17 16:24:003.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何类型的单个值的集合 默认值 1.数组成员的值不严格等于undefined,默认值不生效(null的话相应值依然为null) ... -
2.2 对象的解构赋值
2019-08-02 13:49:29对象解构赋值 简单介绍 数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值 如果解构失败,变量的值等于undefined 解构赋值的规则是,只要等号右边... -
ES6解构赋值 数组解构赋值 对象解构赋值 函数参数解构赋值 解构 参数解构
2020-12-17 13:52:40什么是解构赋值:按照一定的模式从数组或者对象中提取值,然后对变量进行赋值,这被称为解构赋值。 数组解构赋值 基本用法 下标对下标。 let [a,b,c]=[1,2,3]; let [a,[[b],c]=[1,[[2],3]]; 结果: 同时声明三个变量... -
ES6入门:对象解构赋值原理及应用
2022-01-27 16:10:52ES6入门:对象解构赋值原理及应用 一、对象解构赋值的原理 1、模式(结构)匹配 {}={} 2、属性名相同的完成赋值 const { age, username } = { username: 'Alex', age: 18 }; //18 "Alex" //完整形式为: const { ... -
ES6中的对象解构赋值
2018-11-07 13:50:54解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值...注意:对象解构赋值的键名对应很重要,不然会找不到。因为对象是无序的,必须通过... -
es6入门2--对象解构赋值
2019-04-01 22:38:00解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值。说直白点,等号两边的结构相同,右边的值会赋给左边的变量。 一、数组的解构赋值: 1.基本用法 let [a, b, c] = [1, 2, 3]; console.... -
数组和对象的解构赋值
2022-03-30 19:23:39数组的解构赋值 解构匹配,索引值相同 <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... -
ES6学习笔记之变量的解构赋值——对象的解构赋值
2019-09-12 12:01:19对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。 let { bar, foo } = { foo: 'aaa', bar: 'bbb' }; foo //... -
ES6 解构赋值详解:对象解构赋值、数组解构赋值
2019-07-17 10:20:42所谓的解构赋值就是:按照一定模式,从数组和对象中提取值,对变量进行赋值...// 创建一个对象 let obj = {username: '妲己', age: 18, gender: 'girl'} // 进行解构赋值 let {age, username, gender} = obj // 通过... -
【数组的解构赋值,对象的解构赋值,es6 合并数组,对象合并(es5,es6)】
2021-11-29 13:24:11数组,对象的解构赋值 基本原则如下: 数组的元素是按次序排列的,变量的取值由它的位置决定; 对象的属性没有次序,变量必须与属性同名,才能取到正确的值。 数组的解构赋值: let [x, y]= [1, 2]; // x = 1 // y =... -
对象的解构赋值----多次解构
2022-03-09 19:26:04对象解构赋值的多次解构,之前项目中用到的并不多,今天在项目中看到了一次,特此记录一下,详情见阮一峰老师的es6专业博客 对象的解构赋值这块。 -
ES6中的解构之对象解构赋值
2020-07-04 15:42:03解构赋值 解构赋值是javascript表达式,这使得可以将好数据从数组或对象提取到不同的变量中。...注意:对象解构赋值的键名对应很重要。不然不会找到。因为对象时无序的,必须通过键名来识别 1.未先声明变量再进行对象解 -
ES6之变量的解构赋值
2019-05-22 11:16:41ES6之变量的解构赋值数组的解构赋值基本用法默认值对象的解构赋值 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 以前,为变量赋值,只能... -
ES6解构赋值(一)对象解构
2021-08-12 16:34:30在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码 let options = { repeat: true, save: false }; // 从对象中提取数据 let repeat = options.repeat, save = ... -
js 数组与对象的解构赋值
2019-11-27 16:12:46解构赋值是javascript 语法,作用是将值从数组、或属性从对象,提取到不同的变量中。 1. 数组解构 1.1 声明变量并赋值: let hi = ['hello', 'world']; let [hello, world] = hi console.log(hello) =&... -
ES6新特性之对象解构赋值,数组解构赋值,set数据类型,箭头函数详解
2021-11-09 20:53:46对象解构是一种快速赋值的方式 代码如下: // 对象解构是一种快速赋值的方式 let obj = { name: '小昭', age: 18, hobby: '听歌' } // 下面这句话表示定义了name,age,hobby三个变量,然后把obj对象的的... -
2021-12-16 学习记录-es6-对象的解构赋值(常规解构赋值+连续解构赋值)
2021-12-16 10:04:56es6-对象的解构赋值 参考文档:https://es6.ruanyifeng.com/#docs/destructuring 自己的理解: const { 变量 } = 对象; // 这是es6的写法,相当于 const 变量 = 对象.属性【变量和属性要相同】 // 例如 const { ... -
ES6 --- 解构赋值(数组,对象,函数)使用详解
2022-02-23 18:15:02解构赋值 是一种特殊的语法,它使我们可以将数组或对象“拆包”至一系列变量中,因为有时这样更方便。 解构操作对那些具有很多参数和默认值等的函数也很奏效。我们马上会看到类似的例子。 数组解构 下面是一个将数组... -
ES6 对象解构赋值(浅拷贝 VS 深拷贝)
2021-10-19 10:25:21对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。...扩展运算符(...)可以用于合并两个对象 let aa = { age: 18, name: 'aaa' } let bb = { sex: '男' } let cc = {...aa, ..
收藏数
16,775
精华内容
6,710