Сглаживать массив в #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;
Ресурсы
- Веб-документы MDN:
- Аллигатор: сглаживание массивов в ванильном JavaScript с помощью flat и flatMap
- Сгладить массив массивов с помощью JavaScript
- Переполнение стека: объединить / сгладить массив массивов
- Сглаживание многомерных массивов в JavaScript
- Сглаживание массивов в JavaScript с помощью flat и flatMap
Делиться
- Нравится в Твиттере
- Нравится в Instagram
- Первоначально опубликовано на www.samanthaming.com
Спасибо за чтение ❤
Сказать привет! Instagram | Facebook | Твиттер | SamanthaMing.com | Блог