Saya mencari metode penyisipan array JavaScript, dengan gaya:

arr.insert(index, item)

Lebih disukai di jQuery, tetapi implementasi JavaScript akan dilakukan pada saat ini.

Yang Anda inginkan adalah splicefungsi pada objek array asli.

arr.splice(index, 0, item);akan menyisipkan itemke arrdalam indeks yang ditentukan (menghapus 0item terlebih dahulu, yaitu hanya sisipan).

Dalam contoh ini kita akan membuat array dan menambahkan elemen ke dalam indeks 2:

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());

Anda dapat menerapkan Array.insertmetode ini dengan melakukan ini:

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

Maka Anda bisa menggunakannya seperti:

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

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

Selain sambatan, Anda dapat menggunakan pendekatan ini yang tidak akan mengubah array asli, tetapi akan membuat array baru dengan item yang ditambahkan. Anda biasanya harus menghindari mutasi jika memungkinkan. Saya menggunakan operator spread ES6 di sini.

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]

Ini dapat digunakan untuk menambahkan lebih dari satu item dengan sedikit mengubah fungsi untuk menggunakan operator lainnya untuk item baru, dan menyebarkannya di hasil yang dikembalikan juga

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]

insertMetode susunan khusus

1. Dengan beberapa argumen dan dukungan rantai

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

Itu dapat menyisipkan beberapa elemen (seperti yang asli splicelakukan) dan mendukung rantai:

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

2. Dengan argumen tipe array, penggabungan dan dukungan chaining

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

Itu dapat menggabungkan array dari argumen dengan array yang diberikan dan juga mendukung rantai:

["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/

Jika Anda ingin memasukkan beberapa elemen ke dalam array sekaligus, periksa jawaban Stack Overflow ini: Cara yang lebih baik untuk memisahkan array ke dalam array di javascript

Juga ada beberapa fungsi untuk menggambarkan kedua contoh:

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;
}

Akhirnya di sini adalah jsFiddle sehingga Anda dapat melihatnya sendiri: http://jsfiddle.net/luisperezphd/Wc8aS/

Dan ini adalah bagaimana Anda menggunakan fungsinya:

// 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);

Untuk tujuan pemrograman fungsional dan rantai, penemuan Array.prototype.insert()sangat penting. Sebenarnya sambungan bisa sempurna jika mengembalikan array bermutasi, bukan array kosong yang sama sekali tidak berarti. Jadi begini

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>");

Baiklah ok di atas dengan yang Array.prototype.splice()mengubah array asli dan beberapa mungkin mengeluh seperti "Anda tidak boleh memodifikasi apa yang bukan milik Anda" dan itu mungkin ternyata benar juga. Jadi untuk kesejahteraan publik saya ingin memberikan yang lain Array.prototype.insert()yang tidak mengubah array asli. Ini dia;

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));

Saya sarankan menggunakan JavaScript murni dalam hal ini, juga tidak ada metode penyisipan dalam JavaScript, tetapi kami memiliki metode yang merupakan metode Array bawaan yang berfungsi untuk Anda, ini disebut splice ...

Mari kita lihat apa sambatan () ...

Metode splice () mengubah konten array dengan menghapus elemen yang ada dan / atau menambahkan elemen baru.

OK, bayangkan kita memiliki array ini di bawah ini:

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

Kami dapat menghapus 3seperti ini:

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

Ini akan mengembalikan 3, tetapi jika kami memeriksa arr sekarang, kami memiliki:

[1, 2, 4, 5]

Sejauh ini, sangat bagus, tetapi bagaimana kita bisa menambahkan elemen baru ke array menggunakan splice? Mari kita kembalikan 3 di arr ...

arr.splice(2, 0, 3);

Mari kita lihat apa yang telah kita lakukan ...

Kami menggunakan sambungan lagi, tapi kali ini untuk argumen kedua, kami melewati 0 , berarti kami ingin menghapus tidak ada item, tetapi pada saat yang sama, kami menambahkan argumen ketiga yang 3 yang akan ditambahkan pada indeks kedua ...

Anda harus sadar, bahwa kita dapat menghapus dan menambahkan pada saat yang sama, misalnya sekarang kita dapat melakukan:

arr.splice(2, 2, 3);

Yang akan menghapus 2 item pada indeks 2, kemudian menambahkan 3 pada indeks 2 dan hasilnya adalah:

[1, 2, 3, 5];

Ini menunjukkan bagaimana setiap item dalam sambungan bekerja:

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

Tambahkan Elemen Tunggal pada indeks tertentu

//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';

Tambahkan Beberapa Elemen pada indeks tertentu

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

Solusi lain yang mungkin, dengan penggunaan 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);

Berikut ini dua cara:

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

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

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

ATAU

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(" "));

Meskipun ini sudah dijawab, saya menambahkan catatan ini untuk pendekatan alternatif.

Saya ingin menempatkan sejumlah item yang diketahui ke dalam array, ke posisi tertentu, karena item tersebut berasal dari "array asosiatif" (yaitu objek) yang menurut definisi tidak dijamin dalam urutan yang diurutkan. Saya ingin array yang dihasilkan menjadi array objek, tetapi objek berada dalam urutan tertentu dalam array karena array menjamin pesanan mereka. Jadi saya melakukan ini.

Pertama objek sumber, string JSONB diambil dari PostgreSQL. Saya ingin memilikinya diurutkan berdasarkan properti "order" di setiap objek anak.

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);

Karena jumlah node dalam objek diketahui, pertama-tama saya membuat array dengan panjang yang ditentukan:

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

