javascript如何合并多层级数组

 更新时间:2023年01月17日 10:30:57   作者:黄元帅  
这篇文章主要介绍了javascript如何合并多层级数组问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

javascript合并多层级数组

需求

返回一个数组的最低层级展现(遍历出数组中每个元素)

  • 输入:一个数组
  • 输出:修改后的单层数组

代码

const deepFlatten = arr=>[].concat(...arr.map(v=>Array.isArray(v)?deepFlatten(v) : v));

console.log('[1,[2],[3,[4]],[5,[6,[7,8]]]]合并后的数组为:'+deepFlatten([1,[2],[3,[4]],[5,[6,[7,8]]]]));

效果

一点想法

Array的map()方法会返回处理后的结果,搭配使用ES6中新的特性——扩展运算符…使递归更加高效、易懂。

javascript数组操作合集

数组操作:

改变原数组

  • arr.push(value) 数组尾部增加
  • arr.pop()  数组尾部删除
  • arr.unshift(value)  数组头部增加
  • arr.shift()  数组头部删除
  • arr.sort((a,b)=>a-b)  数组排序(升序)
  • arr.splice(start,length,value…) 数组指定位置增删
  • arr.reverse()  数组倒置
  • delete arr[i]  数组清空某一个值为undefined
  • arr.fill(value,start,end) 填充数组
  • arr.copyWithin(targe,start,end)  数组切片复制到数组新位置
  • arr.toString() 数组转化成字符串
  • Array.from(arr)  set类型等类数组转化成数组

不改变原数组

  • arr.forEach(fn)  遍历
  • arr.filter(fn)     筛选
  • arr.map(fn)     遍历
  • arr.slice(start,end)  裁剪
  • arr.findIndex((item,index,arr)=>{})   找值,返回序号
  • arr.find(fn)        找值,返回值
  • arr.indexOf(item,start)   找值,返回序号,不能查找NaN
  • arr.includes(item,index)       找值,返回boolean,可查找NAN
  • arr.lastIndexOf(item,start)        反向找值,返回序号
  • arr.some(fn)       找是否存在,返回boolean
  • arr.every(fn)       所有子项是否条件都符合,返回boolean
  • arr.join(‘’)        用什么拼接
  • arr.reduce(fn)     数组累计执行
  • arr.reduceRight(fn)
  • for(let [k,v] of a.entries())  遍历key和value
  • arr.flat(层级)        层级摊平
  • arr.flatMap(fn)        类似map,层级无视
  • arr.concat(value)    合并数组
  • Array.isArray(arr)         判断是否是数组
  • arr.entries()         返回数组的课迭代对象,key和value
  • arr.keys()           返回数组的课迭代对象
  • arr.values()          返回数组的课迭代对象

例:let a = [11,22,33]   求和

ruduce((sum,item)=>{sum+=item;return sum})
/*

    确定对象o是不是类数组对象

*/

function isArrayLike(o) {

    if (o

        && typeof o === 'object' &&

        Number.isFinite(o.length) &&

        o.length >= 0 &&

        Number.isInteger(o.length) &&

        o.length < 4294967295) {

        return true

    } else {

        return false

    }

}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript定义类和类的实现实例详解

    javascript定义类和类的实现实例详解

    这篇文章主要介绍了javascript定义类和类的实现,结合实例形式较为详细的分析了JavaScript类的定义方式与相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • JavaScript实现数值自动增加动画

    JavaScript实现数值自动增加动画

    这篇文章主要为大家详细介绍了JavaScript实现数值自动增加动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • ajax 同步请求和异步请求的差异分析

    ajax 同步请求和异步请求的差异分析

    ajax 同步请求和异步请求的差异分析,需要的朋友可以参考下。
    2011-07-07
  • uniapp打开地图直接获取位置的实现代码

    uniapp打开地图直接获取位置的实现代码

    这篇文章主要介绍了uniapp打开地图直接获取位置的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • JS 非图片动态loading效果实现代码

    JS 非图片动态loading效果实现代码

    功能说明:譬如在按某个button时,显示消息"Loading”,然后每隔一秒后后面加上".",至一定数量的"."时如:"Loading...",再重置此消息为"Loading",继续动态显示,直至按钮事件处理完成。
    2010-04-04
  • JS将json字符串转换为JsonObject的多种实现方法

    JS将json字符串转换为JsonObject的多种实现方法

    在Web前端开发中,JSON(JavaScript Object Notation)作为数据交换格式被广泛使用,它轻量级且易于人类阅读和编写,同时也易于机器解析和生成,当从服务器接收数据时,我们需要将其转换为JSON对象以便于操作,本文将深入探讨如何利用JavaScript实现这一转换过程
    2025-02-02
  • JS表格的动态操作完整示例

    JS表格的动态操作完整示例

    这篇文章主要介绍了JS表格的动态操作,结合完整实例形式详细分析了JavaScript针对表格元素的动态修改与删除简单操作技巧,需要的朋友可以参考下
    2020-01-01
  • js刷新页面location.reload()用法详解

    js刷新页面location.reload()用法详解

    这篇文章主要介绍了js刷新页面location.reload()用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • js 将input框中的输入自动转化成半角大写(税号输入框)

    js 将input框中的输入自动转化成半角大写(税号输入框)

    本文主要介绍了税号输入框:将input框中的输入自动转化成半角大写的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS+CSS实现的蓝色table选项卡效果

    JS+CSS实现的蓝色table选项卡效果

    这篇文章主要介绍了JS+CSS实现的蓝色table选项卡效果,通过鼠标事件调用自定义函数实现页面元素样式的遍历与动态切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论