JavaScript實現flatten多種方法

簡介

---

咱們在網上看到不少的關於數組的面試題，好比說給以下一個數組，把它拍平、去重、升序：

let arr = [8, [5, 9, 4], 1, 3, [7, 5, 10, [3, 4, 6, 2]], 4, 3, 2, 4];
複製代碼

其實這個題有不少種解法，好比用 Array.prototype.flat,或者本身實現一個 flatten 函數，咱們這裏主要關注的時 flat 方法的實現。

第一種解法

用最新的語法

let arr = [8, [5, 9, 4], 1, 3, [7, 5, 10, [3, 4, 6, 2]], 4, 3, 2, 4];
let newArr = Array.from(new Set(arr.flat(Infinity))).sort((a, b) => {
  return a - b;
});
console.log(newArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
複製代碼

一、就是先拍平一個多維數組 arr.flat(ES6 語法) 二、再經過 Set 集合作去重 三、再經過 Array.from 把 Set 集合轉爲數組 四、再經過 sort 排序

若是不瞭解 flat 的函數的話，能夠參考mdn Array.prototype.flat()，或者看阮一峯老師的 flat 介紹。 Set 集合的講解能夠參考mdn Set，或者看阮一峯老師的 Set 介紹。 咱們這裏主要討論 flat 的實現。

第二種解法

let arr = [8, [5, 9, 4], 1, 3, [7, 5, 10, [3, 4, 6, 2]], 4, 3, 2, 4];
let newArr = Array.from(new Set(arr.toString().split(",")))
  .map(item => {
    return parseInt(item);
  })
  .sort((a, b) => {
    return a - b;
  });
console.log(newArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
複製代碼

一、咱們調用 Array 上的 toString 方法把他轉換爲一個字符串

arr.toString();
// "8,5,9,4,1,3,7,5,10,3,4,6,2,4,3,2,4"
複製代碼

這列咱們就不討論爲何返回的結果裏面不包含‘[]’這兩個字符串，後面我在寫一篇博客來講數組，的 valueOf、toString 方法。 二、再把字符串經過 Array.prototype.split 方法轉換爲數組 三、再經過 Set 集合作去重 四、再經過 Array.from 把 Set 集合轉爲數組 五、再經過 sort 排序

第三種解法

本身經過封裝一個 flatten，在不基於 Array.prototype.flat 方法上實現一個拍平函數

ES6 實現

let arr = [8, [5, 9, 4], 1, 3, [7, 5, 10, [3, 4, 6, 2]], 4, 3, 2, 4];
const flatten = arr =>
  Array.isArray(arr) ? arr.reduce((a, b) => [...a, ...flatten(b)], []) : [arr];
let newArr = Array.from(new Set(flatten(arr))).sort((a, b) => {
  return a - b;
});

// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
複製代碼

ES5

let arr = [8, [5, 9, 4], 1, 3, [7, 5, 10, [3, 4, 6, 2]], 4, 3, 2, 4];
function flatten(arr) {
  return Array.isArray(arr)
    ? arr.reduce(function(prev, current) {
        return [...prev, ...flatten(current)];
      }, [])
    : [arr];
}
let newArr = Array.from(new Set(flatten(arr))).sort((a, b) => {
  return a - b;
});
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
複製代碼

實現思路

一、檢測是否爲數組 二、若是是數組，調用 reduce 函數實現合併函數 三、若是有嵌套數組，就遞歸調用該方法

總結

實現拍平數組大體有三種方法

1. Array.prototype.flat 方法
2. Array.prototype.toString 方法轉爲字符串，再 split
3. 本身實現一個 flatten 函數