JavaScript'teki dilim (), splice () ve split () yöntemleriyle ilgili karışıklığı giderelim

JavaScript yerleşik yöntemleri, doğru bir şekilde anladığımızda, programlama sırasında bize çok yardımcı olur. Ben bu yazıda Üçünü açıklamak istiyorum: slice(), splice()ve split()yöntemler. Belki de adları çok benzer olduğu için deneyimli geliştiriciler arasında bile kafaları karışıyor.

Öğrencilere ve genç geliştiricilere bu makaleyi dikkatlice okumalarını tavsiye ederim çünkü bu üç yöntem İŞ GÖRÜŞMELERİ'nde de sorulabilir.

Sonunda her yöntemin bir özetini bulabilirsiniz. Dilerseniz aşağıdaki video versiyonunu da izleyebilirsiniz:

Haydi başlayalım…

JavaScript Dizileri

Öncelikle, JavaScript dizilerinin nasıl çalıştığını anlamanız gerekir . Diğer programlama dillerinde olduğu gibi, birden fazla veriyi JS'de depolamak için dizileri kullanırız. Ancak aradaki fark, JS dizilerinin aynı anda farklı türde veriler içerebilmesidir.

Bazen bu diziler üzerinde işlemler yapmamız gerekir. Daha sonra slice () & splice () gibi bazı JS yöntemlerini kullanıyoruz . Aşağıda JavaScript'te bir diziyi nasıl bildireceğinizi görebilirsiniz:

let arrayDefinition = [];   // Array declaration in JS

Şimdi farklı veri türlerine sahip başka bir dizi tanımlayalım. Aşağıdaki örneklerde kullanacağım:

let array = [1, 2, 3, "hello world", 4.12, true];

Bu kullanım JavaScript'te geçerlidir . Farklı veri türlerine sahip bir dizi: dize, sayılar ve bir boole.

Dilim ()

Dilim () metodu kopyalar yeni bir dizi olarak görev kopyalanmış bir dizi ve geri dönüş belirli bir parçası. Orijinal diziyi değiştirmez.

array.slice(from, until);

  • Gönderen: Dilim dizisi başlamadan gelen eleman dizin
  • Kadar: Diziyibaşka bir öğe dizinine kadar dilimleyin

Örneğin, yukarıdaki diziden ilk üç öğeyi dilimlemek istiyorum. Bir dizinin ilk elemanı her zaman 0'da indekslendiğinden, " 0'dan " dilimlemeye başlıyorum .

array.slice(0, until);

Şimdi işte işin zor kısmı. İlk üç öğeyi dilimlemek istediğimde, until parametresini 3 olarak vermeliyim . Slice () yöntemi son verilen öğeyi içermiyor.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Bu biraz kafa karışıklığı yaratabilir. Bu yüzden ikinci parametreye "kadar" diyorum .

let newArray = array.slice(0, 3);   // Return value is also an array

Son olarak, dilimlenmiş Array'i newArray değişkenine atıyorum . Şimdi sonucu görelim:

Önemli Not: Slice () yöntemi dizeler için de kullanılabilir .

Ekleme ()

Bu işlevin adı, dilim () ' e çok benzer . Bu adlandırma benzerliği genellikle geliştiricilerin kafasını karıştırır. Ek yeri () metodu değiştirir ekleme veya ondan elemanları kaldırarak, bir dizi. Splice ( ) ile nasıl eleman eklenip kaldırılacağını görelim :

Elemanların Kaldırılması

Öğeleri kaldırmak için indeks parametresini ve kaldırılacak öğe sayısını vermemiz gerekir :

array.splice(index, number of elements);

Dizin ,öğeleri kaldırmakiçin başlangıç ​​noktasıdır . Verilen dizinden daha küçük bir dizin numarasınasahip öğelerkaldırılmayacaktır:

array.splice(2);  // Every element starting from index 2, will be removed

İkinci parametreyi tanımlamazsak, verilen dizinden başlayan her eleman diziden çıkarılacaktır:

İkinci bir örnek olarak, ikinci parametreyi 1 olarak veriyorum, böylece indeks 2'den başlayan elemanlar, splice () yöntemini her çağırdığımızda birer birer kaldırılacak :

array.splice(2, 1);

1. aramadan sonra:

2. aramadan sonra:

Bu, artık dizin 2 kalmayana kadar devam edebilir.

Eleman Ekleme

Eleman eklemek için, bunları splice () yöntemine 3., 4., 5. parametre (kaç tane ekleneceğine bağlı olarak) olarak vermemiz gerekir :

dizi.splice (dizin, eleman sayısı, eleman, eleman);

Örnek olarak, dizinin başına a ve b ekliyorum ve hiçbir şeyi kaldırmıyorum:

array.splice(0, 0, 'a', 'b');

Bölünmüş ( )

Slice () ve splice () yöntemleri diziler içindir. Bölme () metodu kullanılır dizeleri . Bir dizeyi alt dizelere böler ve bunları bir dizi olarak döndürür. 2 parametre alır ve her ikisi de isteğe bağlıdır.

string.split(separator, limit);

  • Ayırıcı: Bir dizenin virgül, karakter vb. İle nasıl bölüneceğini tanımlar.
  • Limit: Belirli bir sayı ile bölme sayısını sınırlar

Split () yöntemi için doğrudan çalışmıyor diziler . Bununla birlikte, önce dizimizin elemanlarını bir dizeye dönüştürebiliriz, sonra split () yöntemini kullanabiliriz.

Nasıl çalıştığını görelim.

İlk olarak, dizimizi toString () yöntemi ile bir dizgeye dönüştürüyoruz :

let myString = array.toString();

Şimdi bölünmüş izin myString tarafından , virgül bunları sınırlamak üç alt dizeleri ve bir dizi olarak dönmelerini:

let newArray = myString.split(",", 3);

Gördüğümüz gibi, myString virgülle bölünmüştür. Bölmeyi 3 ile sınırladığımız için, yalnızca ilk 3 öğe döndürülür.

NOT: Bunun gibi bir kullanımımız varsa:array.split("");dizenin her bir karakteri alt dizeler olarak bölünecektir:

Özet:

Dilim ()

  • Bir dizideki öğeleri kopyalar
  • Onları yeni bir dizi olarak döndürür
  • Orijinal diziyi değiştirmez
  • … Verilen dizin: dizi.slice (başlangıç, bitiş) ile dilimlemeye başlar
  • Dilim, "until" dizin parametresi içermiyor
  • Hem diziler hem de dizeler için kullanılabilir

Ekleme ()

  • Diziden eleman eklemek / çıkarmak için kullanılır
  • Bir dizi kaldırılmış öğe döndürür
  • Diziyi değiştirir
  • Eleman eklemek için: dizi.splice (dizin, eleman sayısı, eleman)
  • Öğeleri kaldırmak için: dizi.splice (dizin, öğe sayısı)
  • Yalnızca diziler için kullanılabilir

Bölünmüş ( )

  • Bir dizeyi alt dizelere böler
  • Onları bir dizi içinde döndürür
  • 2 parametre alır, her ikisi de isteğe bağlıdır: string.split (ayırıcı, sınır)
  • Orijinal dizeyi değiştirmez
  • Yalnızca dizeler için kullanılabilir

JavaScript dizileri ve dizeleri için JavaScript programlamayla çalışmayı kolaylaştıran birçok yerleşik yöntem vardır. Ardından, JavaScript Substring Methods hakkındaki yeni makaleme göz atabilirsiniz.

Web geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, beni Youtube'da takip etmekten çekinmeyin !

Okuduğunuz için teşekkürler!