Soru Belirli bir dizindeki bir diziye öğe nasıl eklenir?


Ben bir tarzı olarak Javascript dizi ekleme yöntemini arıyorum:

arr.insert(index, item)

Tercihen jQuery'de, ancak herhangi bir Javascript uygulaması bu noktada yapılacaktır.


2081
2018-02-25 14:29


Menşei


JQuery'nin DOM ve olay manipulasyon kütüphanesi olduğunu, kendi dilinde bir dil olmadığını unutmayın. Dizi manipülasyonu ile ilgisi yok. - Jacque Goupil
api.jquery.com/jQuery.inArray DOM veya etkinliklerle ilgisi yoktur. jQuery, tarayıcı JS geliştirmesi için karışık bir araç setine dönüşerek insanların her şey için bir yönteme sahip olmasını bekliyor. - Tim
@Tim, Ama hala kendi dilinin bir dili değil (hala burada "jQuery'de iki sayıyı nasıl toplamları" sorusu var) - Victor
@Victor No, ve asla olmayacak. jQuery yararlı ve alakalıydı, ama günü vardı. - Tim


Cevaplar:


Ne istiyorsun splice yerel dizi nesnesinde işlev.

arr.splice(index, 0, item); ekleyecek item içine arr belirtilen dizinde (silme 0 önce öğeler, yani, sadece bir ek).

Bu örnekte bir dizi oluşturacağız ve ona bir öğe ekleyeceğiz:

var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";

console.log(arr.join());
arr.splice(2, 0, "Lene");
console.log(arr.join());


3447
2018-02-25 14:32



Teşekkürler, ben sormak için aptalca hissederdim ama şimdi cevap yok biliyorum! Aynı işlev için daha çok aranabilir bir terim ortak kullanımdayken neden yeryüzünü aramaya karar verdiler ?! - tags2k
@ tags2k: çünkü işlev öğeleri eklediğinden daha fazlasını yapar ve adı zaten perl olarak kuruldu? - Christoph
doc: developer.mozilla.org/en/JavaScript/Guide/... - Dingo
ek yeri kutu ekle, ama aynı sıklıkta değil. Örneğin: arr.splice(2,3) indeks 2'den başlayarak 3 elementi kaldıracaktır. 3. 3. parametreyi geçmeden hiçbir şey takılmamıştır. Yani isim insert() adalet yapmıyor da. - EBarr
Bence "ekleme" terimi anlam ifade ediyor. Ekleme, değiştirmek ya da bağlanmak için de demektir. Öğelerin eklenmesi veya kaldırılmasını içeren "değişiyor" olan yerleşik bir diziniz var. Dizinin nerede başlayacağını, sonra kaç tane eski öğenin kaldırılacağını (varsa) ve son olarak isteğe bağlı olarak eklenecek yeni öğelerin listesini belirtirsiniz. Splice da tabii ki harika bir bilim kurgu terimidir. - Jakub Keller


Uygulayabilirsiniz Array.insert Bunu yaparak yöntem:

Array.prototype.insert = function ( index, item ) {
    this.splice( index, 0, item );
};

Sonra onu şöyle kullanabilirsiniz:

var arr = [ 'A', 'B', 'D', 'E' ];
arr.insert(2, 'C');

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]

208
2017-10-03 14:26



Sahip olmadığınız nesneleri değiştirmeyin - Pavlo
Array'ın sahibi kim? Ecma komut dosyası yazarı? Object.defineProperty ile yaparsanız Pavlo'nun düşündüğü kadar kötü olmayabilir. - Capaj
Birden fazla öğe eklemek için kullanabilirsiniz Array.prototype.insert = function (index, items) { this.splice.apply(this, [index, 0].concat(items)); } - Ryan Smith
Diziye bir şeyler eklerken karşılaşılan problem, (arr) {i} için yaptığınız zaman fonksiyonun bir eleman olarak görünmesidir. - rep_movsd
Pavlo'nun söylediği şey şudur: eğer yerel ekleme yöntemi uygulanmışsa veya şirketinizde 2 veya daha fazla geliştirici, dizi nesnesi için ekleme yaratma fikriyle aynı şekilde gelecektir, ancak uygulama farklı olacaktır ... Peki, siz fikir edin. - Adam Moszczyński


Özel dizi insert yöntemleri

1. Çoklu argümanlar ve zincirleme desteği ile

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    this.splice.apply(this, [index, 0].concat(
        Array.prototype.slice.call(arguments, 1)));
    return this;
};

Birden çok öğe ekleyebilir (yerel olarak splice zincirleme yapar ve destekler:

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);
// ["b", "X", "Y", "Z", "c"]

