什麼是js數組扁平化？ js數組扁平化的實作（附程式碼）

本篇文章帶給大家的內容是關於什麼是js陣列扁平化？ js陣列扁平化的實作（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、什麼是陣列扁平化

1. #扁平化，顧名思義就是減少複雜性裝飾，使其事物本身更簡潔、簡單，突顯主題。

2. 數組扁平化，對著上面意思套也知道了，就是將一個複雜的嵌套多層的數組，一層一層的轉化為層級較少或者只有一層的數組。

Ps: flatten 可以讓陣列扁平化，效果就會如下：

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr)); // [1, 2, 3, 4]

從中可以看出，使用flatten 處理後的陣列只有一層，下面我們來試著實作一下。

二、簡單實作

#2.1 普通遞迴

• ##這是最容易想到的方法，簡單，清晰！

/* ES6 */
const flatten = (arr) => {
  let result = [];
  arr.forEach((item, i, arr) => {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(arr[i])
    }
  })
  return result;
};

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

/* ES5 */
function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]))
    }
    else {
      result.push(arr[i])
    }
  }
  return result;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

2.2 toString()

• #該方法是利用

  toString 把陣列變成以逗號分隔的字串，然後遍歷陣列把每一項再變回原來的類型。

先來看下

toString 是怎麼把陣列變成字串的

[1, [2, 3, [4]]].toString()
// "1,2,3,4"

完整的展示

/* ES6 */
const flatten = (arr) => arr.toString().split(',').map((item) => +item);

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

/* ES5 */
function flatten(arr) {
  return arr.toString().split(',').map(function(item){
    return +item;
  });
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

這種方法使用的場景卻非常有限，必須數組中元素全部都是Number。

也可以全部都是 String，具體實作大家自己體會。

2.3 [].concat.apply some

• #利用

  arr.some 判斷當陣列中還有陣列的話，循環呼叫flatten 扁平函數(利用[].concat.apply扁平), 用concat 連接，最後回傳arr;

/* ES6 */
const flatten = (arr) => {
  while (arr.some(item => Array.isArray(item))){
    arr = [].concat.apply([], arr);
  }
  return arr;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

/* ES5 */
/**
* 封装Array.some
* @param {function} callback    - 回调函数
* @param {any}      currentThis - 回调函数中this指向
*/
Array.prototype.some = function (callback, currentThis){
  let context = this;
  let flag = false;
  currentThis = currentThis || this;
  for (var i = 0, len = context.length; i < len; i++) {
    const res = callback.call(currentThis, context[i], i, context);
    if (res) {
      flag = true;
    } else if (!flag) {
      flag = false;
    }
  }
  return flag;
}

function flatten(arr){
  while(arr.some(item => Array.isArray(item))){
    arr = [].concat.apply([], arr);
  }
  return arr;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

2.4 reduce

• #reduce 本身就是迭代循環器，通常用於累加，所以根據此特點有以下：

function flatten(arr){
  return arr.reduce(function(prev, cur){
    return prev.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

2.5 ES6 中的解構運算子...

• ... 每次只能展開最外層的數組，被[].concat 後，arr 就會扁平化一次。

function flatten(arr){
  while(arr.some(item => Array.isArray(item))){
    arr = [].concat(...arr);
  }
  return arr;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

相關文章推薦：

用javascript寫四則元算編譯器之詞法分析

js滾動點擊加載更多數據代碼怎麼實現？

以上是什麼是js數組扁平化？ js數組扁平化的實作（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！