为什么这个javascript代码返回undefined

why this javascript code return undefined?

本文关键字:返回 undefined 代码 javascript 为什么      更新时间:2023-09-26

var treeDataOld = [
			{id: '1', pId: '', name: 'root1', checked: false},
			{id: '2', pId: '', name: 'root2', checked: false},
			{id: '3', pId: '', name: 'root3', checked: true},
			{id: '4', pId: '1', name: 'child', checked: true},
			{id: '5', pId: '4', name: 'child', checked: false},
			{id: '6', pId: '5', name: 'child', checked: false},
			{id: '7', pId: '6', name: 'child', checked: false},
			{id: '8', pId: '7', name: 'child', checked: true},
			{id: '9', pId: '8', name: 'child', checked: false},
		];
function findRoot(node) {
    var getParentNode = function (node, refArray) {
        var len = refArray.length;
        for (var i = 0; i < len; i++) {
            if (refArray[i].id === node) {
                return refArray[i];
            }
        }
    };
    if (node.pId !== '') {
        findRoot(getParentNode(node.pId, treeDataOld));
    } else { 
        console.log(node);   // I got OBJECT here
        return node;
    }
}
var rootNode = findRoot(treeDataOld[8]);
console.log(rootNode);   // here is UNDEFINED

我想通过给一个父节点来找到根节点。返回之前,我在函数findRoot内的第一个控制台上得到了正确的结果。但是函数之外的控制台会变得不确定。

findRoot()函数在进行第一次递归调用后不会返回任何内容。您想要的是以下内容:

if (node.pId !== '') {
    return findRoot(getParentNode(node.pId, treeDataOld));
}

您正在使用递归调用,但没有返回任何内容,也许这就是原因,请尝试将return放在findRoot(getParentNode(node.pId, treeDataOld));之前,然后再使用此return findRoot(getParentNode(node.pId, treeDataOld));

var treeDataOld = [
			{id: '1', pId: '', name: 'root1', checked: false},
			{id: '2', pId: '', name: 'root2', checked: false},
			{id: '3', pId: '', name: 'root3', checked: true},
			{id: '4', pId: '1', name: 'child', checked: true},
			{id: '5', pId: '4', name: 'child', checked: false},
			{id: '6', pId: '5', name: 'child', checked: false},
			{id: '7', pId: '6', name: 'child', checked: false},
			{id: '8', pId: '7', name: 'child', checked: true},
			{id: '9', pId: '8', name: 'child', checked: false},
		];
		function findRoot(node) {
			var getParentNode = function (node, refArray) {
				var len = refArray.length;
				for (var i = 0; i < len; i++) {
					if (refArray[i].id === node) {
						return refArray[i];
					}
				}
			};
			if (node.pId !== '') {
				return findRoot(getParentNode(node.pId, treeDataOld));
			} else {
				console.log(node);   // I got OBJECT here
				return node;
			}
		}
		var rootNode = findRoot(treeDataOld[8]);
		console.log(rootNode);   // here is UNDEFINED

您的基本问题可以通过从findRoot返回值来解决,正如其他答案所建议的那样。然而,通过将代码简化为:,可以使代码更加易读(并且不易受到诸如遇到的错误的影响)

function findRoot(node) {
  var findParentNode = (id, refArray) => refArray.find(node => node.id === id);
  var pId = node.pId;
  return !pId ? node : findRoot(findParentNode(pId, treeDataOld));
}

现在,经典的递归模式——先检查基本情况,然后再检查递归情况——清晰可见。

我们在这里使用Array#find来考虑基本的查找逻辑,这样它就不会打乱你的算法。如果您没有可用的Array#find,请使用polyfill或编写自己的。

我们还使用箭头函数——如果没有可用的,请使用标准函数表示法重写。

如果您想进一步重构,可以编写一个较低级别的findByProp,根据其属性之一的值来查找特定的数组元素:

function findByProp(array, prop, value) {
  return array.find(elt => elt[prop] === value);
}

现在你可以把它写成

function findRoot(node) {
  var findParentNode = (value, array) => findByProp(array, 'id', value);
  var pId = node.pId;
  return !pId ? node: findRoot(findParentNode(pId, treeDataOld));
}

或者,如果您喜欢单行

function findRoot(node) {
  return !node.pId ? node : findRoot(findByProp(treeDataOld, 'id', node.pId));
}