2. Dizi tipi argümanların birleştirilmesi ve desteklenmesi

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    index = Math.min(index, this.length);
    arguments.length > 1
        && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
        && this.insert.apply(this, arguments);
    return this;
};

Verilen diziyle argümanlardan gelen dizileri birleştirebilir ve ayrıca zincirlemeyi destekler:

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");
// "a-b-V-W-X-Y-Z-c-d"

DEMO:  http://jsfiddle.net/UPphH/


64
2018-03-25 17:45



Bu sürümde argümanlarda bir tane bulduğunda diziyi birleştirmenin kompakt bir yolu var mı? - Nolo
@Nolo Evet, güncellenmiş cevapta bulabilirsiniz. - VisioN
İlk sonucu anlamıyorum ["b", "X", "Y", "Z", "c"]. Neden olmasın "d" dahil? Bana öyle geliyor ki, eğer ikinci parametre olarak 6'yı koyarsanız slice() Belirtilen dizinden başlayarak dizide 6 eleman vardır, sonra geri dönüş değerinde 6 öğenin tümünü almalısınız. (Doktor diyor ki howMany bu parametre için.) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... - Alexis Wilke
Aslında, 3 veya daha fazla bir indeks kullanırsam, çıktıda hiçbir şey alamıyorum (vaka 1., FireFox) ["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(3, 3); => [ ] - Alexis Wilke
@AlexisWilke Kullandığım ilk örnekte slice yöntem ve değil spliceYorumda bahsettiğiniz İkinci parametre slice (adlandırılmış end) Ekstraksiyonu sonlandırmak için sıfır tabanlı dizin. slice kadar değil ama dahil değil end. Bundan sonra insert var ["a", "b", "X", "Y", "Z", "c", "d"], olan slice indisleri ile öğeleri ayıklar 1 kadar 6, yani "b" için "d" ama dahil değil "d". Mantıklı geliyor? - VisioN


Eklemeden başka, orijinal diziyi değiştirmeyecek, ancak eklenen öğeyle yeni bir dizi oluşturacak olan bu yaklaşımı kullanabilirsiniz. Mümkün olduğunda genellikle mutasyondan kaçınmalısınız. Burada ES6 forma operatörü kullanıyorum.

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, newItem) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted item
  newItem,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10)

console.log(result)
// [1, 10, 2, 3, 4, 5]

Bu, yeni öğeler için geri kalan operatörü kullanmak için işlevi biraz değiştirerek birden fazla öğe eklemek için kullanılabilir ve döndürülen sonuçta bunu yayma

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, ...newItems) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted items
  ...newItems,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10, 20)

console.log(result)
// [1, 10, 20, 2, 3, 4, 5]


54
2017-07-04 09:18



Tam olarak aradığım cevap. teşekkür ederim! - Alex Alexeev
Bunu yapmanın iyi ve güvenli bir yolu var mı? Bunu soruyorum çünkü bu çok zarif ve özlü görünüyor ama başka hiçbir cevap buna değmiyor. Çoğu prototip nesnesini değiştirir! - Harsh Kanchina
@HarshKanchina Muhtemelen cevapların çoğu ES6 öncesi olduğundan, ancak bu yaklaşım benim deneyimimden şu anda çok yaygın. - Gaafar


Bir diziye birden fazla elemanı bir kerede eklemek istiyorsanız, bu Yığın Taşması yanıtına bakın: Bir diziyi javascript'te bir diziye eklemenin daha iyi bir yolu

Ayrıca, her iki örneği de gösteren bazı işlevler de vardır:

function insertAt(array, index) {
    var arrayToInsert = Array.prototype.splice.apply(arguments, [2]);
    return insertArrayAt(array, index, arrayToInsert);
}

function insertArrayAt(array, index, arrayToInsert) {
    Array.prototype.splice.apply(array, [index, 0].concat(arrayToInsert));
    return array;
}

Sonunda burada bir jsFiddle var, böylece kendiniz için görebilirsiniz: http://jsfiddle.net/luisperezphd/Wc8aS/

Ve bu işlevleri nasıl kullanacağınız:

// if you want to insert specific values whether constants or variables:
insertAt(arr, 1, "x", "y", "z");

// OR if you have an array:
var arrToInsert = ["x", "y", "z"];
insertArrayAt(arr, 1, arrToInsert);

33
2017-08-30 04:37



İnsertAt () insertArrayAt () öğesini tek öğeli arrayToInsert oluşturduktan sonra çağırmak için daha iyi bir şey yapmaz mı? Bu, aynı kodun tekrarını önler. - Matt Sach
Bu, 'başvurma' ne zaman kullanılacağına dair harika bir örnektir - CRice
Eklentinin bu dizindeki öğeleri de kaldırma yeteneğinin avantajlarından yararlanmak için bu yönteme bir removeCount parametresi ekledim: Array.prototype.splice.apply (array, [index, removeCount || 0] .concat (arrayToInsert)); - CRice


