This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Метод flat() створює новий масив який містить всі елементи вкладених масивів до вказаної глибини.

Синтакс

var newArray = arr.flat(depth);

Параметри

depth Optional
Глибина, що вказує до якого рівня вкладеності масивів має відбуватись об'єднання. За замовчуванням 1.

Вихідне значення

A new array with the sub-array elements concatted into it.

Приклади

Вирівнювання вкладених масивів

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]

Вирівнювання і прогалини в масиві

Метод 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]

//щоб здійснити глибоке вирівнювання використовуйте рекурсію з 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]

//вирівнювання без рекурсії використовуючи stack
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]

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

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

Сумісність з браузерами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic support
Experimental
Chrome Full support 69Edge No support NoFirefox Full support 62IE No support NoOpera Full support 56Safari Full support 12WebView Android Full support 69Chrome Android Full support 69Edge Mobile No support NoFirefox Android Full support 62Opera Android Full support 56Safari iOS Full support 12Samsung Internet Android No support Nonodejs No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

Дивіться також

Мітки документа й учасники

Зробили внесок у цю сторінку: vitaliy-patsay
Востаннє оновлена: vitaliy-patsay,