JavaScript Array splice() Method Diziden Öğe Ekleme - Silme

javascript splice() Method, mevcut öğeleri silmek, yeni öğeler eklemek ve bir dizideki öğeleri değiştirmek için JavaScript Array Methodu nasıl kullanacağınızı gösterir.

JavaScript Dizi türü, splice() Methodu bir dizinin ortasına yeni öğeler eklemenizi sağlayan çok güçlü bir method sağlar. Ancak, bu methodu mevcut öğeleri silmek ve değiştirmek için de kullanabilirsiniz.

Not: Bu yöntem, orijinal diziyi değiştirir.

Sözdizimi:

array.splice(index, howmany, item1, ....., itemX)

index: Gereklidir. Öğelerin hangi konumda ekleneceğini / silineceğini belirten bir tamsayı, Dizinin sonundan konumu belirtmek için negatif değerler kullanın.

howmany: İsteğe bağlıdır. Silinecek öğe sayısı. 0 olarak ayarlanırsa, hiçbir öğe silinmeyecektir.

item1, ..., itemX: İsteğe bağlıdır. Diziye eklenecek yeni öğeleri belirtir.

JavaScript Array splice() Methodu Kullanarak Öğeleri Silme


Bir dizideki öğeleri silmek için splice() Methodu aşağıdaki gibi iki argüman iletirsiniz:

Array.splice(index,num);

index argümanı silinecek ilk öğenin konumunu belirtir; Ve num argümanı silinecek öğe sayısını belirler.

Aşağıdaki örneğe bir göz atalım. Diyelim ki, puanlar adında dizimiz olsun 1'den 5'e kadar beş sayı içeren bir dizimiz var.


let puanlar = [1, 2, 3, 4, 5];

Aşağıdaki ifade puanlar dizisinin, ilk öğeden başlayarak dizinin üç öğesini siler.


let deletepuanlar = puanlar.splice(0, 3);

puanlar Dizi şimdi iki elemanları içerir.


console.log(puanlar); //  [4, 5]

Ve deletepuanlar dizi üç öğe içerir.


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

Aşağıdaki şekil puanlar.splice(0,3) yukarıdaki method çağrısını göstermektedir .


javascript array

JavaScript Array splice() Methodu Kullanarak Öğe Ekleme


splice() İkinci bağımsız argüman sıfır olan methoda üç veya daha fazla bağımsız değişken ileterek bir diziye, bir veya daha fazla öğe ekleyebilirsiniz.

Aşağıdaki sözdizimini düşünün:

Array.splice(index, 0, öğe_1, öğe_2,...);

Bu sözdiziminde:

colors dizeyle adlandırılmış üç elemanlı bir diziniz olduğunu varsayarsak.


let colors = ['red', 'green', 'blue'];

Aşağıdaki ifade, ikinci öğeden başlayarak bir öğe ekler.


colors.splice(2, 0, 'purple');

colors Dizi şimdi ikinci pozisyonda eklenen yeni elemanı ile dört elemanı vardır.


console.log(colors); // ["red", "green", "purple", "blue"]

Aşağıdaki şekil yukarıdaki method çağrısını göstermektedir.


javascript array

Aşağıdaki örnekte olduğu gibi splice() methodu dördüncü bağımsız değişkeni, beşinci bağımsız değişkeni vb. İleterek birden fazla öğe ekleyebilirsiniz.

Dizinin birinci indeks'inden itibaren "yellow", "gri" öğelerini ekleyin.


colors.splice(1, 0, 'yellow', 'gri');

console.log(colors); 

// ["red", "yellow", "gri", "green", "purple", "blue"]

JavaScript Array splice() methodu Kullanarak Öğeleri Değiştirme


splice() Methodu aynı anda mevcut elemanlarını silerken Bir diziye yeni öğeler eklemek için izin verir.

Bunu yapmak için, en az üç bağımsız argüman iletirsiniz, Birincisi dizi elemanın indeksi, ikincisi silinecek öğe sayısını belirtir ve üçüncüsü eklenecek öğeleri belirtir.

Silinecek öğe sayısının eklenecek öğe sayısıyla aynı olması gerekmediğini unutmayın.

Aşağıdaki gibi dört öğeli bir dizi programlama diline sahip olduğunuzu varsayalım:


let languages = ['C', 'C++', 'Java', 'JavaScript'];

Aşağıdaki ifade, ikinci öğeyi yenisiyle değiştirir.


languages.splice(1, 1, 'Python');

languages Dizisi halen yeni ikinci bağımsız değişken ile dört elemana sahiptir 'C++' yerine 'Python'.


console.log(languages); 