Doğru fonksiyonel programlama ve zincirleme amaçları için Array.prototype.insert() gereklidir. Gerçekte, tamamen anlamsız bir boş dizi yerine mutasyona uğramış diziyi geri döndürmüş olsaydı, eklemeler mükemmel olurdu. Yani işte gidiyor

Array.prototype.insert = function(i,...rest){
  this.splice(i,0,...rest)
  return this
}

var a = [3,4,8,9];
document.write("<pre>" + JSON.stringify(a.insert(2,5,6,7)) + "</pre>");

Peki tamam yukarıdaki ile Array.prototype.splice() Biri orijinal diziyi değiştirir ve bazıları "size ait olmayan şeyleri değiştirmemelisiniz" gibi şikayet edebilir ve bu da doğru olduğu ortaya çıkabilir. Yani kamu refahı için başka bir vermek istiyorum Array.prototype.insert() orijinal diziyi mutasyona uğratmaz. İşte gidiyor;

Array.prototype.insert = function(i,...rest){
  return this.slice(0,i).concat(rest,this.slice(i));
}

var a = [3,4,8,9],
    b = a.insert(2,5,6,7);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));


14
2018-05-13 23:22



"tamamen anlamsız bir boş dizi" - ikinci parametre 0 olduğunda yalnızca boş bir dizi döndürür. 0'dan büyükse, diziden kaldırılan öğeleri döndürür. Bir prototip eklediğiniz göz önüne alındığında, ve splice orjinal diziyi değiştirir, "uygun işlevsel programlama" nın etrafındaki herhangi bir yere ait olduğunu sanmıyorum splice. - cdbajorin
Buraya eklemekten bahsediyoruz ve Array.prototype.splice () 'ın ikinci parametresi sıfır olmalıdır. Ve döndürdüğü şeyin "hiçbir şeyi silmedim" den başka bir anlamı yoktur ve onu bir öğeyi eklemek için kullandığımızdan bu bilgiyi zaten almış oluruz. Orijinal diziyi değiştirmek istemiyorsanız, bunu iki Array.prototype.slice () ve bir Array.prototype.concat () işlemi ile yapabilirsiniz. Sana kalmış. - Redu
İkinci uygulamanız bu sayfanın en temiz halidir ve sıfır oyunuz var. Lütfen benimkini al ve iyi işlere devam et. (sadece prototipi mutasyona sokmaktan kaçınmalısınız, ancak bunu zaten biliyorsunuz) - NiKo
Geri kalan parametrenin yeni ECMA 6 olduğunu belirtmekte fayda var.developer.mozilla.org/en/docs/Web/JavaScript/Reference/... ) - Geza Turi


Saf kullanmanı öneririm JavaScript Bu durumda, JavaScript'de de ekleme yöntemi yoktur, ancak bir yöntemimiz var. yerleşik dizi sizin için işi yapan yöntem, denir ek yeri...

Bakalım ne var ) (Splice...

Splice () yöntemi, bir dizinin içeriğini kaldırarak değiştirir   Mevcut elemanlar ve / veya yeni elemanlar ekleyerek.

Tamam, bu dizinin aşağıda olduğunu düşünelim:

const arr = [1, 2, 3, 4, 5];

Çıkarabiliriz 3 bunun gibi:

arr.splice(arr.indexOf(3), 1);

3 tane dönecek, ama eğer arr'ı kontrol edersek, bizde:

[1, 2, 4, 5]

Şimdiye kadar, çok iyi, ama ekleme kullanarak dizi için yeni bir öğe nasıl ekleyebiliriz? 3 arr geri koyalım ...

arr.splice(2, 0, 3);

Yaptıklarımızı görelim ...

Kullanırız ek yeri yine, ama ikinci argüman için bu kez geçtik 0, herhangi bir öğeyi silmek istediğimiz anlamına gelir, ancak aynı zamanda, ikinci endekste eklenecek olan üçüncü argümanı ekliyoruz ...

Farkında olmalısın, yapabiliriz silmek ve eklemek aynı zamanda, örneğin şimdi yapabiliriz:

arr.splice(2, 2, 3);

Hangisi silinecek? 2 eşya dizinde 2, sonra ekle 3 dizinde 2 ve sonuç şöyle olacak:

[1, 2, 3, 5];

Eklemdeki her öğenin nasıl çalıştığını gösterir:

array.splice (start, deleteCount, item1, item2, item3 ...)


7
2017-12-25 13:04