JavaScript Array flat() Method Kullanımı

JavaScript'te bir diziyi düzleştirmek her zaman karmaşıktı. Artık değil! ES2019, dizileri düzleştiren yeni bir Method tanıttı; Ve bir derinlik parametresi vardır.

Bir diziyi düzleştirmek, bir dizinin boyutluluğunu azaltmak anlamına gelir. Daha basit bir ifadeyle, çok boyutlu bir diziyi belirli bir boyuta indirgemek anlamına gelir.

flat() Methodu, alt diziler olan tüm öğelerden yeni bir dizi oluşturur ve bunları, düzleştirmenin ne kadar derinlikte olması gerektiğine ilişkin verilen parametre ile eşzamanlı olarak birleştirir.

Sözdizimi:

var newArray = arr.flat(derinlik);

derinlik: İç içe dizinin ne kadar derinlikte düzleştirilmesi gerektiğini belirtir. İsteğe bağlı bir parametre olduğunu tahmin ettiğiniz gibi hiçbir derinlik değeri aktarılmazsa varsayılan değer Bir'dir (1).

ÖRNEK:


const numbers = [1, 2, [3, 4, 5]];
const flatNumbers = numbers.flat();

console.log(flatNumbers);	

ÇIKTI:

[1, 2, 3, 4, 5]

ÖRNEK 2:


const x = [['🐤', '🐤'], ['🐤']];

const yeni = x.flat();

console.log(yeni);
// ['🐤', '🐤', '🐤']


depth(derinlik) Parametre Ayarlama


İşte bu Methodun sözdizimi:

array.flat (derinlik);

Varsayılan olarak, flat() Methodu yalnızca bir katman derinliğinde düzleştirir. Başka bir deyişle, derinlik parametresi "1" değerindedir.

dizi.flat(); // İle aynı array.flat(1);

Daha Derin İç İçe Diziler


Harika olan şey, bu Methodun aynı zamanda 1 seviyenin ötesinde derinlikte çalışmasıdır. Daha derin(depth) iç içe dizileri düzleştirmek için uygun parametreyi ayarlamanız yeterlidir.


const twoLevelsDeep = [[1, [2, 2], 1]];

// derinlik = 1 
console.log(twoLevelsDeep.flat()); 
// [1, [2, 2], 1]

// derinlik = 2 
console.log(twoLevelsDeep.flat(2)); 
// [1, 2, 2, 1]


Sonsuz İç İçe Diziler


Derinlik seviyesini bilmediğinizde , alt dizilerin tüm öğelerini yeni diziye özyinelemeli olarak birleştirmek için Infinity Değerini flat() Methoduna paremetre olarak yazarsınız. :


const veryDeep = [1, [2, 2, [3, [4, [5, [6]]]], 1]];

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

Boş Yuvalı Dizi


flat() methodun Yapabilecek bir diğer harika şey, bir dizideki boş yuvaları kaldırmaktır.


const Numbers = [1,, 3,, 5];

console.log(Numbers.flat()); 
// [1, 3, 5];

flat() Methodu ES2019'da sunulan süper yeni bir özelliktir, bu nedenle Internet Explorer desteklemez.

ES6 Çözümü


İşte bir ES6 çözümü. Bu yalnızca bir düzey iç içe geçmiş dizi için çalışır.


const oneLevelDeep = [[1, 2], [3]];

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

Eski Tarayıcı Çözümü


ES6 öncesi için eski tarayıcı için çözüm. Yine, bu yalnızca bir düzey iç içe geçmiş dizi için çalışır.


const oneLevelDeep = [[1, 2], [3]];

const flattened = [].concat(...oneLevelDeep);

console.log(flattened);
// [1, 2, 3,]

İç içe dizileri düzleştirme



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

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

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

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

1642

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS YATAY MENÜ YAPIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.