练习四、把数组扁平；获取页面所用标签,并去重

最新推荐文章于 2025-04-11 19:11:11 发布

akatsuki七

最新推荐文章于 2025-04-11 19:11:11 发布

阅读量119

点赞数

分类专栏：个人练习文章标签： javascript elementui 前端算法

本文链接：https://blog.youkuaiyun.com/Ak47a7/article/details/129719265

版权

个人练习专栏收录该内容

10 篇文章

订阅专栏

文章展示了如何使用JavaScript处理多层嵌套数组的扁平化操作，通过检查元素是否为数组并使用splice方法插入和删除元素。同时，文章探讨了获取HTML页面中所有不同标签的方法，包括使用getElementsByTagName和querySelector，以及数组去重的技巧。还涉及了递归函数在处理节点树中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能描述：

题目一：将多层嵌套数组降低层级，比如[ 1, 2, [3, 0,[4, [5]]],10,[200,3] ]扁平到[ 1, 2, 3, 0, 4, 5, 10, 200, 3]

题目二：获取页面所用标签，比如应含有html多种标签(并且去重)

主要考点：

题目一：判断是否为数组的方法，数组某个下标的元素删除与插入

题目二：①数组的去重判断（indexOf函数使用）。

②获取元素标签的方法（document.getElementsByTagName（）与.querySelector）。

③函数递归使用方法

使用框架或语言：elementui ，js

相关代码

<template>
  <div class="stylebg">
    2/22
    <div>
      <span>题目1：将多层嵌套数组降低层级，比如[ 1, 2, [3, 0,[4, [5]]],10,[200,3] ]扁平到[ 1, 2, 3, 0, 4, 5, 10, 200, 3]</span>
    </div>
    <div>
      <span>题目2：获取页面所用标签，比如应含有html多种标签(并且去重)</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      //存放节点2的数组
      nodeArr : []
    }
  },
  mounted(){
    this.count()
    this.search()
  },
  methods:{
    //题目1：将多层嵌套数组降低层级，比如[ 1, 2, [3, 0,[4, [5]]],10,[200,3] ]扁平到[ 1, 2, 3, 0, 4, 5, 10, 200, 3]
    count(){
      var arr = [ 1, 2, [3, 0,[4, [5]]],10,[200,3] ];
      var oArr1 = arr ;

      //1.遍历第一层数组中每个元素是否为数组
      //(陷进：不能使用typeOf进行判断，typeOf只能判断数组,null及对象是一个对象，只能判断string,数字,undefined,真假)
      //方法一，使用array对象中的isArray()函数判断
      console.log('a1',Array.isArray(oArr1))
      //方法二，使用instanceof，原理：判断左边的oArr实例的__proto__(隐式原型)是否属于右边Array的prototype(显示原型)
      console.log('a2',oArr1 instanceof Array)
      //方法三，使用变量.__proto__ === 对象Array.prototype，原型链的顶端是否相同判断
      console.log('a3',oArr1.__proto__ === Array.prototype)
      //方法四，打印该对象的原型链是什么类型判断
      console.log('a4',Object.prototype.toString.call(oArr1))

      for(var count = 0 ; count < oArr1.length ; count++){
        if(oArr1[count].__proto__ === Array.prototype){
          //2.该元素进行提取出来
          //使用.reverse的原因是
          // 例如把[3,4]插入到[0,1,2]的1与2中间，插入的默认下标都为1，而先插入3再插入4，会变成[0,1,4,3,2]
          //所以先把数组倒序再进行插入不会出现[0,1,4,3,2]的情况而是[0,1,3,4,2]的情况
          let getArr = oArr1[count].reverse()
          oArr1.splice(count,1)
          console.log(oArr1,getArr)
          //3.通过遍历进行把提出的数组写入到oArr的相应的位置
          for(var count2 = 0 ; count2 <getArr.length; count2++){
            oArr1.splice(count,0,getArr[count2])
          }
          //外层计数器向前移一位，回到找到数组类型元素的位置重新判断元素是否数组
          count--
        }
      }
      console.log('完成的数组为',oArr1)
    },

    // 题目2：获取页面所用标签，比如应含有<html><head><meta><style><body>等标签（并且去重）
    search(){

      //解法一（document.getElementsByTagName（））
      //使用document.getElementsByTagName('*')，*代表获取该页面的所有元素
      var view = document.getElementsByTagName('*')
      // console.log('view的类型',Object.prototype.toString.call(view))

        //循环写法一 for
        let checkArr1 = []
        for(var count = 0 ; count<view.length ; count++){
          //判断数组checckArr1里面是否含有view[count]的html元素名称，数组.indexOf(元素名) == -1是不存在，0是存在
          if(checkArr1.indexOf(view[count].nodeName) == -1){
            checkArr1.push(view[count].nodeName)
          }
        }
        console.log('得到的该页面的所有标签是',checkArr1)

        //循环写法二 forEach
        // let checkArr2 = []
        // view.forEach( el => {
        //   if(checkArr2.indexOf(el.nodeName) == -1){
        //     checkArr2.push(el.nodeName)
        //   }
        // })
        // console.log('得到的该页面的所有标签是',checkArr2)



      //解法二 .querySelector与node.children的递归遍历node节点
      //1. 使用选择器.querySelector选择html标签下所有的节点(包括本身html的节点)
      var view2 = document.querySelector('html')
      //2.把父节点的标签保存进nodeArr数组中
      this.nodeArr.push(view2.nodeName)
      //3.调用countNode()函数开始计算父节点以下的node节点中的html
      this.countNode(view2.children)

      // if(view2.children)
      console.log(view2,this.nodeArr)
    },

    //遍历子节点的html
    countNode(node){
      for(var count = 0 ; count<node.length ; count++){
        //检查改定位的节点下是否含有子节点
        if(node[count].children.length !=0){
          //有即node[count].children.length == -1 ,保存子节点，并调用countNode()函数并往下继续寻找改节点下的孙节点
          if(this.nodeArr.indexOf(node[count].nodeName) == -1){
            this.nodeArr.push(node[count].nodeName)
          }
          this.countNode(node[count].children)
        }else{
          //没有即node[count].children.length == 0 ,保存子节点
          if(this.nodeArr.indexOf(node[count].nodeName) == -1){
            this.nodeArr.push(node[count].nodeName)
          }
        }
      }
    }

  }
}
</script>

<style scoped>

</style>

运行截图