|
|
|
|
公众号矩阵

携程 & 蘑菇街 & bilibili:手写数组去重、扁平化函数

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

作者: sisterAn 来源:三分钟学前端|2021-11-24 08:43

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

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

  1. const test = ["a", ["b""c"], ["d", ["e", ["f"]], "g"]] 
  2.  
  3. // 不传参数时,默认扁平化一层 
  4. test.flat() 
  5. // ["a""b""c""d", ["e", ["f"]], "g"
  6.  
  7. // 传入一个整数参数,整数即扁平化的层数 
  8. test.flat(2) 
  9. // ["a""b""c""d""e", ["f"], "g"
  10.  
  11. // Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组 
  12. test.flat(Infinity) 
  13. // ["a""b""c""d""e""f""g"
  14.  
  15. // 传入 <=0 的整数将返回原数组,不扁平化 
  16. test.flat(0) 
  17. test.flat(-10) 
  18. // ["a", ["b""c"], ["d", ["e", ["f"]], "g"]] 
  19.  
  20. // 如果原数组有空位,flat()方法会跳过空位。 
  21. ["a""b""c""d",,].flat() 
  22. // ["a""b""c""d"

Array.prototype.flat() 特性总结:

  • Array.prototype.flat() 用于将嵌套的数组扁平化,变成一维的数组。该方法返回一个新数组,对原数据没有影响。
  • 不传参数时,默认扁平化一层,可以传入一个整数,表示想要扁平化的层数。
  • 传入 <=0 的整数将返回原数组,不扁平化。
  • Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组。
  • 如果原数组有空位,Array.prototype.flat() 会跳过空位。

方法一:使用 reduce 方法

一次性扁平化所有:

  1. function flattenDeep(arr) {  
  2.     return Array.isArray(arr) 
  3.       ? arr.reduce( (acc, cur) => [...acc, ...flattenDeep(cur)] , []) 
  4.       : [arr] 
  5.  
  6. // 测试 
  7. var test = ["a", ["b""c"], ["d", ["e", ["f"]], "g"]] 
  8. flattenDeep(test) 
  9. // ["a""b""c""d""e""f""g"

实现 flat 函数:

  1. function flat(arr, depth = 1) { 
  2.     return depth > 0 
  3.         ? arr.reduce((acc, cur) => { 
  4.         if(Array.isArray(cur)) { 
  5.             return [...acc, ...flat(cur, depth-1)] 
  6.         } 
  7.         return [...acc, cur] 
  8.     } , []) 
  9.       : arr 
  10.  
  11. // 测试 
  12. var test = ["a", ["b""c"], ["d", ["e", ["f"]], "g"]] 
  13. // 不传参数时,默认扁平化一层 
  14. flat(test) 
  15. // ["a""b""c""d", ["e", ["f"]], "g"
  16.  
  17. // 传入一个整数参数,整数即扁平化的层数 
  18. flat(test, 2) 
  19. // ["a""b""c""d""e", ["f"], "g"
  20.  
  21. // Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组 
  22. flat(test, Infinity) 
  23. // ["a""b""c""d""e""f""g"
  24.  
  25. // 传入 <=0 的整数将返回原数组,不扁平化 
  26. flat(test, 0) 
  27. flat(test, -10) 
  28. // ["a", ["b""c"], ["d", ["e", ["f"]], "g"]]; 
  29.  
  30. // 如果原数组有空位,flat()方法会跳过空位。 
  31. var arr = ["a""b""c""d",,] 
  32. flat(arr) 
  33. // ["a""b""c""d"

方法二:栈

一次性降维所有

  1. function flattenDeep(arr) { 
  2.   const result = []  
  3.   // 将数组元素拷贝至栈,直接赋值会改变原数组 
  4.   const stack = [...arr] 
  5.   // 如果栈不为空,则循环遍历 
  6.   while (stack.length !== 0) { 
  7.     const val = stack.pop()  
  8.     if (Array.isArray(val)) { 
  9.       // 如果是数组再次入栈,并且展开了一层 
  10.       stack.push(...val)  
  11.     } else { 
  12.       // 如果不是数组,就用头插法插入到结果数组中 
  13.       result.unshift(val) 
  14.     } 
  15.   } 
  16.   return result 
  17.  
  18. // 测试 
  19. var test = ["a", ["b""c"], ["d", ["e", ["f"]], "g"]] 
  20. flattenDeep(animals) 
  21. // ["a""b""c""d""e""f""g"

数组去重

方式一:Set(ES6)

  1. function unique(arr) { 
  2.     return Array.from(new Set(arr)) 
  3. // 或者 
  4. var unique = arr => [...new Set(arr)] 
  5.  
  6. // 测试 
  7. var arr = [1, 2, 2, 3] 
  8. unique(arr); // [1, 2, 3] 

方式二:reduce

  1. function unique (arr) { 
  2.     return arr.sort().reduce((acc, cur) => { 
  3.      if (acc.length === 0 || acc[acc.length - 1] !== cur) { 
  4.          acc.push(cur); 
  5.      } 
  6.      return acc 
  7.  }, [])} 
  8.  
  9. // 测试 
  10. var arr = [1, 2, 2, 3] 
  11. unique(arr); // [1, 2, 3] 

方法三:filter

  1. function unique(arr) {  
  2.     return arr.filter( (element, index, array) => { 
  3.      return array.indexOf(element) === index 
  4.  }) 
  5.  
  6. // 测试 
  7. var arr = [1, 2, 2, 3] 
  8. unique(arr); // [1, 2, 3] 

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 函数计算GB镜像秒级启动:下一代软硬件架构协同优化揭秘
  3. 《Java基础入门》第二篇2 数组 与 方法
  4. LeetCode -求两个有序数组的中间值
  5. 数据结构与算法之K次取反后最大化的数组和
  6. VLookup函数从基础到复杂用法讲解
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

57人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

14人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

42人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微