对象解构默认参数获取所有参数

Question

我有一个带有导入的默认选项和功能的 js 文件，如下所示。我试图获取函数中的所有参数，但似乎无法使用它们。

import {defaultOptions} from "../defaults.js"

export function getConfig({
  width = defaultOptions.width,
  height = defaultOptions.height,
  fontsize = defaultOptions.fontsize
} = {}) {
   console.log(width); //shows width

   // I want to get all the arguments 
   console.log(arguments); 
}

当我调用不带参数的函数时，例如 getConfig() 和 console.log(width)，它会显示 defaultOptions 和 defaults.js 的宽度。但是 console.log(arguments) returns Arguments 对象的长度为 1，其中索引 0 : undefined.

有什么办法可以得到这样一个函数中的所有参数吗？

更新：请参阅此 JSFiddle 以了解类似的内容，例如在函数之前指定默认值。 https://jsfiddle.net/coolakul/fa9muzwh/8/

Answer 1

如果我没记错的话，试试这个：

import { defaultOptions } from "../defaults.js";

export function getConfig(arguments = {}) {
  const { width, height, fontsize } = arguments;
  console.log(width);
  console.log(arguments);
}
getConfig(defaultOptions);

Answer 2

let defaults = {
  width: 300,
  height: 500,
  symbsize: 25,
  margin: {
    top: 10,
    bottom: 10
  }
}

class Config {
    constructor({
      width = defaults.width, 
      height = defaults.height, 
      symbsize = defaults.symbsize, 
      margin = defaults.margin
    } = defaults) {
      this.width = width
      this.height = height
      this.symbsize = symbsize
      this.margin = margin
    }
  
  getConfig() {
    return {
      width: this.width,
      height: this.height,
      symbsize: this.symbsize,
      margin: this.margin
    }
  }
}

const config = new Config({height: 1})

console.log(config.getConfig());

使用 class 应该可以，或者我更喜欢使用它

Answer 3

参数与参数

对于这个问题，区分参数和参数很重要。参数是调用函数时传递给函数的内容，而不考虑函数如何解构这些值或将默认值设置为这些值。因此，当您不带参数调用 getConfig() 并记录 arguments.length 时，它应该为 0，无论 getConfig 如何解构或设置默认值。

另一方面，

Parameters 是它使用的函数定义中的变量。它们可以被分配默认值，也可以从解构的参数派生。

有点不清楚您在寻找什么，是反映函数使用的参数的对象，还是反映传递给函数的值（包括解构的未定义变量）的对象。我将讨论这两种情况。

参数

要重构参数，一种相当笨拙的方法是将解构变量用于新对象：

import {defaultOptions} from "../defaults.js"

export function getConfig({
  width = defaultOptions.width,
  height = defaultOptions.height,
  fontsize = defaultOptions.fontsize
} = {}) {
  // just assign them to parameters
  var parameters = { width, height, fontsize };
  console.log(parameters); 
}

或者，如果 defaultOptions 表示传递给函数的所有参数（即它只有 width、height、fontsize），您可以为它们分配 spread syntax:

import {defaultOptions} from "../defaults.js"

export function getConfig(options = {}) {
   var calculatedParameters = { ...defaultOptions, ...options };
   var { width, height, fontsize } = calculatedParameters;
   console.log(calculatedParameters); 
}

传递给函数的值（包括解构的未定义变量）

要重构传递的值，您可以解构参数，然后将其再次分配给变量。这个变量几乎与参数本身相同。在下面的示例中 calculatedArguments 几乎与 options 相同，只是现在它将具有宽度、高度和字体大小的属性，即使它们表示未定义的值：

import {defaultOptions} from "../defaults.js"

export function getConfig(options = {}) {
   var { width, height, fontsize } = options;
   var calculatedArguments = { width, height, fontsize };
   console.log(calculatedArguments); 

   // can also assign width, height, fontsize with default values
   ({
      width = defaultOptions.width,
      height = defaultOptions.height,
      fontsize = defaultOptions.fontSize
    } = options);
}

对象解构默认参数获取所有参数

Object destructuring default parameters get all arguments

javascript

function

object

parameter-passing

object-destructuring

参数与参数

参数

传递给函数的值（包括解构的未定义变量）