一维数组,带有父子级关联属性的一维数组转化成嵌套数组,或者转化成树

一维数组,带有父子级关联属性的一维数组转化成嵌套数组,或者转化成树

一、源数组

let a = [
  {
    parentMeasure: null, // 为空则没有父表头
    measure: '指标1'
  },
  {
    parentMeasure: '指标1', // 父表头为指标1
    measure: '指标2'
  },
  {
    parentMeasure: '指标1',
    measure: '指标3'
  },
  {
    parentMeasure: '指标3',
    measure: '指标4'
  },
  {
    parentMeasure: '指标3',
    measure: '指标5'
  },
  {
    parentMeasure: '', // 为空则没有父表头
    measure: '指标6'
  }
]

二、目标嵌套数组(树)

let res = [
  {
    parentMeasure: null,
    measure: '指标1',
    children: [
      { parentMeasure: '指标1', measure: '指标2' },
      {
        parentMeasure: '指标1',
        measure: '指标3',
        children: [
          { parentMeasure: '指标3', measure: '指标4' },
          { parentMeasure: '指标3', measure: '指标5' }
        ]
      }
    ]
  },
  { parentMeasure: '', measure: '指标6' }
]

三、实现

// 找出一级表头
let tree = a.filter(it => !it.parentMeasure)
function convert(arr) {
  arr &&
    arr.forEach(it => {
      let p = it.measure
      let children = a.filter(item => item.parentMeasure === p)
      if (children && children.length > 0) {
        it.children = children
        convert(it.children)
      }
    })
}

