将参数传递给 map()答案

【问题标题】：Passing arguments into map()将参数传递给 map()
【发布时间】：2018-11-05 03:46:21
【问题描述】：

我正在尝试在 Array.from () 上使用内置的 map() 函数，该函数使用 Puppeteer 返回一些元素。

下面是代码：

let res = await page.evaluate(elementPath => {
  return Array.from(document.querySelectorAll(elementPath), (cin, index) => {
    return {
      cs: `state is ${this.s}`, // returns state is undefined
      cinemaIndex: index,
      cinemaId: cin.getAttribute('data-id'),
      cinemaName: cin.getAttribute('data-name'),
      cinemaURL: cin.getAttribute('data-url'),
    };
  }, {
    s: 'NSW'
  });
}, `div[data-state=${cinemaState}] div.top-select-option a.eccheckbox`, cinemaState);

我无法使用变量 s 或 cinemaState 分配 cs。

想知道你有没有解决办法

【问题讨论】：

标签： javascript node.js google-chrome-devtools puppeteer headless-browser

【解决方案1】：

[1,2,3,4].map(function(num, index,wholeArray){
    console.log(num,index,wholeArray,this.s);
},{s:"nsw"})

maps 接受两个参数 callback 和 thisArg 无论你在第二个参数传递什么都可以访问 bi this

【讨论】：

【解决方案2】：

您可以使用以下方法将s 分配给return 语句中的cinemaState 属性：

cinemaState: this.s,

另外，Array.from() 有一个内置的map 函数，因此您应该从Array.from() 中调用map 函数以避免中间数组：

Array.from(arrayLike, mapFn);     // good
Array.from(arrayLike).map(mapFn); // bad

最后，您可能希望在模板文字选择器字符串中的属性选择器中使用 cinemaState 周围的引号：

[data-state="${cinemaState}"] // good
[data-state=${cinemaState}]   // bad

您的最终代码应如下所示：

let res = await page.evaluate(elementPath => {
  return Array.from(document.querySelectorAll(elementPath), (cin, index) => {
    return {
      cinemaState: this.s,
      cinemaIndex: index,
      cinemaId: cin.getAttribute('data-id'),
      cinemaName: cin.getAttribute('data-name'),
      cinemaURL: cin.getAttribute('data-url'),
    };
  }, {
    s: 'NSW'
  });
}, `div[data-state=${cinemaState}] div.top-select-option a.eccheckbox`, cinemaState);

【讨论】：

这仅适用于单行使用 lamda 语法
@grant-miller，不确定我遗漏了什么。我将用我当前的代码更新原始问题。基本上cs: state 是 ${this.s}, // returns state is undefined

【解决方案3】：

我能够解释这一点。这对我有用。我不得不将箭头函数替换为传统函数

let res = await page.evaluate(elementPath => {
  return Array.from(document.querySelectorAll(elementPath), function (cin, index) // changed from (cin, index) => 
{
    return {
      cs: `state is ${this.s}`, // returns state is undefined
      cinemaIndex: index,
      cinemaId: cin.getAttribute('data-id'),
      cinemaName: cin.getAttribute('data-name'),
      cinemaURL: cin.getAttribute('data-url'),
    };
  }, {
    s: 'NSW'
  });
}, `div[data-state=${cinemaState}] div.top-select-option a.eccheckbox`, cinemaState);

【讨论】：