groups[nodes[i].pid].push(nodes[i]);
if
(treeRootPid && treeRootPid === nodes[i].id) {
//
发现传入的根节点id作为节点id时，将根节点设置为该节点的父节点
treeRootPid = nodes[i].pid;
var
rootNodes = groups[treeRootPid];
groups[treeRootPid] =
null
;
//
[SAFEGUARD]防止自为父节点或互为父节点（有环图结构）导致的死循环
function
traverseTreeNodeGroup(treeNodeGroup) {
for
(
var
i
in
treeNodeGroup) {
var
node = treeNodeGroup[i];
if
(groups[node.id]) {
node.children = groups[node.id];
groups[node.id] =
null
;
//
[SAFEGUARD]防止自为父节点或互为父节点（有环图结构）导致的死循环
traverseTreeNodeGroup(node.children);
traverseTreeNodeGroup(rootNodes);
return
rootNodes;
//
测试数组
var
nodes = [
{
id
:
'01'
,
pid
:
'0'
},
{
id
:
'02'
,
pid
:
'0'
},
{
id
:
'011'
,
pid
:
'01'
},
{
id
:
'012'
,
pid
:
'01'
},
{
id
:
'021'
,
pid
:
'02'
},
{
id
:
'022'
,
pid
:
'02'
},
{
id
:
'0221'
,
pid
:
'022'
},
{
id
:
'0222'
,
pid
:
'022'
}
//
调用
createTreeData(nodes,
'0'
);
/* 返回如下结构
"id"
:
"01"
,
"pid"
:
"0"
,
"children"
: [
"id"
:
"011"
,
"pid"
:
"01"
"id"
:
"012"
,
"pid"
:
"01"
"id"
:
"02"
,
"pid"
:
"0"
,
"children"
: [
"id"
:
"021"
,
"pid"
:
"02"
"id"
:
"022"
,
"pid"
:
"02"
,
"children"
: [
"id"
:
"0221"
,
"pid"
:
"022"
"id"
:
"0222"
,
"pid"
:
"022"
/* * 传入的数组有id和父节点pid字段，通过它们的关联构造成一棵或多棵树结构 * @param nodes 集合 * @param treeRootId 根节点的id */function createTreeData(nodes, treeRootId) { var groups = {}; // 按父节点将节点分组 for (var i in nodes)
数据结构为
数组
中包含
对象
–树形结构，用Vue组件的写法实现以下的效果：
树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。
html代码
['
id
'=>1,'
pid
'=>0,'name'=>'a'],
['
id
'=>2,'
pid
'=>1,'name'=>'b'],
['
id
'=>3,'
pid
'=>1,'name'=>'c'],
['
id
'=>4,'pi...
找前端工作收到这样一个面试题，考察对Array的运用
当前有一个一维
数组
，
数组
元素是多个
对象
。每个
对象
都有
id
、
pid
属性。
pid
为其父元素的
id
。现在需要实现一个方法，传入一维
数组
，经过处理之返回一个新的
数组
。
数组
中第一层为父级元素，子集包含在父级元素的children属性中。
[{
id
:0,
pid
:0}, {
id
:1,
pid
:0}, {
id
:2,
pid
:1}, {
id
:3,
pid
:2}, {
id
:4,
pid
:3}, {
id
:5,
pid
:4}]
{"
id
": 0,"
pid
PID
包括比例P，积分I，微分D控制器。
使用
PID
控制器，你需要以下6个基本元素：
Error（偏差）：你的期望值与实际值的差值。比如你想要让室内温度变为10度，但开了空调后，温度只有9度，那1度就是偏差。
比例项P：让输出量与输入量成正比。Error越大，output越大，error越小，output越小。P项决
html代码我是引用了一个jq的插件作为样式插件名字为 jOrgChart 具体内容大家可以评论到下方div class="com">
div class="TheEditor">编辑div>
div
id
='jOrgChart'>div>
div>js代码大家把url地址改成你们本地的假数据渲染，
$.ajax({
url: url,
前端可以使用 JavaScript 来实现
树结构
和旁边列表的
生成
。可以使用 DOM 操作来动态创建 HTML 元素，然后将这些元素插入到页面中。
举个例子，假设我们有一个包含
树结构
数据的 JavaScript
对象
，如下所示：
const data = {
name: 'A',
children: [
name: 'B',
children: [
name: 'C',
children: []
name: 'D',
children: []
name: 'E',
children: [
name: 'F',
children: []
我们可以使用递归函数来遍历这个
对象
，并使用 DOM 操作来动态创建 HTML 元素。例如，我们可以使用以下代码来
生成
树结构
：
function createTree(data) {
const container = document.createElement('div')
const title = document.createElement('h3')
title.innerHTML = data.name
container.appendChild(title)
if (data.children.length > 0) {
const childrenContainer = document.createElement('div')
data.children.forEach(child => {
childrenContainer.appendChild(createTree(child))
container.appendChild(childrenContainer)
return container
const tree = createTree(data)
document.body.appendChild(tree)
这段代码会动态创建一个 div 元素，并在其中放置一个 h3 元素，其中的内容是数据
对象
的 name 属性。然后，如果数据
对象
有 children，则会再创建一个 div 元素，并将这个 div 元素放在容器中。最后，将这个 div 元素返回给调
