const obj = {
prop1: 1,
prop2: 2
}
// previously you would need to do something like this:
const firstProp = obj.prop1;
const secondProp = obj.prop2;
console.log(firstProp, secondProp);
// etc.
// however now you can do this on the same line:
const {prop1, prop2} = obj;
console.log(prop1, prop2);
4条答案
按热度按时间pbossiut1#
这两段代码是等效的,但第一段代码使用的ES6 destructuring assignment更短。
下面是一个简单的例子来说明它是如何工作的:
agxfikkp2#
以上语法使用ES6。如果将对象定义为:
现在,如果我们想分配或使用obj的email和title字段,那么我们不必编写整个语法,如
这就是老派
我们可以使用ES6结构化赋值,即如果我们的对象在obj对象中包含20个字段,那么我们只需要像这样写入我们想要使用的字段的名称:
这是ES6语法-更简单的语法它将自动从
obj
分配电子邮件和标题,只需为必填字段正确说明名称。w8biq8rn3#
这是ES6中的一个新特性。花括号符号是所谓的
destructuring assignment
的一部分。这意味着,您不再需要获取对象本身并在单独的行中为每个属性分配变量。您可以执行以下操作:正如您在最后看到的,功能是相同的-只是从对象获取属性。
还有更多关于解构赋值的内容--你可以检查MDN中的整个语法:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
vbopmzt14#
其他的答案已经足够好了,我会建议Destructuring assignment的一些有用的特性
解构赋值语法是一个JavaScript表达式,它使
unpack values from arrays, or properties from objects, into distinct variables
成为可能。1.* 解构数组,数组中每个项的索引充当属性(由于 * Array是JavaScript中的对象 )
1.* 与
Spread ...
运算符组合 *1.* 默认值 *
1.* 分配给新变量名 *