javascript - 如何编码'DOM方法的ID以在递归中使用'?
问题描述
我在“getObjectById 在递归中使用”中遇到问题。执行功能getObject(data, '11')
---> undefined
。我不知道为什么会这样:undefined
。
在功能getObject(data, '1'~'9')
--->我得到了解决。但是'11' ,'12', '13', '14'
--->undefined
为了解决这个问题,我必须使用forEach
, Array.prototype.apply
,但我无法解决它。
使用filter
--->TypeError: Cannot read property 'filter' of undefined
使用length
--->TypeError: Cannot read property 'length' of undefined
在第一行中,我有问题要解决。在第二行中,我编写了代码来解决这个问题。因为我认为我解释了解决问题的逻辑。但是,在测试用例中,它失败了。
这个问题的解决方法是:
let output = getObjectById(TREE_DATA.items, '1'))
console.log(output) --> { "id": "1", "name": "johnny" }
--in first under line,
let TREE_DATA = {
items: [
{
id: "1",
name: "johnny"
},
{
id: "2",
name: "ingi",
children: [
{
id: "3",
name: "johnson"
},
{
id: "4",
name: "katy"
},
{
id: "5",
name: "steve",
children: [
{
id: "6",
name: "lisa"
},
{
id: "7",
name: "penny",
children: [
{
id: "8",
name: "john"
},
{
id: "9",
name: "hoyong"
}
]
},
{
id: "10"
}
]
},
{
id: "11"
},
{
id: "12"
}
]
},
{
id: "13"
},
{
id: "14"
}
]
};
--in second under line,
function getObject(json, id) {
let test = json.items;
let newA = [];
function getA(a, id) {
a.filter(function(e) {
console.log("this is : ", e);
if (e.id && e.id === id) {
return newA.push(e);
} else if (e.id !== id && e.children) {
return getA(e.children, id);
}
});
}
getA(test, id);
return newA[0];
}
解决方案
因为您的输入数据是递归结构,所以具有递归结构的程序将是最佳匹配。在这种情况下,您有 -
- 节点列表( ) _ _
TREE_DATA.items
- 其中每个节点(对象)可能包含一个
children
属性,它也是一个节点列表
这种递归关系为我们提供了一个独特的机会来了解特殊类型的递归,其中一个函数A调用函数B,该函数又调用函数A,该函数调用B,依此类推……这称为相互递归。
我们从一个只接受一个输入节点的函数开始,恰当地命名为find1
. 它接受单个节点,解构为children
and o
,以及要搜索的 id,id
-
const find1 = ({ children = [], ...o }, id = 0) =>
o.id == id // if the object's id matches the input id,
? o // match found! return the object
: findAll(children, id) // otherwise findAll of the children with the id
接下来很明显我们需要实现findAll
. 它接受一个节点列表,解构为first
and more
,以及一个要搜索的 id,id
-
const findAll = ([ first, ...more ], id = 0) =>
first === undefined // if the list is empty,
? undefined // there's nothing to search! return no match
: find1(first, id) // find1 the first item in the list using the id
|| findAll(more, id) // OR findAll on more using the same id
就是这样!这些函数几乎可以自行编写,不需要额外的变量或步骤。它的行为与我们预期的完全一样——
console.log(findAll(TREE_DATA.items, 1))
// { id: "1", name: "johnny" }
console.log(findAll(TREE_DATA.items, 11))
// { id: "11" }
console.log(findAll(TREE_DATA.items, 99))
// undefined (no match found)
通过运行以下代码段在您自己的浏览器中验证结果 -
const find1 = ({ children = [], ...o }, id = 0) =>
o.id == id
? o
: findAll(children, id)
const findAll = ([ first, ...more ], id = 0) =>
first === undefined
? undefined
: find1(first, id) || findAll(more, id)
const TREE_DATA =
{items:[{id:"1",name:"johnny"},{id:"2",name:"ingi",children:[{id:"3",name:"johnson"},{id:"4",name:"katy"},{id:"5",name:"steve",children:[{id:"6",name:"lisa"},{id:"7",name:"penny",children:[{id:"8",name:"john"},{id:"9",name:"hoyong"}]},{id:"10"}]},{id:"11"},{id:"12"}]},{id:"13"},{id:"14"}]}
console.log(findAll(TREE_DATA.items, 1))
// { id: "1", name: "johnny" }
console.log(findAll(TREE_DATA.items, 11))
// { id: "11" }
console.log(findAll(TREE_DATA.items, 99))
// undefined (no match found)
推荐阅读
- c# - 在场景大纲中运行每个示例后如何存储 ID?
- vue.js - 如何在类星体表中制作行跨度
- cefsharp - CefSharp 拼写检查器无法在某些 PC 上运行
- rpa - 目标方法、记录器、向导和对象存储库有什么作用?
- php - 即使填写了表格,也会抛出错误?
- php - 如何使用 laravel 数据表将参数传递给控制器?
- docker - 如何让 Jenkins 代理从 Artifactory 中提取其 Docker 映像?
- javascript - 来自 json 文件的图像未显示在网站上
- linux - Xinput 为我生成随机事件
- android - 小吃吧从右到左(自定义snackBar) Kotlin