自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

攜程 & 蘑菇街 & bilibili:手寫數(shù)組去重、扁平化函數(shù)

開發(fā) 前端
flat() 方法會按照一個可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回.

[[436474]]

數(shù)組扁平化(又稱數(shù)組降維)

MDN:flat() 方法會按照一個可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。

  1. const test = ["a", ["b""c"], ["d", ["e", ["f"]], "g"]] 
  2.  
  3. // 不傳參數(shù)時,默認(rèn)扁平化一層 
  4. test.flat() 
  5. // ["a""b""c""d", ["e", ["f"]], "g"
  6.  
  7. // 傳入一個整數(shù)參數(shù),整數(shù)即扁平化的層數(shù) 
  8. test.flat(2) 
  9. // ["a""b""c""d""e", ["f"], "g"
  10.  
  11. // Infinity 關(guān)鍵字作為參數(shù)時,無論多少層嵌套,都會轉(zhuǎn)為一維數(shù)組 
  12. test.flat(Infinity) 
  13. // ["a""b""c""d""e""f""g"
  14.  
  15. // 傳入 <=0 的整數(shù)將返回原數(shù)組,不扁平化 
  16. test.flat(0) 
  17. test.flat(-10) 
  18. // ["a", ["b""c"], ["d", ["e", ["f"]], "g"]] 
  19.  
  20. // 如果原數(shù)組有空位,flat()方法會跳過空位。 
  21. ["a""b""c""d",,].flat() 
  22. // ["a""b""c""d"

Array.prototype.flat() 特性總結(jié):

  • Array.prototype.flat() 用于將嵌套的數(shù)組扁平化,變成一維的數(shù)組。該方法返回一個新數(shù)組,對原數(shù)據(jù)沒有影響。
  • 不傳參數(shù)時,默認(rèn)扁平化一層,可以傳入一個整數(shù),表示想要扁平化的層數(shù)。
  • 傳入 <=0 的整數(shù)將返回原數(shù)組,不扁平化。
  • Infinity 關(guān)鍵字作為參數(shù)時,無論多少層嵌套,都會轉(zhuǎn)為一維數(shù)組。
  • 如果原數(shù)組有空位,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"

實(shí)現(xiàn) flat 函數(shù):

  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. // 不傳參數(shù)時,默認(rèn)扁平化一層 
  14. flat(test) 
  15. // ["a""b""c""d", ["e", ["f"]], "g"
  16.  
  17. // 傳入一個整數(shù)參數(shù),整數(shù)即扁平化的層數(shù) 
  18. flat(test, 2) 
  19. // ["a""b""c""d""e", ["f"], "g"
  20.  
  21. // Infinity 關(guān)鍵字作為參數(shù)時,無論多少層嵌套,都會轉(zhuǎn)為一維數(shù)組 
  22. flat(test, Infinity) 
  23. // ["a""b""c""d""e""f""g"
  24.  
  25. // 傳入 <=0 的整數(shù)將返回原數(shù)組,不扁平化 
  26. flat(test, 0) 
  27. flat(test, -10) 
  28. // ["a", ["b""c"], ["d", ["e", ["f"]], "g"]]; 
  29.  
  30. // 如果原數(shù)組有空位,flat()方法會跳過空位。 
  31. var arr = ["a""b""c""d",,] 
  32. flat(arr) 
  33. // ["a""b""c""d"

方法二:棧

一次性降維所有

  1. function flattenDeep(arr) { 
  2.   const result = []  
  3.   // 將數(shù)組元素拷貝至棧,直接賦值會改變原數(shù)組 
  4.   const stack = [...arr] 
  5.   // 如果棧不為空,則循環(huán)遍歷 
  6.   while (stack.length !== 0) { 
  7.     const val = stack.pop()  
  8.     if (Array.isArray(val)) { 
  9.       // 如果是數(shù)組再次入棧,并且展開了一層 
  10.       stack.push(...val)  
  11.     } else { 
  12.       // 如果不是數(shù)組,就用頭插法插入到結(jié)果數(shù)組中 
  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"

數(shù)組去重

方式一: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] 

 

責(zé)任編輯:武曉燕 來源: 三分鐘學(xué)前端
相關(guān)推薦

2020-09-16 14:17:42

flat方法

2013-09-22 15:43:27

扁平化UI設(shè)計(jì)

2013-09-22 15:03:27

扁平化UI設(shè)計(jì)

2013-09-22 14:47:50

扁平化UI設(shè)計(jì)

2013-09-22 14:56:26

扁平化UI設(shè)計(jì)

2013-09-22 14:30:43

扁平化設(shè)計(jì)

2013-09-22 16:36:07

扁平化UI設(shè)計(jì)

2013-09-22 16:17:59

扁平化UI設(shè)計(jì)

2013-09-22 16:22:58

扁平化UI設(shè)計(jì)

2013-09-23 10:16:04

扁平化UI設(shè)計(jì)

2019-04-08 16:29:28

多云扁平化云計(jì)算

2013-07-11 09:45:48

扁平化扁平化設(shè)計(jì)

2021-11-07 14:37:59

列表編碼扁平化

2013-06-09 11:04:07

設(shè)計(jì)扁平化設(shè)計(jì)平面化設(shè)計(jì)

2013-09-22 16:30:13

扁平化UI設(shè)計(jì)

2013-09-25 10:52:27

Android 4.4扁平化

2013-01-28 09:39:05

用戶界面扁平化設(shè)計(jì)

2017-10-13 17:35:30

深度學(xué)習(xí)移動端機(jī)器學(xué)習(xí)

2012-02-20 14:48:30

網(wǎng)絡(luò)扁平化

2013-09-22 15:09:04

扁平化UI設(shè)計(jì)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號