javascript - 传递给生成器时对象和数组解构复杂化

Question

为了对学习生成器和解构进行一些收尾工作，我编了一个例子并将其记入我的脑海中，我将传递生成器的初始值“i”以表示可迭代。从一个物体开始，除非我有一些偶然的发现，否则它不会起作用。

一旦它使用一个对象来设置参数，我决定将箭头函数也加入其中，但有一些有趣的行为。

正如代码现在所示，该对象可以使用初始值“i”和箭头函数，但是按照现在的方式传递 genVal() 顶部的 if 语句，它仍然需要查看解构再次声明。我怀疑这与作用域有关，但我通常会期望在两个 let 语句引用相同的赋值时出现错误，即传递的参数“setup”，可选地包含数组或对象。

我在另一个版本中去掉了初始值“i”和箭头函数，但是那里也发生了一些奇怪的事情。

你能告诉我这是怎么回事吗？而且，如果您明白了，从设置而不是从生成器发送乘数“valFactor”的更好方法是什么，因为稍后我可能想将这个东西变成一个模块，而不是重新访问代码，除非进行一些重构需要吗？

function handler(val) {
  retVal = {}
  str = val.toString()
  // str = val
  dotIdx = str.indexOf(".")
  braceIdx = str.indexOf("(")
  retVal['head'] = str.slice(0, dotIdx)
  retVal['tail'] = str.slice(dotIdx + 1, braceIdx)
  return retVal
}

function calc(setup) {
  for (val of genVal(setup)) {
    // stringify and strip val using a handler
    let {
      head,
      tail
    } = handler(val)
    console.log(`Head: ${head} Tail: ${tail}`)
  }
}

function* genVal(setup) {
  // all passed will be objects so first distract for the object that is an array
  if (Array.isArray(setup)) {
    console.log("\n___________________________________________")
    console.log('array path')
    // changed from let to var re. stackoverflow comment
    // it's considered a bad solution as it breaks scope, and isn't the
    // accepted destructuring way, which would have a declaration
    // before the if...else block and retain these assignments, 
    // without var, let or const, and, for the object path, the statement wrapped in parentheses
    // see the answer below  
    var [i, iters, valTop, valBottom, valFactor] = setup
  } else { // is going to be an object, for sure
    console.log("\n___________________________________________")
    console.log('object path')
    // changed from let to var re. stackoverflow comment
    var {
      i,
      iters,
      valTop,
      valBottom,
      valFactor
    } = setup
  }


  // // // arrSetup 'mode' 
  // w/ obj destructure below commented out
  // we traverse the array path, above
  // an error results without this duplication
  // and the arrow fn passed as valFactor does not 'work'
  //////////

  // let [i, iters, valTop, valBottom, valFactor] = setup

  // // // objSetup 'mode' 
  // w/ arr destructure above commented out
  // we traverse the object path, above
  // an error results without this duplication
  //////////

  // let {
  //  i,
  //  iters,
  //  valTop,
  //  valBottom,
  //  valFactor
  // } = setup

  for (i; i <= iters; i++) {
    console.log(i)
    // console.log(valBottom)
    // console.log(valFactor)
    // newTail = valBottom + valFactor
    // console.log(newTail)

    if (i !== 1) {
      console.log(valTop + i)
      yield(valTop + i) / valFactor(valBottom)(i)
    } else {
      console.log(valTop)
      yield valTop / valBottom
    }
  }
}

// Two 'setup' types, one using arrSetup and the other using objSetup
// i, iters, valTop, valBottom, valFactor
// arrSetup = [1, 2, 22, 7, (m) => m+.0101]
arrSetup = [1, 2, 22, 7, m => n => m+n]


objSetup = {
  "i": 1,
  "iters": 2,
  "valTop": 22,
  "valBottom": 7,
  "valFactor": m => n => m+n,
  // "valFactor": (i) => i + .9999,
}

calc(objSetup)
calc(arrSetup)

更新:

因此，范围问题很容易解决。谢谢。

所以，范围问题比我想象的要有趣得多，而且给出的解决方案确实展示了我对 Javascript 语法比我提出问题之前更深入的理解。这里的代码非常接近原始代码。看一下 Barmar 如何将词法范围保留在函数 genVal() 中，但可以使用 if...else block 中的解构来实例化变量。奇怪的事情，但恕我直言，很少。

在第一篇文章中，代码的箭头函数不起作用，因为数组中的元素数量与赋值和解构不一致。哎哟!此后该问题已得到解决。事实证明，传递函数然后尝试使用它没有任何作用，尽管我只尝试了一些语法技巧来尝试让 valFactor 在生成器的yield 语句中针对 valBottom 起作用。离线时，我有点放弃传递函数，只是(暂时)在生成器中硬编码 valFactor 。

现在我正在寻找一种技术，该技术允许将函数(完整或箭头)作为数组或对象之一或两者的值传递给生成器，并使其在yield表达式中使用目前的解构语法完好无损(实际上是 Barmar 提供的语法)。

已解决:

函数柯里化(Currying)解决了我的问题。

而不是这个: i => i * .9090 如果 m 和 n 的值在上下文中传递，则此方法有效。 柯里化(Currying) = m => n => m*n 和电话: 柯里化(Currying)(varforM)(varforN)

注意:在调用中省略变量之一会导致箭头函数之一作为返回值。

Answer 1

您不能使用解构 let 来初始化对象或数组中的变量。由于 let 语句位于 if 和 else block 内，因此作用域只是这些 block ，而不是封闭的函数。

您可以做的是先声明变量，然后在 if 和 else 中使用解构赋值。

请注意，对对象的解构赋值必须括在括号中，因为如果语句以 { 开头，则假定它是 block 的开头，而不是对象。

function handler(val) {
  retVal = {};
  str = val.toString();
  // str = val
  dotIdx = str.indexOf(".");
  braceIdx = str.indexOf("(");
  retVal['head'] = str.slice(0, dotIdx);
  retVal['tail'] = str.slice(dotIdx + 1, braceIdx);
  return retVal;
}

function calc(setup) {
  for (val of genVal(setup)) {
    // stringify and strip val using a handler
    let {
      head,
      tail
    } = handler(val);
    console.log(`Head: ${head} Tail: ${tail}`);
  }
}

function* genVal(setup) {
  let i, iters, valTop, valBottom, valFactor;
  // all passed will be objects so first distract for the object that is an array
  if (Array.isArray(setup)) {
    console.log("\n___________________________________________");
    console.log('array path');
    [i, iters, valTop, valBottom, valFactor] = setup;
  } else { // is going to be an object, for sure
    console.log("\n___________________________________________");
    console.log('object path');
    ({i, iters, valTop, valBottom, valFactor} = setup);
  }

  for (i; i <= iters; i++) {
    console.log(i);
    console.log(valBottom);
    console.log(valFactor);
    newTail = valBottom + valFactor;
    console.log(newTail);

    if (i !== 1) {
      console.log(valTop + i);
      yield(valTop + i) / valBottom + valFactor;
    } else {
      console.log(valTop);
      yield valTop / valBottom;
    }
  }
}

// Two 'setup' types, one using arrSetup and the other using objSetup
// i, iters, valTop, valBottom, valFactor
arrSetup = [1, 2, 3, (i) => i * .0101];

objSetup = {
  "i": 1,
  "iters": 2,
  "valTop": 22,
  "valBottom": 7,
  "valFactor": (i) => i * .0101,
};

calc(objSetup);
calc(arrSetup);