2. 程式人生 > 其它 >Array.prototype.flat() (扁平化陣列 )

Array.prototype.flat() (扁平化陣列 )

阿新 • • 發佈：2021-02-03

技術標籤：javascriptjavascriptvue.jses6arrayhtml5

扁平化陣列 Array.prototype.flat方法

使用方法總結

1. Array.prototype.flat() 用於將巢狀的陣列“拉平”，變成一維的陣列。該方法返回一個新陣列，對原資料沒有影響。
2. 不傳引數時，預設“拉平”一層，可以傳入一個整數，表示想要“拉平”的層數。
3. 傳入 引數<=0 的整數將返回原陣列，不“拉平”。
4. Infinity 關鍵字作為引數時，無論多少層巢狀，都會轉為一維陣列。
5. 如果原陣列有空位，Array.prototype.flat() 會跳過空位。

程式碼示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <script>
 

         var _array = ['蘋果',["狗","貓"],["動物",["家禽",["鴨"]]]]
         
        //1、不傳遞任何引數的時候，預設“拉平一層”
        var _arrayOne = _array.flat()
        var _arrayTwo = _array.flat(1)
        console.log(_arrayOne) //['蘋果',"狗","貓","動物",["家禽",["鴨"]]]
 

        console.log(_arrayTwo)//['蘋果',"狗","貓","動物",["家禽",["鴨"]]]
        
        //2、傳入一個整數引數，這個整數引數就是拉平的層數
        var _arrayThree = _array.flat(2)
        var _arrayFour = _array.flat(3)
        console.log(_arrayThree)//['蘋果',"狗","貓","動物","家禽",["鴨"]]
        console.log(_arrayFour)//['蘋果',"狗","貓","動物","家禽","鴨"]

        //3、Infinity 關鍵字作為引數時，無論多少層巢狀，都會轉為一維陣列
        var _arrayFive = _array.flat(Infinity)
        console.log(_arrayFive)//['蘋果',"狗","貓","動物","家禽","鴨"]

        //4、傳入引數<=0 的整數將返回原陣列，不“拉平”。 
        var _arraySix = _array.flat(0)
        console.log(_arraySix) //['蘋果',["狗","貓"],["動物",["家禽",["鴨"]]]]

        //5、如果原陣列有空位,flat() 會跳過空位
        var _array = ['蘋果',"狗","貓", ,,]
        console.log(_array.flat()) //['蘋果',"狗","貓"]  會直接把空格還有空值給越過去，但是如果是""(空字串就不會越過)
     </script>
</body>
</html>

相關推薦

Array.prototype.flat() (扁平化陣列 )

技術標籤：javascriptjavascriptvue.jses6arrayhtml5 扁平化陣列 Array.prototype.flat方法 使用方法總結程式碼示例

ES6陣列方法扁平化陣列去重

技術標籤：jsjavascriptes6 let arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10] function del(arr){

具有層級關係的扁平化陣列轉化成樹形結構陣列

// 遞迴查詢父級及其子級節點 nestFn(id) { let a = []; this.resJson.forEach(item => { if (item.fatherid == id) {

關於扁平化陣列的吐槽

一個部門JSON資料中，屬性名是部門id，屬性值是個部門成員id陣列集合，現在要把有部門的成員id都提取到一個數組集合中。

陣列方法、去重、冒泡、選擇、反轉、扁平化陣列

some陣列中是否有滿足條件的返回布林值,如果遇到一個滿足條件的，就會直接跳出

Array（陣列-扁平化）

技術標籤：Javascriptjavascripthtmltypescriptnode.js前端 // 二維陣列平鋪 const arr = [11, [22, 33], [44, 55], 66];

JS陣列扁平化(flat)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat#reduce_concat_isarray_recursivity

javscript 陣列扁平化的實現

join toString 該兩種方法會將陣列元素的型別轉換為字串 var arr = [1,[2,[3,[4,5]]],6]; console.log(arr.join()); //1,2,3,4,5,6

JS陣列扁平化、去重、排序操作例項詳解

本文例項講述了JS陣列扁平化、去重、排序操作。分享給大家供大家參考，具體如下：

JS陣列降維的實現Array.prototype.concat.apply([], arr)

把多維陣列（尤其是二維陣列）轉化為一維陣列是業務開發中的常用邏輯，最近跟著黃軼老師學習Vue2.6.1.1版本原始碼時,看到原始碼對二維陣列降維的程式碼,所以這裡來寫一篇,記錄一下,加強印象

陣列的扁平化

1. reduce 遍歷陣列每一項，若值為陣列則遞迴遍歷，否則concat。 function flatten(arr) {

js5種方式實現陣列扁平化

陣列扁平化概念 陣列扁平化是指將一個多維陣列變為一維陣列 [1, [2, 3, [4, 5]]]------>[1, 2, 3, 4, 5]

Js陣列拍平/扁平化的實現總彙

題目： 請寫出一個數組拍平函式。效果如下： var arr=[\'a\', [\'b\', \'c\'], 2, [\'d\', \'e\', \'f\'], \'g\', 3, 4];

567 陣列扁平化

// 請將該 data 陣列鋪平 const data = [ { id: 1, title: \"課程 1\", children: [ { id: 4, title: \"課程 1-1\" },

一文搞定陣列扁平化（超全面的陣列拉平方案及實現）

前言 面試手寫程式碼在大廠面試中非常常見，秋招中面試小米就手寫了一道flat實現的程式碼題，當時通過遞迴方式實現了陣列扁平化邏輯，但沒有考慮多種實現方案及其邊界條件(主要是對所涉及到高階函式的知識點不夠熟練

Js陣列扁平化實現方法程式碼總彙

題目： 請寫出一個數組拍平函式。效果如下： var arr=[\'a\',[\'b\',\'c\'],2,[\'d\',\'e\',\'f\'],\'g\',3,4];

如何扁平化2維陣列和多維陣列

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

# JavaScript中的物件轉陣列Array.prototype.slice.call()方法詳解

JavaScript中的物件轉陣列Array.prototype.slice.call()方法詳解 JavaScript中的Array.prototype.slice.call(arguments)能將有length屬性的物件轉換為陣列(特別注意： 這個物件一定要有length屬性). 但有一個例外，I

陣列扁平化的幾種方法

技術標籤：js 陣列扁平化是將一個多維陣列轉化為一維陣列 [1,[2,[3,4,[5,6]]]] ------->[1,2,3,4,5,6]

JS----JavaScript中陣列扁平化

技術標籤：javascript 扁平化 一、 什麼是陣列扁平化？ 陣列扁平化就是將一個多層巢狀的陣列 (Arrary) 轉化為只有一層。