返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript数组去重和扁平化函数介绍
  • 193
分享到

JavaScript数组去重和扁平化函数介绍

2024-04-02 19:04:59 193人浏览 八月长安
摘要

目录1、数组扁平化(又称数组降维)方法一:使用 reduce 方法方法二:栈2、数组去重方式一:Set(es6)方式二:reduce方法三:filter1、数组扁平化(又称数组降维)

1、数组扁平化(又称数组降维)

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回


const test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]

// flat不传参数时,默认扁平化一层
test.flat()
// ["a", "b", "c", "d", ["e", ["f"]], "g"]

// flat传入一个整数参数,整数即扁平化的层数
test.flat(2)
// ["a", "b", "c", "d", "e", ["f"], "g"]

// Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组
test.flat(Infinity)
// ["a", "b", "c", "d", "e", "f", "g"]

// 传入 <=0 的整数将返回原数组,不扁平化
test.flat(0)
test.flat(-1)
// ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]

// 如果原数组有空位,flat()方法会跳过空位。
["a", "b", "c", "d",,].flat()
// ["a", "b", "c", "d"]

方法一:使用 reduce 方法

一次性扁平化所有


function flattenDeep(arr) { 
    return Array.isArray(arr)
      ? arr.reduce( (acc, cur) => [...acc, ...flattenDeep(cur)] , [])
      : [arr]
}

// 测试
var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
flattenDeep(test)
// ["a", "b", "c", "d", "e", "f", "g"]

实现 flat 函数:


function flat(arr, depth = 1) {
    return depth > 0
        ? arr.reduce((acc, cur) => {
        if(Array.isArray(cur)) {
            return [...acc, ...flat(cur, depth-1)]
        }
        return [...acc, cur]
    } , [])
      : arr
}

// 测试
var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
// 不传参数时,默认扁平化一层
flat(test)
// ["a", "b", "c", "d", ["e", ["f"]], "g"]

// 传入一个整数参数,整数即扁平化的层数
flat(test, 2)
// ["a", "b", "c", "d", "e", ["f"], "g"]

// Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组
flat(test, Infinity)
// ["a", "b", "c", "d", "e", "f", "g"]

// 传入 <=0 的整数将返回原数组,不扁平化
flat(test, 0)
flat(test, -10)
// ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]];

// 如果原数组有空位,flat()方法会跳过空位。
var arr = ["a", "b", "c", "d",,]
flat(arr)
// ["a", "b", "c", "d"]

方法二:栈

一次性降维所有


function flattenDeep(arr) {
  const result = [] 
  // 将数组元素拷贝至栈,直接赋值会改变原数组
  const stack = [...arr]
  // 如果栈不为空,则循环遍历
  while (stack.length !== 0) {
    const val = stack.pop() 
    if (Array.isArray(val)) {
      // 如果是数组再次入栈,并且展开了一层
      stack.push(...val) 
    } else {
      // 如果不是数组,就用头插法插入到结果数组中
      result.unshift(val)
    }
  }
  return result
}

// 测试
var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
flattenDeep(animals)
// ["a", "b", "c", "d", "e", "f", "g"]

2、数组去重

方式一:Set(ES6)


function unique(arr) {
    return Array.from(new Set(arr))
}
// 或者
var unique = arr => [...new Set(arr)]

// 测试
var arr = [1, 2, 2, 3]
unique(arr); // [1, 2, 3]

方式二:reduce


function unique (arr) {
    return arr.sort().reduce((acc, cur) => {
     if (acc.length === 0 || acc[acc.length - 1] !== cur) {
         acc.push(cur);
     }
     return acc
 }, [])}
;

// 测试
var arr = [1, 2, 2, 3]
unique(arr); // [1, 2, 3]


方法三:filter


function unique(arr) { 
    return arr.filter( (element, index, array) => {
     return array.indexOf(element) === index
 })
}

// 测试
var arr = [1, 2, 2, 3]
unique(arr); // [1, 2, 3]

到此这篇关于javascript数组去重和扁平化函数介绍的文章就介绍到这了,更多相关js数组去重、扁平化函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript数组去重和扁平化函数介绍

