Сглаживать массив в #JavaScript всегда было сложно. Уже нет! ES2019 представил новый метод выравнивания массивов. И есть параметр «глубина», поэтому вы можете передавать ЛЮБЫЕ уровни вложенности. УДИВИТЕЛЬНЫЙ 🤩

const nested = [ ['📦', '📦'], ['📦']];
const flattened = nested.flat();
console.log(flattened);
// ['📦', '📦', '📦']

Установка параметра depth

Вот синтаксис этого метода:

array.flat(<depth>);

По умолчанию flat() выравнивает глубину только на один слой. Другими словами, depth это 1.

array.flat();
// Same as
array.flat(1);

Более глубокие вложенные массивы

Замечательно то, что этот метод работает и на глубине более 1 уровня. Вам просто нужно установить соответствующий параметр depth, чтобы сгладить более глубокие вложенные массивы.

const twoLevelsDeep = [[1, [2, 2], 1]];
// depth = 1
twoLevelsDeep.flat()
// [1, [2, 2], 1]
// depth = 2
twoLevelsDeep.flat(2)
// [1, 2, 2, 1]

Бесконечно вложенные массивы

Скажем, вы хотите пойти бесконечно глубоко. Не проблема, мы тоже можем это сделать. Просто пройдите Infinity.

const veryDeep = [[1, [2, 2, [3,[4,[5,[6]]]]], 1]];
veryDeep.flat(Infinity);
// [1, 2, 2, 3, 4, 5, 6, 1]

Массив с пустыми слотами

Еще одна интересная вещь, которую можно сделать flat(), - это удалить пустые слоты в массиве.

const missingNumbers = [1, ,3, ,5];
missingNumbers.flat();
// [1, 3, 5];

Поддержка браузера

flat - это супер новая функция, представленная в ES2019, так что забудьте об Internet Explorer или Edge. Но тут нет ничего удивительного 😅

Поддержка браузера: плоская

Альтернативное решение

Так как поддержка невелика. Вот несколько альтернативных решений.

Решение ES6

Вот решение ES6. Это работает только для вложенного массива одного уровня.

const oneLevelDeep = [ [1, 2], [3]];
const flattened = [].concat(...oneLevelDeep);
// [1, 2, 3,]

Предыдущее решение для браузера

Вот один для старого браузера и до ES6. Опять же, это работает только для вложенного массива одного уровня.

const oneLevelDeep = [ [1, 2], [3]];
const flattened = [].concat.apply([], oneLevelDeep);
// [1, 2, 3,]

Рекурсия

Для массивов с более глубокой вложенностью можно использовать рекурсию. Вот решение от MDN web docs:

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]

Вклад сообщества

💬 Есть какие-нибудь интересные варианты использования Array.flat ()?

  • @hocine_abdellatif: Небольшой вариант использования, но, вероятно, стоит упомянуть, что в машинном обучении, например, если у вас есть массив поколений, каждое поколение - это массив студентов, если вы хотите, чтобы каждый студент для каждого поколения этот метод будет очень практичным.
  • @devjacks: Я написал тест кода с такой проблемой несколько недель назад. Это сделало бы мою жизнь намного проще! 😂
// Please write a function to search for 213
function search(needle, haystack) {}
const haystack =[1, 4, [5,6,7, [8, 18, [34,177,[98,[210,[213]]]]]]];
const needle = 213;

Ресурсы

Делиться

Спасибо за чтение ❤

Сказать привет! Instagram | Facebook | Твиттер | SamanthaMing.com | Блог