首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何根据页面标签自动生成文章目录?分析+代码详解

而且用简单的JavaScript就可以实现。...右侧:页面DOM内容] 为了实现这样的效果;首先,我们要在页面加载后,遍历文章: 如果你使用原生JavaScript,并没有使用任何框架,或者是JQ,那么就写在前即可。...遍历文章,很简单,我们使用childNodes方法和foreach循坏即可。 childNodes 属性返回节点的子节点集合,以 NodeList 对象。 实操演示如下。...遍历文章 原生JavaScript 单层包括,也就是需要生成目录的文章,外层有一个或其他双标签进行嵌套,如: [只有一个div双标签进行嵌套] 这个时候我们在根标签加上一个ID即可...首先在循坏遍历的外侧,添加一个数组,如果页面元素标签,在这个数组范围内,就提取到标签集合并生成一个对象丢到titles内: // 哈哈,三级目录差不多了吧。

5.3K91
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    力扣 (LeetCode)-合并两个有序链表,删除排序数组中的重复项,JavaScript笔记

    文章公众号首发,关注 程序员哆啦A梦 第一时间获取最新的文章 ❤️笔芯❤️~ 21. 合并两个有序链表 一、题目描述 将两个升序链表合并为一个新的 升序 链表并返回。...删除排序数组中的重复项 一、题目描述 给定一个排序数组,你需要在 原地 删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度。...你不需要考虑数组中超出新长度后面的元素。 说明: 为什么返回数值是整数,但输出的答案是数组呢? 请注意,输入数组是以「引用」方式传递的,这意味着在函数里修改输入数组对于调用者是可见的。...// 根据你的函数返回的长度, 它会打印出数组中该长度范围内的所有元素。...,则两个指针都向前走一步,当快指针走完整个数组后,慢指针当前的坐标加1,就是数组中不同数字的个数。

    1.7K10

    JavaScript性能优化怎么实现?12种优化方式你知道嘛

    建议将多个DOM操作合并为一个操作,或者使用DocumentFragment来批量插入DOM元素。...尽量避免在循环中修改样式属性或获取布局信息。如果需要对多个样式进行修改,可以使用CSS的class切换。...可以将多个脚本或样式表合并为单个文件,使用CSS Sprites技术来减少图片请求,使用CDN加速等。 这些是一些常见的JavaScript性能优化技巧和实践。..., curr) => acc + curr, 0); console.log(sum); // 输出15 压缩和合并JavaScript文件: 利用压缩工具(如UglifyJS)对JavaScript...此外,将多个JavaScript文件合并成一个文件可以减少HTTP请求次数。 使用Web Workers: 使用Web Workers可以将大量计算或耗时操作转移到后台线程中进行,避免阻塞主线程。

    73810

    如何在JavaScript中使用for循环

    我们将看看for...in循环语句是如何在JavaScript中使用的,它的语法,它如何工作的例子,何时使用它或避免它,以及我们可以使用哪些其他类型的循环来代替。...Java" 在循环中,我们呈现每个数组元素的索引和值。...for循环的替代方案 forEach在JavaScript中是数组原型的一个方法,它允许我们在回调函数中遍历数组的元素和它们的索引。...「回调函数」是你传递给另一个方法或函数的函数,作为该方法或函数执行的一部分而被执行。当涉及到JavaScript中的forEach时,它意味着回调函数将在每个迭代中执行,接收迭代中的当前项作为参数。...举例来说,下面的语句使用forEach迭代arr变量,并在console中打印value: arr.forEach((value) => console.log(value)); 你也可以访问数组的索引

    5.1K10

    【ES】199-深入理解es6块级作用域的使用

    一.var 声明与变量提升机制 在JavaScript中使用var定义一个变量,无论是定义在全局作用域函数函数的局部作用域中,都会被提升到其作用域的顶部,这也是JavaScript定义变量的一个令人困惑的地方...如下: for(let i = 0;i < 100;i++){ //执行某些操作 } //报错 console.log(i); 6.循环中的创建函数 在使用var声明变量的循环中,创建一个函数非常的困难...由于函数有自己的作用域,因此在向数组中添加函数的时候,实际上循环已经运行完成,因此每次打印变量i的值都相当于是在全局中访问变量i的值,即i = 5这个值,因此实际上答案最终会返回5次5....for-of循环是es6的新增的循坏。。 7.全局作用域绑定 let,const声明与var声明还有一个区别就是三者在全局作用域中的行为。...如下例: let Array = '这是数组'; console.log(Array);//'这是数组‘; console.log(window.Array);//应该返回创建数组的构造函数,即f Array

    3.7K10

    List 集合安全操作指南:避免 ConcurrentModificationException 与提升性能

    然而,随着代码逻辑变得复杂,特别是在进行元素的删除或添加操作时,问题可能会悄然浮现。 常见的编程错误之一是在 foreach 循环中直接对集合进行修改(如 remove 或 add 操作)。...本篇文章将从三个方面详细探讨如何高效、安全地进行集合操作:如何避免在 foreach 循环中修改集合,如何使用 Iterator 进行安全的删除操作,以及如何在多线程环境下加锁保护迭代器。...二、避免在 foreach 循环中进行元素的 remove/add 操作 1.1 foreach 循环与集合修改 foreach 循环在 Java 中实际上是基于 Iterator 的,它会隐式地获取集合的...虽然编译器会为 foreach 循环自动生成 Iterator,但是如果你在循环过程中修改集合的结构(如调用 remove() 或 add()),这会触发 ConcurrentModificationException...(System.out::println); } } 六、总结与最佳实践 在 Java 编程中,避免在 foreach 循环中进行集合修改是非常重要的,因为这样可能导致不可预期的错误。

    12810

    使用forEach处理数组时,这4个问题你需要关注下

    :for循环 如果你需要在循环中中断或跳过某个迭代,forEach并不是最好的选择。...三、 无法安全地修改数组 修改数组的问题 虽然在forEach循环中修改数组的元素是允许的,但这种做法通常被认为是不好的实践。...更好的选择:传统循环 如果需要在循环中安全地修改数组,最好使用传统的for循环或其他适当的方法: const soliders = ["John", "Daniel", "Cole", "Adam"];...四、异常处理问题 与经典的循环结构如for和while不同,forEach没有内置的异常处理机制。...希望这篇文章能帮助你更好地理解JavaScript forEach的局限性,并在今后的编码中做出更明智的选择。如果你在使用JavaScript的过程中有任何问题或心得,欢迎在评论区与我们分享。

    13110

    JS循环中使用async、await的正确姿势

    概览(循环方式 - 常用) for map forEach filter 声明遍历的数组和异步方法 声明一个数组:⬇️ const skills = ['js', 'vue', 'node',...const res = await getSkillPromise(skill) console.log(res) } } test() // 调用 当使用await时,希望JavaScript...上述结果意味着for循环中有异步代码,是可以等到for循环中异步代码完全跑完之后再执行for循环后面的代码。 但是他不能处理回调的循环,如forEach、map、filter等,下面具体分析。...map 中使用 在map中使用await, map 的返回值始是promise数组,这是因为异步函数总是返回promise。...循环等待异步结果返回之前就执行了console.log('end') 'Start' 'End' 'js' 'vue' 'node' 'react' JavaScript 中的 forEach不支持

    3.9K40

    分享近百道JavaScript 基础面试题,帮助你巩固JavaScript 基础知识

    你可以使用 for 循环、forEach()、map()、filter()、reduce() 和其他数组方法遍历数组。 13. 你如何处理 JavaScript 中的错误?...JavaScript 中 push() 方法的用途是什么? push() 方法将一个或多个元素添加到数组的末尾并返回数组的新长度。 48. 在 JavaScript 中如何检查变量是否属于特定类型?...concat() 方法用于合并两个或多个数组,创建一个包含连接元素的新数组。 69. 如何在 JavaScript 中对数组进行排序? 可以使用 sort() 方法按字母顺序或数字顺序对数组进行排序。...同步代码按顺序执行,阻塞进一步执行,直到当前任务完成,而异步代码允许多个任务并发执行而不会阻塞。 71. 如何在 JavaScript 中将字符串转换为日期对象?...JavaScript 中的 forEach() 方法的用途是什么? forEach() 方法为数组中的每个元素执行一次提供的函数。 73. JavaScript 中如何检查数组中是否存在某个元素?

    34610

    JDK1.9-Stream流

    每当我们需要对集合中的元素进行操作的时候,总是需要进行循环、循环、再循环。这是理所当然的么?不是。循 环是做事情的方式,而不是目的。另一方面,使用线性循环就意味着只能遍历一次。...备注:本小节之外的更多方法,请自行参考API文档。 逐一处理:forEach 虽然方法名字叫 forEach ,但是与for循环中的“for-each”昵称不同。...基本使用 Stream流中的 filter 方法基本使用的代码如: ? 在这里通过Lambda表达式来指定了筛选的条件:必须姓张。...基本使用 Stream流中的 map 方法基本使用的代码如: ?...将两个队伍合并为一个队伍;存储到一个新集合中。 根据姓名创建 Person 对象;存储到一个新集合中。 打印整个队伍的Person对象信息。 两个队伍(集合)的代码如下: ?

    1.6K20

    【JS】974- JavaScript 中哪一种循环最快呢?

    无论是 JavaScript 框架(如 Node.js、React、Angular、Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础。我们来谈谈现代 JavaScript 吧。...而 forEach 是 Array 原型的一个方法,与普通的 for 循环相比,forEach 和 for…of 需要花费更多的时间进行数组迭代。...(译者注:但值得注意的是,for…of 和 forEach 都从对象中获取了数据,而原型并没有,因此没有可比性。) 循环的类型,以及我们应该在何处使用它们 1....2. forEach 这个方法需要接受一个回调函数作为输入参数,遍历数组的每一个元素,并执行我们的回调函数(以元素本身和它的索引(可选参数)作为参数赋予给回调函数)。...JavaScript 的短路运算符,即不能在每一次循环中跳过或结束循环。

    1.6K20

    JS中3种风格的For循环有什么异同?

    那么,在经典的for循环中如何处理异步代码呢?如何保证不掉进异步陷阱里呢?...不管怎样,先撇开哲学上的争论不谈,.foreach方法是for循环的另一个版本,但是这个方法是数组对象的一部分,它的目的是接收一个函数和一个额外的可选参数,以便在执行函数时重新定义该函数的上下文。...对于数组中的每个元素,我们的函数都将被执行,并且它将收到三个参数(是的,就是三个,而不是一个,因为您已经习惯了使用它)。它们分别是: 正在处理的当前元素。...但是你可以看到我们如何在函数中很容易地使用所有属性。...JavaScript中关于循环的全部内容,我希望现在您对它们有了更清晰的理解,并且可以根据这些知识和我们当前的实际需求来选择您喜欢的循环。

    2K20

    PHP 性能优化技巧

    优化方法:避免在循环中执行复杂操作:在循环中尽量避免调用复杂的函数和进行频繁的数据库操作。可以提前计算好需要的数据,减少每次循环的计算量。...使用更高效的循环结构:尽量使用 foreach 替代 for,因为 foreach 在 PHP 中通常比 for 更高效,尤其是在处理数组时。...// 通过关联数组来避免频繁的查找操作$users = ['john' => 'John Doe', 'jane' => 'Jane Smith'];echo $users['john']; // 查找速度非常快合并数组时使用...array_merge() 的替代方案:PHP 中的 array_merge() 会对数组进行复制操作,若需要合并大量数组,使用 array_merge 会造成额外的内存消耗。..., [$id]);使用索引:确保在数据库表中对常用查询字段(如 WHERE 条件中的字段)建立索引,可以大幅度提高查询性能。

    11400

    如何让前端项目代码变得简洁优雅?

    在日常开发中,难免会见到一些不太好的代码,看的人脑壳疼。...可选链运算符、空值合并运算符这两个都非常好用,感兴趣的话,可以看看MDN官方文档: 可选链运算符(?.) - JavaScript | MDN 空值合并运算符(??)...- JavaScript | MDN 数组的遍历 在前端开发中,遍历数组和对象是常见操作。使用更简洁高效的遍历方法,可以提高代码的可读性和性能。...> processItem(item)); 使用forEach方法后,代码变得更加简洁,同时避免了传统for循环中的索引管理问题。...这个相信很多前端都会,但是需要注意,forEach有可能会改变原数组。如果想要不改变原数组,获得新的数组,可以选中map方法。

    19020

    c#使用自定义的比较器和循环遍历去重

    本文将详细介绍如何在C#中实现自定义比较器,以及如何使用循环遍历进行高效的数据操作。...这个接口通常用于字典类型的集合,如Dictionary和HashSet。...循环遍历的基本概念循环遍历是操作集合的基本方法,它允许我们逐个处理集合中的每个元素。C#提供了多种循环结构,如for循环、foreach循环和while循环。...for循环for循环提供了更多的控制,允许我们在循环中使用索引访问集合中的元素。for循环通常用于数组或列表。while循环while循环是最通用的循环结构,它允许我们在循环中进行更复杂的逻辑判断。...这些示例展示了循环遍历在数据操作中的应用。性能考量在实现自定义比较器和循环遍历时,性能是一个需要考虑的因素。以下是一些性能建议:避免在循环中使用复杂的逻辑:在循环中使用复杂的逻辑可能会导致性能下降。

    2.3K00
    领券