本文链接: https://lsjlt.com/news/159644.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript数组去重和扁平化函数介绍
    目录1、数组扁平化(又称数组降维)方法一:使用 reduce 方法方法二:栈2、数组去重方式一:Set(ES6)方式二:reduce方法三:filter1、数组扁平化(又称数组降维)...
    99+
    2024-04-02
  • 怎么解析JavaScript数组去重和扁平化函数
    这篇文章将为大家详细讲解有关怎么解析JavaScript数组去重和扁平化函数,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1、数组扁平化(又称数组降维)flat() 方法会按照一个可指定的深...
    99+
    2023-06-22
  • JavaScript中数组扁平化的简介
    小编给大家分享一下JavaScript中数组扁平化的简介,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Java的特点有哪些Java的特点有哪些1.Java语言作为...
    99+
    2023-06-08
  • 解数组去重和数组扁平化的方法有哪些
    这篇文章主要介绍“解数组去重和数组扁平化的方法有哪些”,在日常操作中,相信很多人在解数组去重和数组扁平化的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”解数组去重和...
    99+
    2024-04-02
  • JavaScript如何扁平化n维数组
    小编给大家分享一下JavaScript如何扁平化n维数组,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!扁平化n维数组1.终极篇[...
    99+
    2024-04-02
  • JavaScript这么实现数组扁平化
    这篇“JavaScript这么实现数组扁平化”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“...
    99+
    2024-04-02
  • JavaScript数组扁平化怎么实现
    这篇“JavaScript数组扁平化怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript数组扁平化怎么...
    99+
    2023-07-02
  • JavaScript中如何使用函数递归实现数组扁平化
    小编给大家分享一下JavaScript中如何使用函数递归实现数组扁平化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数组扁平化是...
    99+
    2024-04-02
  • JavaScript数组常用方法解析及数组扁平化
    目录前言一、常用数组操作方法push末尾追加元素pop删除数组末尾元素sort排序shift数组开头添加元素 && unshift数组开头删除元素数组合并concat...
    99+
    2024-04-02
  • JavaScript数据扁平化详解
    目录什么是扁平化递归tostringreduceundercore_.flatten_.union_.difference总结什么是扁平化 数组的扁平化,就是将一个嵌套多层...
    99+
    2024-04-02
  • 5种 JavaScript 方式实现数组扁平化
    目录一、数组扁平化概念 二、实现1. reduce2. toString & split3. join & split4. 递归5. 扩展运算符一、数组扁平化概念 ...
    99+
    2024-04-02
  • JavaScript扁平数据转tree与tree数据扁平化的方法
    这篇文章主要介绍“JavaScript扁平数据转tree与tree数据扁平化的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript扁平数据转tree与tree数据扁平化的方法”文章...
    99+
    2023-07-02
  • JavaScript中数组扁平化的方法有哪些
    这篇文章将为大家详细讲解有关JavaScript中数组扁平化的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。数组扁平化数组扁平化是指将一个多维数组变为一个一维数...
    99+
    2024-04-02
  • JavaScript前端面试扁平数据转tree与tree数据扁平化
    目录一、写在前面二、正文部分2.1 扁平数据转为 tree 数据2.2 tree 数据转为扁平数据2.3 完整测试 demo三、写在后面一、写在前面 有时我们拿到的数据的数据结构可能...
    99+
    2024-04-02
  • js实现数组的扁平化
    目录数组扁平化的方式1.使用flat()2.使用正则3.使用reduce()+concat()4.使用函数递归5.使用扩展运算符+concat()总结 数组扁平化...
    99+
    2024-04-02
  • JavaScript中如何使用reduce实现数组扁平化
    这篇文章主要为大家展示了“JavaScript中如何使用reduce实现数组扁平化”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何使用r...
    99+
    2024-04-02
  • JavaScript中如何使用flat()实现数组扁平化
    小编给大家分享一下JavaScript中如何使用flat()实现数组扁平化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数组扁平...
    99+
    2024-04-02
  • JavaScript数组实现扁平化四种方法详解
    目录1. 常规递归法2. reduce方法3. 扩展运算符实现4. split和toString共同处理数组的扁平化就是将一个嵌套多层的数组 array(嵌套可以是任何层数)转换为只...
    99+
    2022-11-13
    JS数组扁平化 JS数组
  • js如何实现扁平化数组
    这篇文章主要介绍了js如何实现扁平化数组,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。扁平化数组在原型 Array 上有一个方法 flat,可以从一个数组的数组中制作一个单一...
    99+
    2023-06-27
  • JavaScript面试之如何实现数组拍平(扁平化)方法
    目录1 什么叫数组拍平? 2 JS标准库中的数组拍平方法 3 实现一个flat方法 3.1 如何遍历一个数组 3.2 如何判断元素是否为数组 3.3 递归 3.4 初步实现flat方...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作