Dan kemudian iterate objek, menempatkan objek sementara yang baru dibuat ke lokasi yang diinginkan dalam array tanpa benar-benar terjadi "penyortiran".

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);

Siapa pun yang masih memiliki masalah dengan yang satu ini dan telah mencoba semua opsi di atas dan tidak pernah mendapatkannya. Saya membagikan solusi saya, ini untuk mempertimbangkan bahwa Anda tidak ingin menyatakan secara eksplisit properti objek Anda vs array.

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;
}

Ini adalah kombinasi dari pengulangan array referensi dan membandingkannya dengan objek yang ingin Anda periksa, konversikan keduanya menjadi string kemudian iterasi jika cocok. Maka Anda bisa menghitung. Ini bisa diperbaiki tetapi di sinilah saya menetap. Semoga ini membantu.

Mengambil keuntungan dari metode pengurangan sebagai berikut:

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

Jadi dengan cara ini kita dapat mengembalikan array baru (akan menjadi cara fungsional yang keren - jauh lebih baik daripada menggunakan push atau splice) dengan elemen yang dimasukkan pada indeks, dan jika indeks lebih besar dari panjang array maka akan dimasukkan pada akhirnya.

Array#splice()adalah cara untuk pergi, kecuali jika Anda benar-benar ingin menghindari mutasi array. Diberikan 2 arrayarr1 dan arr2, inilah cara Anda memasukkan konten arr2ke dalam arr1setelah elemen pertama:

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)

Jika Anda khawatir tentang mutasi array (misalnya, jika menggunakan Immutable.js), Anda dapat menggunakan slice(), bukannya dikacaukan dengansplice() dengan a 'p'.

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

Saya mencoba ini dan berfungsi baik!

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

Indeks adalah posisi di mana Anda ingin menyisipkan atau menghapus elemen. 0 yaitu parameter kedua mendefinisikan jumlah elemen dari indeks yang akan dihapus item adalah entri baru yang ingin Anda buat dalam array. Itu bisa satu atau lebih dari satu.

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

Inilah fungsi kerja yang saya gunakan di salah satu aplikasi saya.

Ini memeriksa apakah item keluar

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("");
};

Dan kemudian saya menyebutnya di bawah ini.

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

Sedikit utas yang lebih tua, tapi saya harus setuju dengan Redu di atas karena sambungan pasti memiliki sedikit antarmuka yang membingungkan. Dan respon yang diberikan oleh cdbajorin bahwa "ia hanya mengembalikan array kosong ketika parameter kedua adalah 0. Jika lebih besar dari 0, ia mengembalikan item yang dihapus dari array" adalah, sementara akurat, membuktikan titik. Maksud fungsinya adalah untuk menyambungkan atau seperti yang dikatakan sebelumnya oleh Jakob Keller, "untuk bergabung atau terhubung, juga untuk mengubah. Anda memiliki array yang sudah ada yang sekarang Anda ubah yang akan melibatkan penambahan atau penghapusan elemen ...." Mengingat, nilai kembali elemen, jika ada, yang dihapus adalah canggung di terbaik. Dan saya 100% setuju bahwa metode ini bisa lebih cocok untuk rantai jika telah mengembalikan apa yang tampak alami, array baru dengan elemen yang ditambahkan ditambahkan. Kemudian Anda bisa melakukan hal-hal seperti ["19", "17"]. Splice (1,0, "18"). Join ("...") atau apa pun yang Anda suka dengan array yang dikembalikan. Fakta bahwa ia mengembalikan apa yang dihapus adalah IMHO hanya omong kosong. Jika maksud dari metode ini adalah untuk "memotong sekumpulan elemen" dan itu hanya niat, mungkin. Sepertinya jika saya tidak tahu apa yang sudah saya hilangkan, saya mungkin punya sedikit alasan untuk menghilangkan elemen-elemen itu, bukan? Akan lebih baik jika berperilaku seperti concat, memetakan, mengurangi, mengiris, dll di mana array baru dibuat dari array yang ada daripada bermutasi array yang ada. Itu semua tidak dapat dilacak, dan itu adalah masalah yang signifikan. Ini agak umum untuk manipulasi array rantai. Sepertinya bahasa perlu menuju ke satu atau ke arah lain dan mencoba untuk berpegang teguh pada itu sebanyak mungkin. Javascript menjadi fungsional dan kurang deklaratif, sepertinya penyimpangan aneh dari norma.

Performa

Hari ini (2020.04.24) Saya melakukan tes untuk solusi yang dipilih untuk array besar dan kecil. Saya mengujinya pada MacOs High Sierra 10.13.6 di Chrome 81.0, Safari 13.1, Firefox 75.0.

Kesimpulan

Untuk semua browser

• secara mengejutkan untuk array kecil solusi non-in-place berdasarkan slicedan reduce(D, E, F) biasanya 10x-100x lebih cepat daripada solusi in-place
• untuk array besar, solusi in-place berbasiskan pada splice(AI, BI, CI) tercepat (kadang-kadang ~ 100x - tetapi itu tergantung dari ukuran array)
• untuk array kecil solusi BI paling lambat
• untuk array besar solusi E paling lambat

Detail

Pengujian dibagi menjadi dua kelompok: solusi in-place (AI, BI, CI) dan solusi non-in-place (D, E, F) dan dilakukan untuk dua kasus

• uji array dengan 10 elemen - Anda dapat menjalankannya DI SINI
• uji array dengan 1.000.000 elemen - Anda dapat menjalankannya DI SINI

Kode yang diuji disajikan dalam cuplikan di bawah ini

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)

Contoh hasil untuk array kecil pada chrome ada di bawah ini