JS对象解构

1. 什么是对象解构？
2. 基础使用
- 2.1) 变量在解构表达式中声明
- - 变量直接使用属性的名称
  - 变量使用自定义名称
- 2.2) 变量在解构表达式前声明
3. 嵌套解构
4. 函数参数列表中解构赋值

1. 什么是对象解构？

对象解构：其实就是利用 JS 解构赋值的特性，使用与对象匹配的结构来实现对象的属性赋值（即将对象的属性值提取出来）

2. 基础使用

2.1) 变量在解构表达式中声明

变量直接使用属性的名称

const person = {name: "Xixi",age: 18
}let { name, age } = person;
console.log(name);
console.log(age);

如果对象中不含有想获取的属性名称，在无默认值的情况下，会返回 undefined

const person = {name: "Xixi",age: 18
}
// 不带有默认值
let { job } = person;
console.log(job);
// 带有默认值
let { hobby='basketball' } = person;
console.log(hobby);

变量使用自定义名称

变量如果想使用自定义的名称来获取对象的属性值，则以 valName: newName 的形式来获取，其中 valName 是在对象中的属性名称，newName 是自定义的变量名称

const person = {name: "Xixi",age: 18,hobby: "basketball"
}
let { age: XixiAge, hobby: XixiHobby, job: XixiJob="Student" } = person;
console.log(XixiAge);
console.log(XixiHobby);
console.log(XixiJob)

2.2) 变量在解构表达式前声明

如果想要给事先声明的变量赋值，则赋值表达式必须包含在一对括号中

const person = {name: "Xixi",age: 18,hobby: "basketball"
}
let XixiAge, XixiHobby;
({ age: XixiAge, hobby: XixiHobby } = person);
console.log(XixiAge);
console.log(XixiHobby);

Notes:

解构在内部函数使用函数 ToObject() 把源数据结构转换为对象。这意味着在对象解构的上下文中，原始值会被当成对象。所以 null 和 undefined 不能被解构，否则会抛出错误。

3. 嵌套解构

当对象的属性也是一个对象的时候，可以使用嵌套解构来匹配嵌套的属性

const person = {name: "Xixi",age: 18,hobbies: {hobby1: "basketball",hobby2: "chess"}
}
let { hobbies: { hobby1 } } = person;
console.log(hobby1);

在外层属性没有定义的情况下，如果没有设置默认值，不能使用嵌套解构

const person = {name: "Xixi",age: 18,
}
let { hobbies: { hobby1 } } = person;
console.log(hobby1);

使用默认值则可以解决这种情况：

const person = {name: "Xixi",age: 18,
}
let { hobbies: { hobby1 } = {} } = person;
console.log(hobby1);
let { jobs: { job1 } = { job1: "student" }} = person;
console.log(job1);

Notes
如果一个表达式涉及多个赋值，开始的赋值成功，后面的赋值失败，则解构只会完成前面成功的赋值

const person = {name: "Xixi",age: 18,job: "student"
}
let XixiAge, XixiHobby1, XixiJob;try {({ age: XixiAge,hobbies: { hobby1: XixiHobby1 },job: XixiJob} = person);
} catch(e) {}
console.log(XixiAge);
console.log(XixiHobby1);
console.log(XixiJob);

4. 函数参数列表中解构赋值

在函数参数列表使用解构赋值，不会影响到 arguments 对象
通过一个例子，来看看它的使用：

const person = {name: "Xixi",age: 18,hobby: "basketball"
}function sayHello({name, age, hobby}) {console.log(arguments);console.log(`My name is ${name}. I'm ${age}. My hobby is ${hobby}.`);
}
sayHello(person);

Notes:
在函数参数列表使用解构赋值时，传入参数时，传入对象在参数中的位置要与函数在定义时，参数列表中解构赋值的位置一致

JavaScript对象解构相关推荐

JavaScript 对象解构用法解析
大家好,我是半夏
从Vuex的Actions中理解JavaScript的解构赋值
导言: 本菜鸡在学习大佬的代码的时候看到有大佬在Vuex中的Actions用到了解构赋值.我对Actions和解构赋值都不算太了解.这篇文章就记录一下我对这两点的一个理解. Actions背景介绍背 ...
ES6/06/ES6简介，ES6新增语法，let声明变量，const声明常量，var,let和const总结，数组解构，对象解构，箭头函数，剩余参数
ES6简介 ES全称:ECMAScript ; 由ECMA国际化组织制定的标准脚本语言的标准化规范: 为什么使用ES6? 每一次标准的诞生都意味着语言的完善,功能的加强,JavaScript语言本身也 ...
js 对象解构_JS对象：解构
js 对象解构 JS对象:TL; DR (JS Objects: TL;DR) JavaScript has been plagued since the beginning with misunde ...
ES6中的对象解构赋值
解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上). 说白 ...
TypeScript基础-数组结构和对象解构
解构数组 Typescript 数组解构和JavaScript类似 let input = [1, 2]; let [first, second, three] = input; console.lo ...
ES6基础2（块级作用域、数组对象解构）-学习笔记
文章目录 ES6基础2(块级作用域.数组对象解构)-学习笔记块级作用域数组解构对象解构字符串解构函数的参数解构 ES6基础2(块级作用域.数组对象解构)-学习笔记块级作用域 //let c ...
ES6-4/5 解构赋值、函数默认值、数组解构、对象解构
ES-4 解构赋值.函数默认值.数组解构.对象解构 ES-5 隐式转换.函数参数解构.解构本质.()用法一解构赋值 1 虚值含义:在Boolean转换结果为假的值falsy 2 函数默认值 ES ...
JS解构赋值：数组解构和对象解构
一种为变量赋值的新语法,一次可以为多个变量赋值. 分成两种情况: 数组解构 let [变量的集合] = [正常的数组] 举例说明: let [x, y, z] = [10, 16, 21]; 上述代码 ...

JavaScript对象解构

JS对象解构

1. 什么是对象解构？

2. 基础使用

2.1) 变量在解构表达式中声明

变量直接使用属性的名称

变量使用自定义名称

2.2) 变量在解构表达式前声明

3. 嵌套解构

4. 函数参数列表中解构赋值

JavaScript对象解构相关推荐

最新文章

热门文章

JavaScript对象解构

JS对象解构

1. 什么是对象解构 ？

2. 基础使用

2.1) 变量在解构表达式中声明

变量直接使用属性的名称

变量使用自定义名称

2.2) 变量在解构表达式前声明

3. 嵌套解构

4. 函数参数列表中解构赋值

JavaScript对象解构相关推荐

最新文章

热门文章

1. 什么是对象解构？