.flat() & .flatMap()
Bu aralar Javascript ile alakalı ilgilimi çeken konularda araştırmalar yapıyorum. ECMAScript 2019 (ES2019)/ES10'da gelen özellikleri incelerken bahsi geçen konuya denk geldim ve hoşuma gitti. Bilgi paylaşınca çoğalır felsefesiyle sizlerle de paylaşmak istedim. 🤗
1.Array.flat(<dept>)
Bu yöntem, elimizdeki nested Array’in tekdüze hale getirilip yeni bir Array oluşturmamızı sağlıyor.
Şöyle ki;
Bu sayede derinlik(1, 2, 3, …) değerlerine göre iç içe girmiş dizileri, birinci seviyeye getirebiliyoruz.
3. ve 4. satırlardaki kod satırı aslında aynı işlemi yapıyor. Burada, benim hoşuma giden parametre, Infinity oldu. Bu özellik sayesinde iç içe girmiş, karmaşık bir yapıda olan dizilerimize, ayrı ayrı derinlik parametresi vermeden kullanabiliyoruz.
NOT: flat() özelliğiyle, ilgili dizimizin içerisindeki boş olan alanları da temizleyebiliyoruz.
Örneğin;
const numbers = [8, ,3, ,19];
numbers.flat();
// [8, 3, 19]ES6'da bu işlem, bir derinlikli dizi için farklı yöntemlerle yapılabiliyordu.
Örneğin;
const oneLevelDeep = [8, [3], [19]];const flattenedArray = [].concat(...oneLevelDeep);// ya daconst flattenedArray = [].concat.apply([], oneLevelDeep);// Output: [8, 3, 19]
Recursive yöntemlerle ya da Lodash, Underscore kütüphaneleri ile de bu işlemleri kısa bir şekilde gerçekleştirebiliyoruz.
2. Array.flatMap()
Bu özellik ise, .map() yönteminin ardından .flat() ya da .flat(1) yönteminin birlikte kullanılması ile aynıdır. Kısaca, .flatMap(), her değeri yeni bir değere eşler ve daha sonra ortaya çıkan dizi, maksimum bir derinlikli hale gelmiş olur.
const fibonacci = [0, 1, 1, 2, 3];fibonacci.map(f => [f, f * 2])
.flat();// [Array(2), Array(2), Array(2), …]// 0: (2)[0, 0]
// 1: (2)[1, 2]
// 2: (2)[1, 2]
// 3: (2)[2, 4]
// 4: (2)[3, 6]// Output: [0, 0, 1, 2, 1, 2, 2, 4, 3, 6]
.flatMap() kullanırsak eğer;
Kısaca, API’den gelen karmaşık bir JSON sonucu ile karşı karşıya geldiğimizi düşünürsek gayet kullanışlı bir geliştirme olduğunu söyleyebilirim.
const wish = ['saglicakla', ['kalin', ['🖖']]];console.log(wish.flat(Infinity));