函数的意外结果

Question

我正在尝试调试以下两段代码。

function getSectionId(target){
  let element = target;
  if(element.hasAttribute('id')){
    console.log(element.id); 
    return element.id;
  } 
  else {
    getSectionId(element.parentElement);
  }
};

function coverageLimitHandler(event) {
  const target = event.target;
  if (target.getAttribute('data-status') !== 'set') {
    let itemBlock = addLineItem();
    let sectionId = getSectionId(target);
    let attribute = '';
    console.log(sectionId);
  }
}

事件触发并且函数运行，但上面给出了意想不到的结果

//第一个覆盖部分（这是预期的。） //未定义（这应该是相同的，但不是。）

而且我一辈子都弄不明白为什么会这样。

Answer 1

问题是您的递归调用没有 returning 任何东西。当你这样做时：

getSectionId(element.parentElement);

它将调用该函数，也许有一天，上面的 if

if(element.hasAttribute('id')){
    console.log(element.id); 
    return element.id;
  }

会 return 一些东西，但是不会 returned 到以前的调用，因此你的主调用不会有任何东西到 return，所以要解决这个你需要这样做：

function getSectionId(target){
  let element = target;
  if(element.hasAttribute('id')){
    console.log(element.id); 
    return element.id;
  } 
  else {
    // add this return and your function will work correctly.
    return getSectionId(element.parentElement);
  }
};

基本上你有这样的东西：

function recursiveNotWorking(n) {
  if (n === 5) {
    return "something"
  } else {
    // you dont return anything, then something never bubbles up
    recursiveNotWorking(n + 1);
  }
}

function recursiveWorking(n) {
  if (n === 5) {
    return "something"
  } else {
    // we return something
    return recursiveWorking(n + 1);
  }
}

console.log("NW: ", recursiveNotWorking(1));
console.log("Working: ", recursiveWorking(1));

Answer 2

您在第一个函数中没有 return，并且您没有检查 undefined。此外，您不需要使用 element 变量。没用的。也许这会奏效：

function getSectionId(target){
  if (typeof target === 'undefined') return null;
  if(target.hasAttribute('id')){
    console.log(target.id); 
    return target.id;
  } 
  return getSectionId(target.parentElement);
}

Answer 3

您需要return递归调用的结果：

const getSectionId = target => {
  if (target.hasAttribute('id') {
    return target.id;
  }

  // You should also check that parentElement exist
  // Otherwise you might reach the root node and then parentElement could become null

  return getSectionId(target.parentElement);
};

Alos，这可以像一个衬里一样重写：

const getSectionId = t => t.id || getSectionId(t.parentElement)

函数的意外结果

Unexpected results from a function

javascript

function

return-value