什么是解构赋值?
在 ES6 中,我们可以使用解构赋值来方便地将数组或对象中的值取出,赋值给变量。比如:
-- -------------------- ---- ------- ----- --- - --- -- --- ----- --- -- -- - ---- -------------- -- - -------------- -- - -------------- -- - ----- --- - - ----- ----- ---- -- -- ----- ------ ---- - ---- ------------------ -- -- ----------------- -- --展开代码
解构赋值的新特性:对象匹配模式
在 ES7 中,解构赋值又新增了一种模式:对象匹配模式。这种模式可以让我们方便地在解构对象时,只取出我们需要的属性,而不用管对象中还有其他的属性。
对象匹配模式的语法如下:
const obj = { name: '张三', age: 18, sex: '男' }; const {name, age} = { ...obj }; console.log(name); // 张三 console.log(age); // 18 console.log(sex); // 报错:sex is not defined
通过对象匹配模式,我们可以将 obj
对象中的 name
和 age
属性取出并分别赋值给 name
和 age
变量,而不用担心 obj
中还有其他的属性。
应用场景
对象匹配模式最常用的场景是在函数参数中使用。比如写一个函数,接收一个对象作为参数:
function getUserInfo(userInfo) { const {name, age} = userInfo; console.log(`姓名:${name},年龄:${age}`); }
上面的代码中,我们在函数内部使用对象匹配模式来取出 userInfo
中的 name
和 age
属性,然后输出到控制台。使用这种方式,我们可以只取出我们需要的属性,而不用管对象中还有其他的属性。
当然,我们也可以在函数参数中直接使用对象匹配模式:
function getUserInfo({name, age}) { console.log(`姓名:${name},年龄:${age}`); }
这样就可以省去在函数内部再解构一遍的过程。
注意事项
在使用对象匹配模式时,需要注意以下几点:
- 你需要使用
...
操作符来将对象展开,才能使用对象匹配模式。 - 属性名称必须与解构赋值的变量名称相同,否则会报错。
- 如果对象中没有要解构的属性,会将变量赋值为
undefined
。
结语
对象匹配模式可以方便地取出对象中我们需要的属性,省去了对其他属性的担心。在函数参数中使用对象匹配模式,能够使代码更加简洁易懂。但是在使用过程中也需要注意一些细节问题。希望本文对你有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6781a459935627c900e2777c