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

【问题标题】：Function parameter value isn't working in object-destructuring in JS函数参数值在 JS 中的对象解构中不起作用
【发布时间】：2020-09-23 06:35:48
【问题描述】：

假设我有以下对象：

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 方法解决了这个问题。但我仍然很想知道为什么函数参数值在对象解构中不起作用。

不重复：

This question is about passing default value

【问题讨论】：

它试图从对象中解构propertyName本身而不是brands

标签： javascript object-destructuring

【解决方案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（松散模式）的牺牲品，自动创建一个全局变量。

【讨论】：

（FWIW，我在新书的第 7 章中详细介绍了解构，如果您有兴趣，请在我的个人资料中链接。）

【解决方案2】：

当您只想获取一个属性时，为什么要在这里使用解构？

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

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

extractProperty("brands");

【讨论】：