// ["C", "Python", "Java", "JavaScript"]

Aşağıdaki şekil yukarıdaki yöntem çağrısını göstermektedir.

javascript array

Aşağıdaki gibi splice() methodu daha fazla argüman ileterek bir öğeyi birden çok öğeyle değiştirebilirsiniz :


languages.splice(2,1,'C#','Swift','Go');

Yukarıda'ki ifade, ikinci öğeden bir öğeyi siler, yani languages diziye Java üç yeni öğe ekler. Sonuç aşağıdaki gibidir.


console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]

Bu eğitimde, splice() methodu mevcut öğeleri silmek, yeni öğeler eklemek ve bir dizideki öğeleri değiştirmek için JavaScript Array methodunu nasıl kullanacağınızı öğrendiniz.

Çeşitli Örnekler:


Örnek1: Birinci öğeden sonraki tüm öğeleri silin. Not: Diziler sıfırdan(0) başladığını unutmayın.


var arr = ['A', 'B', 'C', 'D'];  

var removed = arr.splice(1, arr.length-1);

console.log('Original Array: ', arr)
console.log('Removed Elements: ', removed)

// yeni dizi ['A'] 
// silinenler ['B', 'C', 'D']

Örnek2: Birinci elemandan sonraki tüm elemanları değiştirin.


var arr = ['A', 'B', 'C', 'D'];

var removed = arr.splice(1, arr.length-1, 'X', 'Y', 'Z');

console.log('Original Array: ', arr)
console.log('Removed Elements: ', removed)

// yeni dizi ['A', 'X', 'Y', 'Z'] 
// silinen öğeler ['B', 'C', 'D']

Örnek3: İkinci Argümana 0 (sıfır) elemanı iletin(Eleman silinmez) ve 2. dizine 2 eleman ekleyin


var arr = ['A', 'B', 'C', 'D'];

var removed = arr.splice(2, 0, 'X', 'Y');

console.log('Original Array: ', arr)
console.log('Removed Elements: ', removed)

// yeni dizi ['A', 'B', 'X', 'Y', 'C', 'D']
// sıfır silinen []

Örnek4: Belirli bir dizini takip eden tüm öğeleri silin.


var arr = ['A', 'B', 'C', 'D', 'E', 'F'];

index = 3

var removed = arr.splice(index);

console.log('Original Array: ', arr)
console.log('Removed Elements: ', removed)

// yeni dizi ['A', 'B', 'C']
// silinenler ['D', 'E', 'F']

Çeşitli örnekler


var array=[1,2,3,4,5];

console.log(array.splice(2));
// Çıktı: [3, 4, 5], silinen öğeleri yeni bir dizi nesnesi olarak döndürdü.
 
console.log(array);
// Çıktı: [1, 2], orijinal dizi değiştirildi.
 
var array2=[6,7,8,9,0];
console.log(array2.splice(2,1));
// Çıktı: [8]
 
console.log(array2.splice(2,0));
//Çıktı: [] , sıfır argüman nedenle öğe silinmedi
 
console.log(array2);
// Çıktı: [6,7,9,0]
 
var array3=[5,6,7,8,9];
console.log(array3.splice(2,1,"Hello","World"));
// Çıktı: [7]
 
console.log(array3);
// Çıktı: [5, 6, "Hello", "World", 8, 9]
 
           -5 -4 -3 -2 -1
            |  |  |  |  |
var array4=[16,17,18,19,20];
             |  |  |  |  |
             0  1  2  3  4
 
console.log(array4.splice(-2,1,"webcebir"));
// Çıktı:  [19]
 
console.log(array4);
// Çıktı: [16, 17, 18, "webcebir", 20]

Bağımsız Argüman (1) NaN ise, 0'mış gibi kabul edilir.


var array5=[21,22,23,24,25];

console.log(array5.splice(NaN,4,"NaN 0 Olarak İşlem Görür"));
// Çıktı: [21,22,23,24]
 
console.log(array5);
// Çıktı: ["NaN 0 Olarak İşlem Görür",25]

Bağımsız Argüman (2), 0'dan küçükse veya NaN'a eşitse, 0'mış gibi değerlendirilir.


var array6=[26,27,28,29,30];
console.log(array6.splice(2,-5,"Hello"));
// Çıktı:Boş dizi []
 
console.log(array6);
// Çıktı: [26,27,"Hello",28,29,30]
 
console.log(array6.splice(3,NaN,"World"));
// Çıktı:Boş dizi []
 
console.log(array6);
// Çıktı: [26,27,"Hello","World",28,29,30]

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

8591

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 KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML AÇIKLAMA SATIRI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.