酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源资讯

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

js实现数组的扁平化介绍

来源:互联网 作者:秩名 人气: 发布时间:2021-12-11
本篇文章主要介绍了js实现数组的扁平化介绍,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

数组扁平化的方式

什么是数组扁平化?

数组扁平化:指将一个多维数组转化为一个一维数组。

例:将下面数组扁平化处理。

const arr = [1, [2, 3, [4, 5]]] // ---> [ 1, 2, 3, 4, 5 ]

1.使用flat()

flat() 方法是ES10提出的,它会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。(flat意为“水平的;平坦的”)

const result1 = arr.flat(Infinity) // 指定深度为无限
console.log(result1) // [ 1, 2, 3, 4, 5 ]
const result2 = arr.flat(1) // 指定深度为1
console.log(result2) // [ 1, 2, 3, [ 4, 5 ] ]
const result3 = arr.flat(2) // 指定深度为2
console.log(result3) // [ 1, 2, 3, 4, 5 ] 

2.使用正则

以下做法得到的数组元素都会变成字符串,不建议使用;

const result1 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',')
console.log(result1) // [ '1', '2', '3', '4', '5' ] 数组元素都变成了字符串 

对以上方法进行优化处理;

const result2 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']')
console.log(result2) // [ 1, 2, 3, 4, 5 ] 

3.使用reduce()+concat()

使用reduce拿到数组的当前值和前一项值,判断当前值是否为数组,初始值设置为[],然后使用concat进行数组合并。

  • reduce()方法:对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
  • concat()方法:用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

function flatten(arr) {
  return arr.reduce((pre, current) => {
    return pre.concat(Array.isArray(current) ? flatten(current) : current)
  }, [])
}
const result = flatten(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]

 4.使用函数递归

循环遍历数组,发现含有数组元素就进行递归处理,最终将数组转为一维数组。

const result = []
function exec(arr) {
  arr.forEach(item => {
    if (Array.isArray(item)) {
      exec(item)
    } else {
      result.push(item)
    }
  })
}
exec(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]

5.使用扩展运算符+concat()

ES6新推出的扩展运算符能对数组进行降维处理(一次降一维),循环判断是否含有数组,进行concat合并。

some()方法:测试数组中是不是至少有1个元素通过了被提供的函数测试(它返回的是一个Boolean类型的值)。

function flatten(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}
const result = flatten(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ] 

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.cnblogs.com/MomentYY/p/15640330.html

相关文章

  • JavaScript函数封装随机颜色验证码(完整代码)的介

    JavaScript函数封装随机颜色验证码(完整代码)的介

    数字或者字母或者数字字母混合的n位验证码带随机的颜色。下面是完整的代码,需要的自取哈! ? function verify(a = 6,b = num){ //定义三个随机验证码验证码库 var num =01234567......
    12-22
  • js实现数组的扁平化介绍

    js实现数组的扁平化介绍

    数组扁平化的方式 什么是数组扁平化? 数组扁平化:指将一个多维数组转化为一个一维数组。 例:将下面数组扁平化处理。 const arr = [1, [2, 3, [4, 5]]] // --- [ 1, 2, 3, 4, 5 ......
    12-11
  • JavaScript事件委托原理介绍

    JavaScript事件委托原理介绍

    一、什么是事件委托 事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就无法实现。 举个简单的......
    12-07
  • 使用react-color实现前端取色器的教程

    使用react-color实现前端取色器的教程

    我们可以通过react-color实现前端界面的取色器,效果如下图所示: 安装 npm i react-color -S 使用 import React, { Component, Fragment, createRef } from react; import { Popover } from antd; import {......
    11-12
  • React手写tab切换的介绍

    React手写tab切换的介绍

    父文件 import React, { useState } from react; // import Module1 from ./Module1; // import Module2 from ./Module2; // import Module3 from ./Module3; // import Module4 from ./Module4; import HeaderTtabs, { tagType } from......
    11-12
  • react路由Link配置的介绍

    react路由Link配置的介绍

    1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:/xx,search:?键值对,hash:#xxx,state:{键值对}}会自动将pathname、search、hash拼接在url路径上,state为传入的参数 可通......
    11-10
  • JavaScript实现橱窗展示的介绍

    JavaScript实现橱窗展示的介绍

    先搭架子: * { margin: 0; padding: 0; } .box { width: 800px; height: 190px; border: 1px solid #000; margin: 100px auto; } ul { list-style: none; display: flex; } ul img { vertical-align: top; } .progress { width: 100......
    11-08
  • 原型和原型链prototype和proto的区别介绍

    原型和原型链prototype和proto的区别介绍

    1、原型 原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性 prototype是函数下的属性,对象想要查看......
    10-31
  • Echats图表大屏自适应的实现方法介绍

    Echats图表大屏自适应的实现方法介绍

    使用图表结合数据可以很直观的视觉效应,大屏展示已经成为企业数据展示的常见场景,如何做到大屏自适应是我们需要解决的一个问题,下面是其中一种解决方案,利用......
    10-25
  • Vue生命周期介绍和钩子函数介绍

    Vue生命周期介绍和钩子函数介绍

    Vue生命周期介绍和钩子函数 组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段。从Vue实例被创建开始到该实例......
    10-25