Bir JavaScript dizi ekleme yöntemi, tarzında arıyorum:

arr.insert(index, item)

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

İstediğiniz, spliceyerel dizi nesnesindeki işlevdir.

arr.splice(index, 0, item);ekleyecektir itemiçine arrbelirtilen endeksine (silme 0ilk öğeleri olduğunu, bu sadece bir ekleme var).

Bu örnekte, bir dizi oluşturacağız ve dizine dizin 2'ye 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());

Bunu Array.insertyaparak yöntemi uygulayabilirsiniz :

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

Sonra şöyle kullanabilirsiniz:

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

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

Ekleme dışında, orijinal diziyi değiştirmeyecek, ancak eklenen öğeyle yeni bir dizi oluşturacak olan bu yaklaşımı kullanabilirsiniz. Mümkün olduğunca 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, geri kalan operatörü yeni öğeler için kullanmak üzere işlevi biraz değiştirerek ve bunu döndürülen sonuçta da yayarak birden fazla öğe eklemek için kullanılabilir

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]

Özel dizi insertyöntemleri

1. Birden fazla argüman 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 fazla öğe ekleyebilir (yerel splicegibi) ve zincirlemeyi destekler:

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

2. Dizi tipi argümanlar ile birleştirme ve zincirleme desteği

/* 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 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/

Bir diziye aynı anda birden çok öğe eklemek istiyorsanız, bu Yığın Taşması yanıtına bakın: Bir diziyi javascript içindeki bir diziye eklemenin daha iyi bir yolu

Ayrıca, her iki örneği de gösteren bazı işlevler şunlardı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/

İşlevleri şu şekilde kullanırsı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);

Uygun fonksiyonel programlama ve zincirleme amaçları için bir buluş Array.prototype.insert()esastır. Aslında tam anlamsız bir boş dizi yerine mutasyona uğramış diziyi döndürseydi, splice mükemmel olabilirdi. İş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>");

Array.prototype.splice()Biri ile yukarıdaki ok orijinal diziyi değiştirir ve bazıları "size ait olmayanları değiştirmemelisiniz" gibi şikayet edebilir ve bu da doğru olabilir. Bu yüzden kamu refahı Array.prototype.insert()için orijinal diziyi değiştirmeyen bir tane daha vermek istiyorum . İş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));

Bu durumda saf JavaScript kullanmanızı öneririz , ayrıca JavaScript'te ekleme yöntemi yoktur, ancak sizin için işi yapan yerleşik bir Array yöntemi olan bir yöntemimiz var, buna splice denir ...

Bakalım ne eklenmiş () ...

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

Tamam, aşağıda bu diziye sahip olduğumuzu düşünün:

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

Bu şekilde kaldırabiliriz 3:

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

3 döndürür, ancak şimdi arr kontrol edersek:

[1, 2, 4, 5]

Şimdiye kadar, çok iyi, ama splice kullanarak diziye nasıl yeni bir eleman ekleyebiliriz? Hadi arr içine 3 geri koyalım ...

arr.splice(2, 0, 3);

Bakalım ne yaptık ...

Biz kullanmak splice yine ancak ikinci argümanı bu kez, biz geçmesi 0 , hiçbir öğeyi silmek istediğiniz aracı, ama aynı zamanda, biz ikinci dizinde eklenecektir 3'tür üçüncü argüman ekleyin ...

Aynı anda silebildiğimizi ve ekleyebileceğimizi bilmelisiniz, örneğin şimdi şunları yapabiliriz:

arr.splice(2, 2, 3);

Dizin 2'deki 2 öğeyi siler , ardından Dizin 2'ye 3 ekler ve sonuç şu olur:

[1, 2, 3, 5];

Bu, eklemedeki her öğenin nasıl çalıştığını gösterir:

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

Belirli bir dizine Tek Öğe Ekleme

//Append at specific position(here at index 1)
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


//Append at specific position (here at index 3)
arrName[3] = 'newName1';

Belirli bir dizine Birden Çok Öğe Ekleme

//Append from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where append start, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements

Kullanımı ile bir başka olası çözüm Array#reduce.

var arr = ["apple", "orange", "raspberry"],
    arr2 = [1, 2, 4];

function insert(arr, item, index) {
    arr = arr.reduce(function(s, a, i) {
      i == index ? s.push(item, a) : s.push(a);
      return s;
    }, []);   
    console.log(arr);
}

insert(arr, "banana", 1);
insert(arr2, 3, 2);

İşte iki yol:

const array = [ 'My', 'name', 'Hamza' ];

array.splice(2, 0, 'is');

console.log("Method 1 : ", array.join(" "));

VEYA

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

const array = [ 'My', 'name', 'Hamza' ];
array.insert(2, 'is');

console.log("Method 2 : ", array.join(" "));

Bu daha önce cevaplanmış olmasına rağmen, alternatif bir yaklaşım için bu notu ekliyorum.

Bilinen bir numara koymak istedim tanım olarak sıralanmış düzende olması garanti edilmez bir "ilişkilendirilebilir dizi" (yani bir nesne) çıkan gibi belirli bir konuma, bir dizi içine öğeleri . Elde edilen dizi nesnelerin bir dizi olmak istedim, ama bir dizi onların sırasını garanti beri nesneleri dizide belirli bir sırayla olmak istedim. Bunu ben yaptım.

İlk olarak kaynak nesne, PostgreSQL'den alınan bir JSONB dizesi. Her alt nesnede "sipariş" özelliği tarafından sıralanmış olmasını istedim.

var jsonb_str = '{"one": {"abbr": "", "order": 3}, "two": {"abbr": "", "order": 4}, "three": {"abbr": "", "order": 5}, "initialize": {"abbr": "init", "order": 1}, "start": {"abbr": "", "order": 2}}';

var jsonb_obj = JSON.parse(jsonb_str);

Nesnedeki düğüm sayısı bilindiğinden, önce belirtilen uzunlukta bir dizi oluştururum:

var obj_length = Object.keys(jsonb_obj).length;
var sorted_array = new Array(obj_length);

Ve sonra nesneyi yineleyin, yeni oluşturulan geçici nesneleri gerçekten herhangi bir "sıralama" olmadan dizideki istenen konumlara yerleştirin.

for (var key of Object.keys(jsonb_obj)) {
  var tobj = {};
  tobj[key] = jsonb_obj[key].abbr;

  var position = jsonb_obj[key].order - 1;
  sorted_array[position] = tobj;
}

console.dir(sorted_array);

Hala bununla ilgili sorunları olan ve yukarıdaki tüm seçenekleri deneyen ve hiç anlamayan herkes. Benim çözüm paylaşıyorum, bu açıkça nesnenin dizi vs özellikleri belirtmek istemiyorum dikkate almaktır.

function isIdentical(left, right){
    return JSON.stringify(left) === JSON.stringify(right);
}

function contains(array, obj){
    let count = 0;
    array.map((cur) => {
          if(this.isIdentical(cur, obj)) count++;
    });
    return count > 0;
}

Bu, referans dizisini yinelemenin ve denetlemek istediğiniz nesneyle karşılaştırmanın bir kombinasyonudur, her ikisini de bir dizeye dönüştürür ve ardından eşleşirse yinelenir. O zaman sadece sayabilirsin. Bu iyileştirilebilir ama yerleştiğim yer burası. Bu yardımcı olur umarım.

Azaltma yönteminin kârını aşağıdaki gibi alarak:

function insert(arr, val, index) {
    return index >= arr.length 
        ? arr.concat(val)
        : arr.reduce((prev, x, i) => prev.concat(i === index ? [val, x] : x), []);
}

Bu şekilde, dizine eklenen öğe ile yeni bir dizi (havalı bir işlevsel yol olacak - push veya splice kullanmaktan çok daha iyi) döndürebiliriz ve dizin dizinin uzunluğundan büyükse eklenir sonunda.

Array#splice()diziyi mutasyona uğratmak istemiyorsanız, gidilecek yoldur. 2 diziler Verilen arr1ve arr2burada içeriğini eklemek girerdim, arr2içine arr1ilk öğeden sonra:

const arr1 = ['a', 'd', 'e'];
const arr2 = ['b', 'c'];

arr1.splice(1, 0, ...arr2); // arr1 now contains ['a', 'b', 'c', 'd', 'e']

console.log(arr1)

Eğer, bunun yerine kullanabilirsiniz (Immutable.js kullanılıyorsa, örneğin) dizi mutasyona ilgili endişeleriniz varsa slice(), değil ile karıştırılmamalıdır splice()bir ile 'p'.

const arr3 = [...arr1.slice(0, 1), ...arr2, ...arr1.slice(1)];

Bunu denedim ve iyi çalışıyor!

var initialArr = ["India","China","Japan","USA"];
initialArr.splice(index, 0, item);

Dizin, öğeyi eklemek veya silmek istediğiniz konumdur. 0 yani ikinci parametreler kaldırılacak dizinden öğe sayısını tanımlar dizide yapmak istediğiniz yeni girdilerdir. Bir veya birden fazla olabilir.

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");

İşte uygulamamın birinde kullandığım bir çalışma işlevi.

Bu, öğenin çıkıp çıkmadığını kontrol eder

let ifExist = (item, strings = [ '' ], position = 0) => {
     // output into an array with empty string. Important just in case their is no item. 
    let output = [ '' ];
    // check to see if the item that will be positioned exist.
    if (item) {
        // output should equal to array of strings. 
        output = strings;
       // use splice in order to break the array. 
       // use positition param to state where to put the item
       // and 0 is to not replace an index. Item is the actual item we are placing at the prescribed position. 
        output.splice(position, 0, item);
    }
    //empty string is so we do not concatenate with comma or anything else. 
    return output.join("");
};

Sonra aşağıya çağırıyorum.

ifExist("friends", [ ' ( ', ' )' ], 1)}  // output: ( friends )
ifExist("friends", [ ' - '], 1)}  // output:  - friends 
ifExist("friends", [ ':'], 0)}  // output:   friends: 

Eski bir iş parçacığı biraz, ama yukarıda Redu ile aynı fikirde olmak zorunda çünkü splice kesinlikle kafa karıştırıcı bir arayüze sahiptir. Ve cdbajorin tarafından verilen yanıt, "sadece ikinci parametre 0 olduğunda boş bir dizi döndürür. 0'dan büyükse, diziden kaldırılan öğeleri döndürür" doğruyken noktayı kanıtlar. Fonksiyonun amacı, birleştirmek veya daha önce Jakob Keller tarafından söylendiği gibi, "katılmak ya da bağlanmak, aynı zamanda değiştirmek. Şimdi değiştirdiğiniz ve eleman eklemeyi ya da kaldırmayı içeren yerleşik bir diziniz var ...." kaldırılan elemanların dönüş değeri en iyi ihtimalle gariptir. Ve% 100, bu yöntemin, doğal görünen şeyi döndürdüyse zincirleme için daha uygun olabileceğini kabul ediyorum, eklenmiş öğelerle yeni bir dizi eklendi. Sonra ["19", "17"]. Splice (1,0, "18"). Join ("...") veya döndürülen diziyle istediğiniz her şeyi yapabilirsiniz. Kaldırılan şeyi geri döndürmesi aslında biraz saçma IMHO'dur. Yöntemin amacı "bir dizi öğeyi kesmek" olsaydı ve belki de sadece niyet buydu. Görünüşe göre zaten ne kestiğimi bilmiyorsam, muhtemelen bu unsurları kesmek için çok az nedenim var, değil mi? Var olan diziyi mutasyona uğratmak yerine var olan diziden yeni bir dizinin yapıldığı concat, map, reduce, slice, vs gibi davranırsa daha iyi olur. Bunların hepsi zincirlenebilir ve bu önemli bir konudur. Zincir dizisi manipülasyonu için oldukça yaygındır. Dilin bir ya da diğer yöne gitmesi ve mümkün olduğunca ona bağlı kalması gerekiyor gibi görünüyor. Javascript işlevsel ve daha az beyan edici, sadece normdan garip bir sapma gibi görünüyor.

Verim

Bugün (2020.04.24) Büyük ve küçük diziler için seçilmiş çözümler için testler yapıyorum. Bunları Chrome 81.0, Safari 13.1, Firefox 75.0 üzerinde MacOs High Sierra 10.13.6'da test ettim.

Sonuçlar

Tüm tarayıcılar için

• şaşırtıcı bir şekilde küçük diziler için sliceve reduce(D, E, F) tabanlı yerinde olmayan çözümler genellikle yerinde çözümlerden 10x-100x daha hızlıdır
• büyük diziler için splice(AI, BI, CI) tabanlı yerinde çözümler en hızlıydı (bazen ~ 100x - ancak dizi boyutuna bağlıdır)
• küçük diziler için BI çözümü en yavaştı
• büyük diziler için E çözümü en yavaştı

ayrıntılar

Testler iki gruba ayrıldı: yerinde çözümler (AI, BI, CI) ve yerinde olmayan çözümler (D, E, F) ve iki vaka için gerçekleştirildi

• 10 elemanlı dizi testi - çalıştırabilirsiniz BURAYA
• 1.000.000 elemanlı dizi için test - BURAYA çalıştırabilirsiniz

Test edilen kod aşağıdaki snippet'te sunulur

function AI(arr, i, el) {
  arr.splice(i, 0, el);
  return arr;
}

function BI(arr, i, el) {
  Array.prototype.splice.apply(arr, [i, 0, el]);
  return arr;
}

function CI(arr, i, el) {
  Array.prototype.splice.call(arr, i, 0, el);
  return arr;
}

function D(arr, i, el) {
  return arr.slice(0, i).concat(el, arr.slice(i));
}

function E(arr, i, el) {
  return [...arr.slice(0, i), el, ...arr.slice(i)]
}

function F(arr, i, el) {
  return arr.reduce((s, a, j)=> (j-i ? s.push(a) : s.push(el, a), s), []);
}



// -------------
// TEST
// -------------

let arr = ["a", "b", "c", "d", "e", "f"];

let log = (n, f) => {
  let a = f([...arr], 3, "NEW");
  console.log(`${n}: [${a}]`);
};

log('AI', AI);
log('BI', BI);
log('CI', CI);
log('D', D);
log('E', E);
log('F', F);

This snippet only presents tested code (it not perform tests)

Chrome'da küçük dizi için örnek sonuçlar aşağıdadır