ES6新增语法对象解构

2023-08-16 14:31| 来源: 网络整理| 查看: 265

介绍

ECMAScript6新增了对象解构语法,可以在一条语句中使用嵌套数据实现一个或者多个赋值操作, 简单的说,对象解构就是使用了与对象匹配的解构来实现对象属性赋值

简单使用

下面是不使用对象解构写的代码

let person = {name:"张三",age:21} let personName = person.name let personAge = person.age console.log(personName) // 张三 console.log(personAge) // 21

再用对象解构的语法来实现一下

let person = {name:"张三",age:21} let {name:PersonName,age:PersonAge} = person console.log(PersonName,PersonAge) // 张三,21

两者实现的功能一样,但明显对象解构的方式更加方便,简洁

1. 解构源对象不存在的属性,会打印成来undefined let person = {name:"张三",age:21} let {name:PersonName,job:PersonAge} = person console.log(PersonName,PersonAge) // undefined 2. 在解构赋值的同时可以定义默认值,这就有效解决了前面的源对象未定义该属性的问题 let person = {name:"张三",age:21} let {name:PersonName,job="WebKaiFa"} = person console.log(PersonName,job) // 张三 WebKaiFa 3. 解构并不要求变量必须在结构表达式中声明,不过,如果给事先声明的变量赋值,则赋值表达式必须包含在一对括号当中

如果不加括号的的情况(报错)

let personName,personAge; let person = {name:"张三",age:21}; {name:personName,age:personAge} = person; console.log(personName,personAge); // Uncaught SyntaxError: Unexpected token ':'

加了括号(正常输出)

let personName,personAge; let person = {name:"张三",age:21}; ({name:personName,age:personAge} = person) console.log(personName,personAge); // 张三 21 4. 嵌套解构 let person = {name:"张三",age:21,job:{ name:"WebKaiFa" }}; let personCopy = {}; // 解构源对象赋值给personCopy空对象 ({name:personCopy.name,age:personCopy.age,job:personCopy.job} = person) console.log(personCopy);

因为一个对象的引用被赋值给personCopy空对象,所以修改源对象的属性值,personCopy的值也会对应的发生改变,

5.在外层属性没有定义的情况不能使用嵌套解构,无论源对象还有目标对象都是一样的

显示undefined

报错:因为address在源对象上找不到该属性

在函数参数列表中也可以进行解构赋值,对参数的解构赋值不会影响到arguments对象,但可以在函数签名中声明在函数体内使用局部变量

let person = {name:"张三",age:21} function PrintPerson(foo,{name,age},bat){ console.log(arguments); console.log(name,age) // 张三 21 } PrintPerson('star',person,'end') // Arguments(3) ['star', {…}, 'end', callee: (...), Symbol(Symbol.iterator): ƒ]0: "star"1: {name: '张三', age: 21}age: 21name: "张三"[[Prototype]]: Object2: 7. 总结一下

ES6对象解构语法的优点和好处有以下几点：

可以方便地从对象中提取属性值，不需要使用点运算符或中括号。可以给变量赋予默认值，避免undefined或null的情况。可以使用别名，给变量取一个与对象属性名不同的名字。可以嵌套解构，从对象的深层属性中提取值。可以与函数参数结合，简化函数的定义和调用。

【本文地址】

公司简介

联系我们

ES6新增语法 对象解构

ES6新增语法对象解构