js实现嵌套数组重排序

 更新时间:2022年01月25日 12:15:12   作者:大白莎  
这篇文章主要为大家详细介绍了js实现嵌套数组重排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现嵌套数组重排序的具体代码,供大家参考,具体内容如下

总共遇到两个问题:

1、JS中for循环输出同一变量值的问题

js事件处理器在线程空闲事件不会运行,导致最后运行的时候输出的都是i最后的值。

解决方法:在循环中声明  this.content1 = {}

2、排序算法在序号到10以后出错

解决方法:没注意string和int,原数据为string

原数据:

目标:将table、text、image合并到一个content里面,并按blockNO排序

代码:

<script>
export default {
  data() {
    return {
      data: [],
      content1: {}
    }
  },
  created() {
    this.test()
  },
  methods: {
    async test() {
      const { data: res } = await this.$http.get('test1')
      for (let i = 0; i < res.length; i++) {
        this.data1 = {}
        this.data1.name = res[i].name
        this.data1.blockNO = res[i].blockNO
        this.data1.class = res[i].class
        this.data1.id = res[i].id
        this.data1.children = []
        this.data1.content = []
 
        if (res[i].text) {
          for (let j = 0; j < res[i].text.length; j++) {
            this.content1 = {}
            this.content1.blockNO = res[i].text[j].blockNO
            this.content1.type = 'text'
            this.content1.detail = res[i].text[j].text
            this.data1.content.push(this.content1)
          }
        }
        if (res[i].table) {
          for (let j = 0; j < res[i].table.length; j++) {
            this.content1 = {}
            this.content1.blockNO = res[i].table[j].blockNO
            this.content1.type = 'table'
            this.content1.detail = res[i].table[j].table
            this.data1.content.push(this.content1)
          }
        }
        if (res[i].image) {
          for (let j = 0; j < res[i].image.length; j++) {
            this.content1 = {}
            this.content1.blockNO = res[i].image[j].blockNO
            this.content1.type = 'image'
            this.content1.detail = res[i].image[j].image
            this.data1.content.push(this.content1)
          }
        }
        for (let j = 1; j < this.data1.content.length; j++) {
          for (let i = 0; i < this.data1.content.length - j; i++) {
            if (
              parseInt(this.data1.content[i].blockNO) >
              parseInt(this.data1.content[i + 1].blockNO)
            ) {
              let tempnum = this.data1.content[i + 1]
              this.data1.content[i + 1] = this.data1.content[i]
              this.data1.content[i] = tempnum
            }
          }
        }
        this.data.push(this.data1)
      }
      console.log(this.data)
    }
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS实现跟随鼠标立体翻转图片的方法

    JS实现跟随鼠标立体翻转图片的方法

    这篇文章主要介绍了JS实现跟随鼠标立体翻转图片的方法,涉及javascript操作图片翻转的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 一个简单的JS鼠标悬停特效具体方法

    一个简单的JS鼠标悬停特效具体方法

    这个特效最终实现效果就是当鼠标移动到链接上,文字会横向移动一定距离,貌似总有人喜欢这些花花草草。添加此效果方法很简单。
    2013-06-06
  • JavaScript的事件绑定(方便不支持js的时候)

    JavaScript的事件绑定(方便不支持js的时候)

    看了JavaScript DOM 编程艺术的Best Practices那章,才知道我们在制作网页的时候有很多东西需要考虑
    2013-10-10
  • Bootstrap table两种分页示例

    Bootstrap table两种分页示例

    这篇文章主要为大家详细介绍了Bootstrap table两种分页示例,服务器端分页和客户端分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript中push(),join() 函数 实例详解

    JavaScript中push(),join() 函数 实例详解

    本文通过实例给大家介绍了JavaScript中push(),join() 的知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • JavaScript异步编程Promise模式的6个特性

    JavaScript异步编程Promise模式的6个特性

    Promise说起来是一个非常简单的概念,即使你没有机会去使用它,很有可能你也了解过它。Promise是一个非常有价值的构造器,能够帮助你避免使用镶套匿名方法,而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性,希望对大家有帮助
    2014-04-04
  • JavaScript实现简易轮播图最全代码解析(ES5)

    JavaScript实现简易轮播图最全代码解析(ES5)

    这篇文章主要为大家详细介绍了JavaScript实现简易轮播图最全代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript弹窗基础篇

    JavaScript弹窗基础篇

    这篇文章主要介绍了JavaScript弹窗基础篇的相关资料,需要的朋友可以参考下
    2016-04-04
  • JS获取字符串实际长度(包含汉字)的简单方法

    JS获取字符串实际长度(包含汉字)的简单方法

    下面小编就为大家带来一篇JS获取字符串实际长度(包含汉字)的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论