Array.prototype.flat()

Метод flat() возвращает новый массив, в котором все элементы вложенных подмассивов были рекурсивно "подняты" на указанный уровень depth.

Синтаксис

var newArray = arr.flat(depth);

Параметры

depth Необязательный
На сколько уровней вложенности уменьшается мерность исходного массива. По-умолчанию 1.

Возвращаемое значение

Новый массив с объединенными в него подмассивами.

Примеры

Упрощение вложенных массивов

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Упрощение и "дырки" в массивах

Метод flat удаляет пустые слоты из массива:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

Альтернативы

reduce и concat

var arr1 = [1, 2, [3, 4]];
arr1.flat();

//В одномерный массив
arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]

//или
const flatSingle = arr => [].concat(...arr);
//для глубокого упрощения используем рекурсивно reduce и concat
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];

function flattenDeep(arr1) {
   return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

//не рекурсивное упрощение с использованием стэка
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
  const stack = [...input];
  const res = [];
  while (stack.length) {
    // забираем последнее значение
    const next = stack.pop();
    if (Array.isArray(next)) {
      // добавляем к массиву элементы не модифицируя исходное значение
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  //разворачиваем массив, чтобы восстановить порядок элементов
  return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
//рекурсивно упрощаем массив
function flatten(array) {
  var flattend = [];
  (function flat(array) {
    array.forEach(function(el) {
      if (Array.isArray(el)) flat(el);
      else flattend.push(el);
    });
  })(array);
  return flattend;
}

Спецификации

Спецификация Статус Комментарий
Array.prototype.flat proposal Кандидат (3)

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильныеServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung InternetNode.js
flatChrome Полная поддержка 69Edge Нет поддержки НетFirefox Полная поддержка 62IE Нет поддержки НетOpera Полная поддержка 56Safari Полная поддержка 12WebView Android Полная поддержка 69Chrome Android Полная поддержка 69Firefox Android Полная поддержка 62Opera Android Полная поддержка 48Safari iOS Полная поддержка 12Samsung Internet Android Полная поддержка 10.0nodejs Полная поддержка 11.0.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

Смотрите также