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

    }

}

总结

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

相关文章

  • JS实现在线统计一个页面内鼠标点击次数的方法

    JS实现在线统计一个页面内鼠标点击次数的方法

    这篇文章主要介绍了JS实现在线统计一个页面内鼠标点击次数的方法,实例分析了javascript操作Cookie实现计数的技巧,需要的朋友可以参考下
    2015-02-02
  • JS实现商城秒杀倒计时功能(动态设置秒杀时间)

    JS实现商城秒杀倒计时功能(动态设置秒杀时间)

    这篇文章主要介绍了JS实现商城秒杀倒计时功能(动态设置秒杀时间),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 利用原生js实现html5小游戏之打砖块(附源码)

    利用原生js实现html5小游戏之打砖块(附源码)

    这篇文章主要给大家介绍了关于利用原生js实现html5小游戏之打砖块的相关资料,这是最近工作遇到的一个小需求,文中通过示例代码介绍的非常详细,并分享了完整的源码供大家参考学习,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 微信小程序登录数据解密及状态维持实例详解

    微信小程序登录数据解密及状态维持实例详解

    这篇文章主要介绍了微信小程序登录数据解密及状态维持,结合实例形式分析了微信小程序解密敏感信息及获取session保持登陆状态的相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 聊聊JavaScript如何实现继承及特点

    聊聊JavaScript如何实现继承及特点

    “继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。这篇文章主要介绍了聊聊JavaScript如何实现继承及特点,有兴趣的可以了解一下。
    2017-04-04
  • wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    本文给大家带来的是一款非常不错的富文本编辑器WangEditor,他最大的特点是它在ie6,7,8上都可以做到失去焦点后仍然可以在原位置插入图片,而且代码量很少,下面我们就来分析下他是如何实现的呢
    2015-05-05
  • three.js中物体的灯光与阴影设置

    three.js中物体的灯光与阴影设置

    本文主要介绍了three.js中物体的灯光与阴影设置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • JavaScript常规加密技术实现方式详解

    JavaScript常规加密技术实现方式详解

    这篇文章主要为大家介绍了JavaScript常规加密技术实现方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • js实现缓动动画

    js实现缓动动画

    这篇文章主要为大家详细介绍了js实现缓动动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 小程序从手动埋点到自动埋点的实现方法

    小程序从手动埋点到自动埋点的实现方法

    这篇文章主要介绍了小程序从手动埋点到自动埋点的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论