定义一个函数，使其仅应用于作为参数传递的对象的属性子集

Question

我最近遇到了这个漂亮的JavaScript

我正在努力理解它是如何工作的，特别是这部分：

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

在这里，我们处理一个NamedNodeMap，它是Attr对象的集合，并且Attr确实具有名为name和value的属性。因此，我们有一个匿名函数，它接受一个对象并返回一个数组。目前为止，一切都好。

我不太明白的是函数的参数被定义为垃圾对象{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

您正在寻找的是解构赋值，其中将对象分配给仅包含键的对象文字，您需要采用。

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

Answer 2

我不太明白的是函数的参数被定义为垃圾对象{名称，值}的方式。

这称为解构赋值 JavaScript 表达式，它可以将数组中的值或对象的属性解压缩为不同的变量。

Answer 3

你并没有完全将对象文字定义为参数，而是在解构对象。您可以将解构视为访问对象属性的另一种方式。

例如，如果您有一个对象a：

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

您可以通过多种不同的方式获取其属性：

通过括号表示法：

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

通过点表示法：

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

或通过解构赋值：

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属性。