convert(tree)
<think>好的,我现在需要向用户解释DOM是什么。用户之前已经询问过DOM型XSS,现在他们想更基础地了解DOM本身。首先,我得确定用户对DOM的了解程度,可能他们刚接触前端开发或安全概念,所以需要用简单易懂的语言,避免技术术语过多。 首先,我应该从DOM的定义开始。DOM代表文档对象模型,是浏览器将网页转换为对象结构的方式,这样JavaScript可以与之交互。可能需要用比喻来解释,比如把网页比作,每个标签是的节点,这样用户更容易理解结构。 接下来,需要说明DOM的作用。为什么需要DOM?因为它允许动态修改页面内容、结构和样式,实现交互效果。比如点击按钮改变文字,都是通过操作DOM完成的。这时候可以举一个简单的例子,比如用JavaScript改变元素的文本内容。 然后,应该解释DOM的结构,比如状结构,包含文档、元素、属性、文本等节点。可能需要画个示意图,但文字描述也要清晰。例如,HTML中的每个标签对应DOM中的一个节点,嵌套关系形成父子节点。 还要提到DOM和HTML的区别。HTML是静态的代码,而DOM是浏览器解析后生成的动态对象,可以被修改。用户可能混淆这两者,需要明确区分。 另外,用户之前问过DOM型XSS,所以可以稍微关联一下,说明DOM操作不当可能导致安全问题,但这里主要介绍DOM本身,安全部分可以简要提及。 需要确保语言口语化,避免过于学术化。检查是否有术语需要进一步解释,比如节点、API等。可能用“构建成的结构”代替“状结构”更易懂。 最后,总结DOM的重要性,在前端开发中的作用,以及为什么理解DOM对编写交互式网页和避免安全问题很关键。可能还要提到开发者工具中的元素检查器就是查看DOM的实时状态,增加实用性。 现在组织这些点,按逻辑顺序排列,确保每个部分自然过渡,并举例说明。检查是否有错误或遗漏,比如是否覆盖了DOM的关键特性,是否用用户能理解的例子,比如动态修改内容。确保回答结构清晰,分点明确,帮助用户逐步理解DOM的概念。</think>### **DOM 详解:网页的“可编程接口”** **一句话理解**: DOM(Document Object Model,文档对象模型)是浏览器将网页转换为**结构化对象**的表示方式,允许开发者用 JavaScript 动态操控页面内容、样式和交互。 --- ### **一、DOM 的本质** #### **1. 网页的“形结构说明书”** - **类比**:将 HTML 代码想象成一本建筑图纸,DOM 就是根据这份图纸在浏览器中“盖房子”后的三维模型。 - **核心作用**:把静态的 HTML 标签(如 `<div>`、`<p>`)转换为浏览器可理解的**对象**,形成状结构(节点)。 #### **2. 动态操控的关键** - **修改能力**:通过 JavaScript 增删改查 DOM 节点,实现页面动态更新(如点击按钮弹出提示、实时刷新数据)。 - **示例**: ```javascript // 点击按钮时修改文字内容 document.getElementById("myButton").onclick = function() { document.getElementById("text").innerHTML = "内容已更新!"; }; ``` --- ### **二、DOM 的结构解析** #### **1. 节点(Node)的类型** | **节点类型** | 示例 | |--------------------|--------------------------| | 文档节点(Document)| 整个网页的入口(根节点) | | 元素节点(Element)| `<div>`, `<p>`, `<a>` | | 属性节点(Attribute)| `href`, `class`, `id` | | 文本节点(Text) | 标签内的纯文字内容 | #### **2. 状层关系** 以简单 HTML 为例: ```html <html> <head> <title>网页标题</title> </head> <body> <h1>你好,DOM!</h1> <p>这是一个段落</p> </body> </html> ``` 对应的 DOM 结构: ``` Document └── html ├── head │ └── title │ └── "网页标题"(文本节点) └── body ├── h1 │ └── "你好,DOM!"(文本节点) └── p └── "这是一个段落"(文本节点) ``` --- ### **三、DOM 与 HTML 的区别** | **对比项** | HTML | DOM | |----------------|-------------------------------|-------------------------------| | **本质** | 静态文本代码 | 动态内存对象模型 | | **修改方式** | 手动编辑文件 | JavaScript 实时操作 | | **实时性** | 刷新页面后生效 | 即时生效(无需刷新) | | **错误处理** | 浏览器自动修正语法错误 | 操作错误直接导致脚本异常 | **示例**: 若 HTML 中写 `<div>未闭合`,浏览器会自动补全为 `<div>未闭合</div>`,但 DOM 操作时若未正确闭合标签,JavaScript 会报错。 --- ### **四、DOM 的核心操作 API** #### **1. 查询元素** ```javascript // 通过 ID 获取 const element = document.getElementById("header"); // 通过 CSS 选择器获取(首个匹配项) const element = document.querySelector(".menu-item"); // 获取所有匹配项 const list = document.querySelectorAll("button"); ``` #### **2. 修改内容与属性** ```javascript // 修改文本内容(自动转义HTML标签,安全) element.textContent = "<strong>新文本</strong>"; // 修改HTML内容(危险!可能引发XSS) element.innerHTML = "<strong>加粗文本</strong>"; // 修改属性 element.setAttribute("href", "https://example.com"); ``` #### **3. 动态增删节点** ```javascript // 创建新元素 const newDiv = document.createElement("div"); newDiv.textContent = "我是新来的!"; // 添加到页面末尾 document.body.appendChild(newDiv); // 删除节点 const oldElement = document.getElementById("old"); oldElement.parentNode.removeChild(oldElement); ``` --- ### **五、DOM 的重要性** 1. **交互基石**:所有网页动态效果(如表单验证、动画、数据加载)都依赖 DOM 操作。 2. **跨平台兼容**:不同浏览器根据统一 DOM 标准渲染页面,确保一致性(尽管实现细节可能有差异)。 3. **开发者工具依赖**:浏览器调试工具中的“元素检查器”实际是查看 DOM 的实时状态,而非原始 HTML。 --- ### **六、生活化类比** - **HTML** 像乐高积木的说明书(静态步骤)。 - **DOM** 是按说明书拼好的乐高模型,你可以随时拆掉一块积木(删除节点)、换个颜色(修改样式)或加个新部件(插入节点)。 - **JavaScript** 就是你的双手,通过 DOM 操作“改造”这个模型。 理解 DOM,就掌握了网页动态交互的“遥控器”! 🎮
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值