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

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

[[436474]]

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

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] 

 

责任编辑:武晓燕 来源: 三分钟学前端
相关推荐

2020-09-16 14:17:42

flat方法

2013-09-22 15:03:27

扁平化UI设计

2013-09-22 15:43:27

扁平化UI设计

2013-09-22 14:47:50

扁平化UI设计

2013-09-22 14:56:26

扁平化UI设计

2013-09-22 14:30:43

扁平化设计

2013-09-22 16:36:07

扁平化UI设计

2013-09-22 16:17:59

扁平化UI设计

2013-09-22 16:22:58

扁平化UI设计

2013-07-11 09:45:48

扁平化扁平化设计

2013-09-23 10:16:04

扁平化UI设计

2019-04-08 16:29:28

多云扁平化云计算

2013-06-09 11:04:07

设计扁平化设计平面化设计

2013-09-25 10:52:27

Android 4.4扁平化

2021-11-07 14:37:59

列表编码扁平化

2013-09-22 16:30:13

扁平化UI设计

2013-01-28 09:39:05

用户界面扁平化设计

2017-10-13 17:35:30

深度学习移动端机器学习

2013-09-22 15:09:04

扁平化UI设计

2010-10-25 14:16:59

扁平化网络
点赞
收藏

51CTO技术栈公众号