JavaScript之使用递归遍历树形结构数据、搜索、查询、查找、全值、find、instanceof

JavaScript之使用递归遍历树形结构数据、搜索、查询、查找、全值、find、instanceof

MENU

• 数据
• 实现方式一
• 实现方式二
• 函数执行
• instanceof
• find

数据

let treeData = [{id: 1,aname: '邓稼先',value: '核物理学家',age: 1924,children: [{id: 11,aname: '袁隆平',value: '杂交水稻育种专家',age: 1930,children: []}]
}, 	
{id: 2,aname: '钱学森',value: '空气动力学家',age: 1991,children: [{id: 22,aname: '李四光',value: '地质学家',age: 1889,children: [{id: 222,aname: '于敏',value: '核物理学家',age: 1926,children: []}]}]
}, 
{id: 3,aname: '华罗庚',value: '数学家',age: 1910,children: [{id: 33,aname: '钱三强',value: '核物理学家',age: 1913,children: []}]
}];

实现方式一

function tree(data, id) {for (let i = 0; i < data.length; i++) {let item = data[i];if (item.id === id) {return item;} else {// item.children 不等于 undefined && item.children.length 大于 0 时if (item.children && item.children.length > 0) {let res = tree(item.children, id);// 当 res = undefined 时不会进入判断中// 也就是不会returnif (res) return res;}}}
};

实现方式二

function findItemById(list, id) {// 每次进来使用find遍历一次let res = list.find((item) => item.id == id);if (res) {return res;} else {for (let i = 0; i < list.length; i++) {if (list[i].children instanceof Array && list[i].children.length > 0) {res = findItemById(list[i].children, id);if (res) return res;}}return null;}
};

函数执行

方式一

console.log("查询结果:", tree(treeData, 11));
// 查询结果: {id: 11, aname: "袁隆平", value: "杂交水稻育种专家", age: 1930}
console.log("查询结果:", tree(treeData, 33));
// 查询结果: {id: 33, aname: "钱三强", value: "核物理学家", age: 1913, children: Array(0)}
console.log("查询结果:", tree(treeData, 3));
// 查询结果: {id: 3, aname: "华罗庚", value: "数学家", age: 1910, children: Array(1)}

方式二

console.log(findItemById(treeData, 33));
// {id: 33, aname: "钱三强", value: "核物理学家", age: 1913, children: Array(0)}
console.log(findItemById(treeData, 1));
// {id: 1, aname: "邓稼先", value: "核物理学家", age: 1924, children: Array(1)}
console.log(findItemById(treeData, 222));
// {id: 222, aname: "于敏", value: "核物理学家", age: 1926, children: Array(0)}

instanceof

instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

find

w3school

find方法返回数组中第一个通过测试的元素的值(作为函数提供)。
find方法对数组中存在的每个元素执行一次函数：
如果找到函数返回true值的数组元素，则find返回该数组元素的值(并且不检查剩余值)
否则返回undefined
find不对空数组执行该函数。
find不会改变原始数组。

MDN

find方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。
如果需要在数组中找到对应元素的索引，请使用findIndex。
如果需要查找某个值的索引，请使用Array.prototype.indexOf。它类似于findIndex，但只是检查每个元素是否与值相等，而不是使用测试函数。
如果需要查找数组中是否存在某个值，请使用Array.prototype.includes。同样，它检查每个元素是否与值相等，而不是使用测试函数。
如果需要查找是否有元素满足所提供的测试函数，请使用Array.prototype.some。