定义的功能仅适用于作为参数传递的对象的属性的子集[复制]

Question

这个问题已经在这里有一个答案：

• Where can I get info on the object parameter syntax for JavaScript functions? 1个回答

我最近碰到this nifty piece of JavaScript来到

而我挣扎了一下，了解它是如何工作的，具体这部分：

  Array.from(e.attributes, ({name, value}) => [name, value])

在这里，我们处理一个NamedNodeMap是的Attr对象的集合，并获得Attr确实有一个名为以及许多其他name和value性能。因此，我们有一个匿名函数，它接受一个对象，并返回一个数组。到现在为止还挺好。

我不完全得到的是函数的参数定义为litteral对象{name, value}的方式。

我能够孤立的行为：

> o={ a: 1, b: 2, ldfk: 'mùl' }
> let objToArr = function({a,b}){ return [a,b] }

> objToArr(o)
[ 1, 2 ]
> 
> o = {'dfklj':3.14, 'c':'z', 'a':1, 'foo':'bar', 'b':2, 'z':26 }
{ dfklj: 3.14, c: 'z', a: 1, foo: 'bar', b: 2, z: 26 }
> objToArr(o)
[ 1, 2 ]
> 

但我还是不明白为什么它的工作原理。可能有人请解释或参考我相应的文档？

Answer 1

你所寻找的是一个destructuring assignment，其中一个对象被分配到的对象常量只有按键，您需要承担。

var object = { name_: 'foo', value: 42 },
    { name_, value } = object;           // name is a property of window

console.log(name_);
console.log(value);

Answer 2

我不完全得到的是函数的参数定义为litteral对象{名称，值}的方式。

这就是所谓的destructuring assignment JavaScript表达式，使得它可以从对象解包从数组值或属性，为不同的变量。

Answer 3

你不完全定义对象文本作为参数，而是你destructuring的对象。你可以把解构作为访问对象的属性的另一种方式。

举例来说，如果你有一个对象a：

const a = {
  name: 'foo',
  value: 'bar'
}

您可以在许多不同的方式得到它的属性：

通过括号表示法：

const name = a["name"];
const value = a["value"];

通过点符号：

const name = a.name;
const value = a.value;

或者通过destructuring assignment：

const {name, value} = a; // name & value are variables which you can use

const a = {
  name: "foo",
  value: "bar"
}

var name = a["name"];
var value = a["value"];
console.log(name, value);

var name = a.name;
var value = a.value;
console.log(name, value);

var {name, value} = a;
console.log(name, value);

因此，当你在你的函数参数使用{name, value}时，实际上是告诉JavaScript来提取传入的参数中的对象的name和value性能。