获取 Array.forEach 函数的返回值

Getting return value for Array.forEach function

本文关键字:返回值 函数 forEach Array 获取      更新时间:2023-09-26

我被下面的函数卡住了,试图找回一个值(dom树的一部分)。

我没有收到有用的值,我只是获得了一个0/undefined.

var findNodeForAttributeValue = function (node, innerXmlAttributeName, innerXmlAttributeValue) {
var indirectReturnVar='0';
if ((node.nodeType === 1)&&(node.hasAttribute(innerXmlAttributeName))) {
    if (node.getAttribute(innerXmlAttributeName)==innerXmlAttributeValue) {
        indirectReturnVar=node;
        return indirectReturnVar;
    }
}
if((node.hasChildNodes())&&(node.firstChild!=null)) {
    Array.forEach ( node.childNodes, function (children) {
        findNodeForAttributeValue(children, innerXmlAttributeName, innerXmlAttributeValue);
    } );
    return indirectReturnVar;
}

Edit

更新的代码:

var findNodeForAttributeValue = function (node, innerXmlAttributeName, innerXmlAttributeValue) {
  var indirectReturnVar='0';
  if ((node.nodeType === 1) && (node.hasAttribute(innerXmlAttributeName))) {
    if (node.getAttribute(innerXmlAttributeName) == innerXmlAttributeValue) {
      indirectReturnVar = node;
      return indirectReturnVar;
    }
  }
  if ((node.hasChildNodes()) && (node.firstChild != null)) {
    for (var fi=0, fiLen=node.childNodes.length; fi<fiLen; fi++) {
      findNodeForAttributeValue(node.childNodes[fi], innerXmlAttributeName, innerXmlAttributeValue);
    }
    return indirectReturnVar;
  }
}

当你这样做时:

> Array.forEach ( node.childNodes .. )

forEachArray.prototype 上的 Array 实例方法。 childNodes属性是一个NodeList,它不是一个数组。

在某些支持 ES5 的浏览器中,您可以执行以下操作:

Array.prototype.forEach.call(childNodes, ...)

但这不能保证有效(并且在IE 8及更低版本中会失败)。所以只需使用 for 循环:

for (var i=0, iLen=node.childNodes.length; i<iLen; i++) {
  // do stuff with node.childNodes[i];
}

编辑

要修复更新的代码,请执行以下操作:

function findNodeForAttributeValue (node, innerXmlAttributeName, innerXmlAttributeValue) {
使用

函数声明,我不明白你为什么要使用带有赋值的表达式。此外,较短的变量名称将使生活变得轻松得多,我可能会做这样的事情:

function getNodeByAttributeValue (node, att, value)

如果您希望变量具有真值,只需将其设置为 true。在这种情况下,您希望它为 false,因此要么将其保留为未定义,要么将其设置为 null(因为大多数 DOM 方法如果没有匹配的元素,则返回 null):

  var indirectReturnVar = null;

这块很好。

  if ((node.nodeType === 1) && (node.hasAttribute(innerXmlAttributeName))) {
    if (node.getAttribute(innerXmlAttributeName) == innerXmlAttributeValue) {
      indirectReturnVar = node;
      return indirectReturnVar;
    }
  }
  if ((node.hasChildNodes()) && (node.firstChild != null)) {

此位需要修改。仅在间接返回变量为假时保持循环:

    for (var fi=0, fiLen=node.childNodes.length; fi<fiLen && !indirectReturnVar; fi++) {

将递归函数的返回值分配给 indirectReturnVar,否则它会在以太中丢失。

      indirectReturnVar = findNodeForAttributeValue(node.childNodes[fi], innerXmlAttributeName, innerXmlAttributeValue);

    }
  }

返回递归循环之外的值。它只会循环,直到找到匹配的节点或用完节点。

  return indirectReturnVar;
}

下面find1 采用一个搜索函数f,该函数将为提供的node调用一次,并为节点的每个childNodes调用一次。当f返回true时,node被返回。否则undefined给出信号,表示未找到结果。

const find1 = (f, node, cursor = 0) =>
  node.nodeType === 1 && f (node)
    ? node
  : cursor === node.childNodes.length
    ? undefined
  : find1 (f, node.childNodes[cursor]) || find1 (f, node, cursor + 1)
console.log
  ( find1
      ( node => node.tagName === 'P'
      , document
      )
      // <p>first paragraph</p>
      
  , find1
      ( node => node.textContent === 'and a span'
      , document
      )
      // <span>and a span</span>
      
  , find1
      ( node => node.getAttribute('class') === 'last'
      , document
      )
      // <p class="last">last paragraph</p>
  )
<div id="main">
  <!-- comment -->
  <h1>title</h1>
  <p>first paragraph</p>
  <p>second paragraph <span>and a span</span></p>
  <p class="last">last paragraph</p>
<div>

以上find1不限于按特定属性和值搜索节点。相反,用户提供的 lambda 允许程序员将find1引导到其目标。


如果我们想要查找的所有结果怎么办?下面findAll返回所有匹配结果的数组

const findAll = (f, node) =>
{ const loop = function* (node)
  { if (node.nodeType === 1 && f (node))
      yield node
    for (const child of node.childNodes)
      yield* loop (child)
  }
  return Array.from (loop (node))
}
console.log
  ( findAll
      ( node => node.tagName === 'P'
      , document
      )
      // [ <p>first paragraph</p>
      // , <p>second paragraph<span>...</span></p>
      // , <p class="last">last paragraph</p>
      // ]
      
  , findAll
      ( node => node.getAttribute('class') === 'last'
      , document
      )
      // [ <p class="last">last paragraph</p> ]
  )
<div id="main">
  <!-- comment -->
  <h1>title</h1>
  <p>first paragraph</p>
  <p>second paragraph <span>and a span</span></p>
  <p class="last">last paragraph</p>
<div>


find1findAll这样的高阶函数很棒,因为它们可以以各种有用的方式进行专业化。

const findByTag = (tagName, node) =>
  findAll
    ( node => node.tagName === tagName.toUpperCase()
    , node
    )
const findByAttrValue = (attr, value, node) =>
  findAll
    ( node => node.getAttribute (attr) === value
    , node
    )
console.log
  ( findByTag ('p', document)
    // [ '<p>...</p>', '<p>...</p>', '<p>...</p>' ]
  , findByTag ('h1', document)
    // [ '<h1>title</h1>' ]
  , findByTag ('strong', document)
    // []
  , findByAttrValue ('class', 'last', document)
    // [ <p class="last">last paragraph</p> ]
  , findByAttrValue ('id', 'main', document)
    // [ <div id="main">...</div> ]
  , findByAttrValue ('class', 'first', document)
    // []
  )