函数参数值在 JS 中的对象解构中不起作用

Question

假设我有以下对象：

let filters = {
  brands: { ... },
  price: { ... },
  sizes: { ... },

  ...
}

filters 对象的属性将由用户设置。这意味着有时 filters 对象可能只包含 brands，有时它可能包含 brands & price 等等。

我编写了以下函数来从 filters 对象中提取特定的属性：

let extractProperty = (propertyName) => {
  ({ propertyName, ...rest } = filters);  // <-- propertyName isn't working here
  console.log(propertyName);
}

extractProperty("brands");

如果我调用上面的函数，控制台会显示undefined。谁能指出我在这里遗漏了什么？

CodePen Link

注：

我已经使用 lodash.omit 方法解决了这个问题。但我仍然很想知道为什么函数参数值在对象解构中不起作用。

不重复：

Answer 1

该代码正在寻找名为 propertyName 的属性，字面意思。要将 propertyName 中的值用作属性名称，您需要使用计算符号，并且需要指定放置属性值的位置。例如，将其放入现有的 example 变量中：

let extractProperty = (propertyName) => {
  ({ [propertyName]: example, ...rest } = filters);
//   ^−−−−−−−−−−−−^^^^^^^^^^
  console.log(example);
};

extractProperty("brands");

你的代码是假设 rest 已经存在，但我怀疑你真的想在本地声明它，以及接收属性值的变量：

let extractProperty = (propertyName) => {
  const { [propertyName]: example, ...rest } = filters;
  console.log(example);
};

extractProperty("brands");

没有 const、let（或 var，但 var 已弃用），除非您在封闭范围内声明了 rest，否则代码要么失败并显示 ReferenceError（在严格模式下），要么成为我所说的 The Horror of Implicit Globals（在松散模式下）的牺牲品，自动创建一个全局变量。

Answer 2

当你只想得到一个属性时，为什么要在这里使用解构？

let filters = {
  brands: { value:'b' },
  price: { value:'p' },
  sizes: { value:'s' },
}

let extractProperty = propertyName =>
  console.log(filters[propertyName])

extractProperty("brands");

函数参数值在 JS 中的对象解构中不起作用

Function parameter value isn't working in object-destructuring in JS

javascript

object-destructuring