是否可以将类属性解包/解构到变量中？

Question

我正在使用 P5.js，但问题通常适用于 Javascript

在 p5.js 中，我们有一个类 p5.Vector，它对于操作向量非常有用，因为它已经实现了多种向量方法（加法、方向、幅度、旋转...）

矢量分量存储在

x

和

y

属性中，因此直观上易于访问

let myVector = createVector(1, 2);
myVector.x;  // returns 1

现在，P5.js 中的某些函数不接受向量，但需要一个 x 参数和 y 一个参数

例如画一个圆：

circle(10, 20, 5);  // draws a circle at position (10, 20) of diameter 5

现在问题：

我的函数通常返回向量，有时我想使用这个向量来调用不接受向量但接受单个坐标的本机 P5.js 函数。

在本例中，我使用辅助变量。

let myPosition = calculatePosition();  // calculatePosition returns a vector
circle(myPosition.x, myPosition.y, 5);

有没有一种方法可以在不使用辅助变量的情况下做到这一点，并以某种方式解压 x 和 y 分量，以便将它们传递给 Circle 的适当参数？

Answer 1

我在文档中找不到此选项，但您可以使用

Symbol.iterator

覆盖此行为

p5.Vector.prototype[Symbol.iterator] = function*() {
  yield this.x
  yield this.y
  yield this.z
}

function setup() {
  const v = createVector(1, 2, 3)
  console.log('test', ...v)
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

Answer 2

您可以通过创建一个辅助方法来完成此操作，该方法接收将要执行的方法（接收 x 和 y 以及其他参数）作为参数，包含 x 和 y 的这些值的向量，以及用于其他参数的 Rest 参数 .

剩余参数语法允许函数接受不定的参数 作为数组的参数数量，提供了一种表示可变参数的方法 JavaScript 中的函数。

const execMethod = (method, vector, ...arguments) => {
  return method(vector.x, vector.y, ...arguments);
};

const vector = {
  x: 10,
  y: 20
};

const circle = (x, y, z) => {
  console.log(('x=' + x));
  console.log(('y=' + y));
  console.log(('z=' + z));
};

const testOnlyXandY = (x, y) => {
  console.log(('x=' + x));
  console.log(('y=' + y));
  return (x + y);
};

const testWithMoreParams = (x, y, z, n) => {
  console.log(('x=' + x));
  console.log(('y=' + y));
  console.log(('z=' + z));
  console.log(('n=' + n));
  return (x + y + z + n);
};

console.log('circle');
execMethod(circle, vector, 5);
console.log('testOnlyXandY');
execMethod(testOnlyXandY, vector);
console.log('testWithMoreParams');
execMethod(testWithMoreParams, vector, 99, 123);