javascript `var { ... } = ...` 语句中的大括号有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15290981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does curly brackets in the `var { ... } = ...` statements do?
提问by timdream
Not sure if this is a Mozilla-specific JS syntax, but I often found variables being declared this way, for example, in add-on SDK docs:
不确定这是否是 Mozilla 特定的 JS 语法，但我经常发现以这种方式声明的变量，例如，在附加 SDK 文档中：
var { Hotkey } = require("sdk/hotkeys");
and in various chrome Javascript (letstatement is being used in place of var),
并在各种 chrome Javascript 中（使用let语句代替var），
let { classes: Cc, interfaces: Ci, results: Cr, utils: Cu } = Components;
I found it very confusing but I am not being able to find any documentation about both syntax, even on MDN.
我发现它非常令人困惑，但我无法找到有关这两种语法的任何文档，即使在MDN 上也是如此。
采纳答案by Blender
They're both JavaScript 1.7 features. The first one is block-level variables:
它们都是 JavaScript 1.7 的特性。第一个是块级变量：
letallows you to declare variables, limiting its scope to the block, statement, or expression on which it is used. This is unlike thevarkeyword, which defines a variable globally, or locally to an entire function regardless of block scope.
let允许您声明变量，将其范围限制为使用它的块、语句或表达式。这与var关键字不同，后者定义全局变量或本地变量，而不管块的作用域如何。
The second one is called destructuring:
第二个称为解构：
Destructuring assignment makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.
...
One particularly useful thing you can do with destructuring assignment is to read an entire structure in a single statement, although there are a number of interesting things you can do with them, as shown in the section full of examples that follows.
解构赋值可以使用反映数组和对象字面量构造的语法从数组或对象中提取数据。
...
使用解构赋值可以做的一项特别有用的事情是在单个语句中读取整个结构，尽管您可以使用它们做许多有趣的事情，如后面的完整示例部分所示。
For those familiar with Python, it's similar to this syntax:
对于熟悉 Python 的人来说，它类似于以下语法：
>>> a, (b, c) = (1, (2, 3))
>>> a, b, c
(1, 2, 3)
The first code chunk is shorthand for:
第一个代码块是以下的简写：
var {Hotkey: Hotkey} = require("sdk/hotkeys");
// Or
var Hotkey = require("sdk/hotkeys").Hotkey;
You can rewrite the second code chunk as:
您可以将第二个代码块重写为：
let Cc = Components.classes;
let Ci = Components.interfaces;
let Cr = Components.results;
let Cu = Components.utils;
回答by Aadit M Shah
What you're looking at is a destructuring assignment. It's a form of pattern matchinglike in Haskell.
您正在查看的是一个解构任务。这是一种类似于 Haskell的模式匹配形式。
Using destructuring assignment you can extract values from objects and arrays and assign them to newly declared variables using the object and array literal syntax. This makes code much more succinct.
使用解构赋值，您可以从对象和数组中提取值，并使用对象和数组文字语法将它们分配给新声明的变量。这使得代码更加简洁。
For example:
例如：
var ascii = {
a: 97,
b: 98,
c: 99
};
var {a, b, c} = ascii;
The above code is equivalent to:
上面的代码等价于：
var ascii = {
a: 97,
b: 98,
c: 99
};
var a = ascii.a;
var b = ascii.b;
var c = ascii.c;
Similarly for arrays:
数组类似：
var ascii = [97, 98, 99];
var [a, b, c] = ascii;
This is equivalent to:
这相当于：
var ascii = [97, 98, 99];
var a = ascii[0];
var b = ascii[1];
var c = ascii[2];
You can also extract and rename an object property as follows:
您还可以按如下方式提取和重命名对象属性：
var ascii = {
a: 97,
b: 98,
c: 99
};
var {a: A, b: B, c: C} = ascii;
This is equivalent to:
这相当于：
var ascii = {
a: 97,
b: 98,
c: 99
};
var A = ascii.a;
var B = ascii.b;
var C = ascii.c;
That's all there is to it.
这里的所有都是它的。
回答by Deeksha Sharma
This is a destructing assignment in Javascript and is part of ES2015 standard. It unpacks or extracts values from arrays or properties from objects into distinct variables. Eg: Array Destructuring
这是 Javascript 中的一个破坏性赋值，是 ES2015 标准的一部分。它将数组中的值或对象中的属性解包或提取到不同的变量中。例如：数组解构
var foo = ["one", "two", "three"];
//without destructuring
var one = foo[0];
var two = foo[1];
var three = foo[2];
// with destructuring var[one,two,three] = foo
// 使用解构 var[one,two,three] = foo
Eg: Object Destructuring
例如：对象解构
var o = {p: 42, q: true}; var {p, q} = o;
var o = {p: 42, q: true}; var {p, q} = o;
console.log(p); // 42 console.log(q); // true
控制台日志（p）；// 42 console.log(q); // 真的
// Assign new variable names var {p: foo, q: bar} = o;
// 分配新的变量名 var {p: foo, q: bar} = o;
console.log(foo); // 42 console.log(bar); // true
控制台日志（富）；// 42 console.log(bar); // 真的
回答by Jan Han?i?
There is documentation for the letstatement on MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let
letMDN 上有该声明的文档：https: //developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let
letis similar to varin that it limits the scope of the declared variable. It allows you to declare a variable inside a if(){}block (or some other block) and have that variable only "visible" inside that block (JavaScript, until now, has function scope and not block scope as most other languages). So the letis basically a "fix" for something many people have issues with. Note that tihs is a JavaScript 1.7 feature.
let类似于var它限制了声明变量的范围。它允许您在if(){}块（或某个其他块）内声明一个变量，并使该变量仅在该块内“可见”（JavaScript，到目前为止，具有函数作用域，而不像大多数其他语言那样具有块作用域）。因此，let对于许多人遇到的问题，这基本上是一个“修复”。请注意，tihs 是 JavaScript 1.7 功能。
Haven't found anything on {Foo}.
上没有找到任何东西{Foo}。
