数组扁平化

数组扁平化是指将一个多维数组变为一个一维数组
在这里插入图片描述

解决方案:

1.flat()函数
  • 函数提供了将一组数组项串联成一个全新的数组并在函数完成后返回新数组的能力。由于这个函数产生了一个全新的数组,所以一旦函数完成操作后,任何包含在原始数组中的现有的、完全独立的数组都不会被改变。

  • flat(深度) 函数仅采用一个参数即深度,该参数是可选的。如果原始数组包含一个或多个嵌套数组结构,则此参数决定函数将多少数组层压扁为单个层。由于该参数是可选的,所以它的默认值为 1,并且在函数完成时,只有单层数组将被平展到返回的全新数组中。

  • flat()与 flat(1) 相同。意味着原始数组中深度为 1 的任何数组都将被完全展平,以便将其所有内容单独连接到新数组。

负深度

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(-Infinity);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

负深度值对于扁平嵌套数组没有意义,在指定负深度参数值的情况下,将使用 0 作为替代。

零深度

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(0);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

这意味着原始数组中包含的任何数组都不会被展平,并且新数组的单个数组项和嵌套数组的组成与原始数组完全相同。

没有参数

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat();
// array2: [1, 2, 3, 4, [5, 6], [[7, 8]], [[[9, 10]]]]

正深度

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(2);
// array2: [1, 2, 3, 4, 5, 6, [7, 8], [[9, 10]]]

无限深度

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(Infinity);
// array2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  • flat()函数可以移除空项
const arr=[1,[2,[3,[4,5]]],   ,6]
const r1=arr.flat(Infinity)
// r1: [1, 2, 3, 4, 5, 6,]
2.利用正则

但数据类型都会变为字符串

  • JSON.stringify()作用是将json数组转换成字符串
  • replace(/[|]/g,’’)中使用了正则表达式将所有的[ ]一次性替换掉。replace(/被替换对象/g,‘替换对象’)
    匹配 [,使用\ [。
const arr=[1,[2,[3,[4,5]]],6]
const r1=JSON.stringify(arr).replace(/\[|\]/g,'').split(',')
console.log(r1)
3.正则改良版
  • JSON.parse()作用是将字符串转化成json数组
const arr=[1,[2,[3,[4,5]]],6]
const r1=JSON.parse('['+JSON.stringify(arr).replace(/\[|\]/g,'').split(',')+']')
console.log(r1)
//ri:[1,2,3,4,5,6]
4.使用reduce()函数

reduce() 函数会对参数序列中元素进行累积。
reduce(function, iterable[, initializer])
function – 函数,有两个参数
iterable – 可迭代对象
initializer – 可选,初始参数

const arr=[1,[2,[3,[4,5]]],6]
const r1=arr => {
      return arr.reduce(
        (pre,cur)=>{
        //判断是否是数组,是,则返回r1(cur)再次进行判断;否,则直接输出cur
          return pre.concat(Array.isArray(cur)?r1(cur):cur)
        }
      ,[])
    }
const r2=r1(arr)
console.log(r2)
//r2:[1,2,3,4,5,6]
  • Array.isArray() 用于确定传递的值是否是一个 Array。如果值是 Array,则为true; 否则为false。
  • concat() 方法用于连接两个或多个数组。
    该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
5.函数递归
const arr=[1,[2,[3,[4,5]]],6]
const r1=[]
const r2=arr=>{
      for(let i=0;i<arr.length;i++){
        if(Array.isArray(arr[i])){
          r2(arr[i])
        }else{
          r1.push(arr[i])
        }
      }
    }
r2(arr)
console.log(r1)
//r1:[1,2,3,4,5,6]

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue树状数组扁平化是一个操作,用于将树状数组(也称为B树或二叉搜索树)中的数据结构扁平化为线性数据结构。这个操作通常用于数据展示和性能优化。 在Vue树状数组扁平化过程中,需要遍历树状数组,并将每个节点转换为对应的线性数据结构元素。这通常可以通过递归实现。 下面是一个简单的Vue树状数组扁平化的实现步骤: 1. 定义一个数据结构来表示树状数组中的节点。每个节点包含一个数据值和指向其子节点的指针。 2. 定义一个递归函数,用于遍历树状数组并转换每个节点。该函数需要接受当前节点的值和指针,以及一个空列表(用于存储扁平化的结果)。 3. 在函数中,检查当前节点是否有子节点。如果有,递归调用函数自己处理子节点。否则,将当前节点的值添加到结果列表中。 4. 最后,遍历完成后,将结果列表转换为一个普通的数组或其他适当的线性数据结构,并将其传递给Vue组件进行展示。 需要注意的是,Vue树状数组扁平化操作可能会对性能产生一定的影响,特别是在处理大型数据集时。因此,在实现过程中需要考虑性能优化措施,例如使用分页或懒加载等技术来减少不必要的计算和渲染。 此外,为了更好地使用Vue树状数组扁平化,你可能需要使用Vue的数据绑定机制和组件系统来动态地呈现扁平化的数据结构。你可以创建一个组件来显示扁平化的数据,并使用Vue的数据绑定语法将其与数据源进行绑定。 总之,Vue树状数组扁平化是一个常用的操作,可以帮助你更有效地处理树状数组数据,并提高性能和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值