Tambahkan array ke array javascript

Berikut adalah 5 cara untuk menambahkan item ke akhir array.

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

Mutatif

Ini akan mengubah array asli

const array = ['🦊'];

array.push('🐴');
array.splice(array.length, 0, '🐴');
array[array.length] = '🐴';

// Result
// ['🦊', '🐴']

Non Mutatif

Ini akan membuat larik baru dan larik asli tetap tidak berubah

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

3 Cara Menambahkan Item ke Array (Mutatif)

Mari kita lihat 3 cara kita dapat mendorong item ke array. Ini akan menjadi cara mutatif, artinya akan mengubah array asli

dorongan

Cara termudah untuk menambahkan item ke akhir array adalah dengan menggunakan

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

Perhatikan saya mengatakan item dan bukan hanya item 😉 Yup, Anda dapat mendorong banyak item

const zoo = ['🦊', '🐮'];

zoo.push('🐧', '🐦', '🐤');

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

Tapi melewati item individual sangat membosankan, untungnya kita bisa menggunakan fitur penyebaran ES6. Ini memungkinkan kita untuk melewatkan array dan kemudian menggunakan sintaks

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

const zoo = ['🦊', '🐮'];
const birds = ['🐧', '🐦', '🐤'];

zoo.push(...birds);

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

sambatan

Sekilas, metode ini terlihat sangat membutuhkan 😂 karena kami memberikan banyak argumen. Itu karena metode ini dapat menambah ATAU menghapus item array. Oleh karena itu, kami harus memberikan sedikit lebih banyak info untuk melakukan tugasnya. Mari kita lihat parameter yang dibutuhkan

const zoo = ['🦊', '🐮'];

zoo.splice(
  zoo.length, // We want add at the END of our array
  0, // We do NOT want to remove any item
  '🐧', '🐦', '🐤', // These are the items we want to add
);

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

panjangnya

Saya pikir ini adalah cara paling pintar dari semua metode. Itu salah satu cara yang tidak pernah terlintas di benak saya. Jadi mari kita pahami mengapa ini berhasil

Array dalam JavaScript adalah indeks nol. Jadi item pertama memiliki indeks

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

const zoo = ['🦊', '🐮'];

// '🦊' | Index = 0
// '🐮' | Index = 1

Notasi braket dalam array memungkinkan kita untuk mengambil item TETAPI juga memungkinkan kita mengganti item itu

const zoo = ['🦊', '🐮'];

// Retrieve
zoo[0]; // Returns '🦊'

// Override
zoo[1] = '🥩';

console.log(zoo); // ['🦊', '🥩']; **

// ** JUST JOKING 😂
// ...I promise no animals were hurt in this blog post 😬

Hal yang menarik adalah

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

const zoo = ['🦊', '🐮'];
const length = zoo.length; // 2

zoo[length] = '🐯';

console.log(zoo); // ['🦊', '🐮', '🐯']

2 Cara Menambahkan Item ke Array (Non Mutatif)

Baiklah, mari beralih ke menambahkan item ke array dengan cara non mutatif. Di mana larik asli akan tetap tidak tersentuh dan larik baru akan berisi tambahan

concat

Metode ini dimaksudkan untuk menggabungkan array. Jadi kita bisa menggunakannya untuk menambahkan banyak item dengan mengirimkan array

const ocean = ['🐙', '🦀'];
const fish = ['🐠', '🐟']; // Array of multiple items

const aquarium = ocean.concat(fish);

aquarium; // ['🐙', '🦀', '🐠', '🐟']

// Original Array Not Affected
ocean; //  ['🐙', '🦀']

Tapi itu tidak hanya menerima array sebagai parameternya, itu juga menerima nilai

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

menyebar

Kita dapat menggunakan sintaks spread untuk memperluas setiap elemen array menjadi elemen individual. Aplikasi yang sangat populer adalah menggunakan spread untuk membuat salinan atau menggabungkan dua array terpisah. Ini mirip dengan efek

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

Namun, jika kita tidak menggunakan spread, kita malah akan mendapatkan array bersarang, yang bukan itu yang kita inginkan

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

Jadi saya bisa menggunakannya untuk menggabungkan array, tetapi kita juga bisa meneruskan nilai individual, seperti yang kita lakukan dalam membuat array biasa

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

Bermutasi Atau Tidak Bermutasi?

Jadi pertanyaannya adalah, untuk bermutasi atau tidak bermutasi 🎭 Itu sangat tergantung pada kasus penggunaan Anda. Saat Anda bekerja di Redux atau arsitektur manajemen negara apa pun, semuanya tentang kekekalan. Jadi metode non-mutatif akan menjadi pilihan Anda. Selain itu, gagasan kekekalan sering lebih disukai karena dianggap sebagai praktik yang baik untuk menghindari efek samping -- yang merupakan dasar dari pemrograman fungsional dan menghasilkan fungsi murni

Tapi apakah itu berarti kita tidak boleh menggunakan metode mutatif? . Karena ada kalanya kekekalan tidak menjadi masalah. Ambil contoh sederhana ini

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

Dalam kasus ini, mengapa tidak menggunakan metode mutatif. Tujuan saya untuk menambahkan nilai adalah

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

Uji kinerja. Dorong vs Concat

Masukan Komunitas

@DigianPaul. Bermutasi atau Tidak Bermutasi? . Tapi, untuk menyederhanakan, misalkan array asli masih dibutuhkan di tempat lain? . Jika tidak diperlukan, Anda dapat memutasikannya secara langsung, yang biasanya lebih cepat daripada membuat salinan

Mengatakan ada struktur data di mana membuat salinan array sama murahnya dengan memutasikannya (atau sebanding dengan murahnya) dan itu sangat keren tetapi tidak begitu tersebar luas di komunitas JavaScript

Itu disebut "Struktur data persisten" dan sangat berguna dalam banyak kasus. Tapi mereka cukup rumit untuk dirancang

Mereka membuat sederhana untuk mengimplementasikan fungsionalitas seperti undo-redo misalnya. Tapi mereka benar-benar bersinar dalam pemrograman fungsional dan juga dalam aplikasi multithread

@KClarkADSTech. Anda juga dapat menambahkan dengan menggunakan

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

const zoo = ['🦊', '🐮'];

zoo.push('🐧', '🐦', '🐤');

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

@stojakovic99. Salah satu cara hacky untuk menambahkan item kosong ke array (jika kita bahkan bisa menyebutnya menambahkan item ke array, menurut saya istilah yang lebih tepat adalah mengubah ukuran) adalah. (Namun Anda seharusnya tidak pernah melakukan ini. )

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

@devhammed. Anda juga dapat menggunakannya untuk mengecilkan array

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

@johnkazer. Poin tentang tidak bermutasi jika Anda membutuhkan array di tempat lain adalah poin yang bagus, terutama untuk pemrograman paralel atau bersamaan. Bahkan dalam JavaScript utas tunggal Anda mungkin telah melewati array dengan referensi dan mengubah hal-hal secara tidak terduga. Umumnya saya menemukan non-mutasi menjadi metode yang lebih santai

Bagaimana Anda menambahkan array ke array lain?

Bisakah Anda menambahkan dua larik dalam JavaScript?

Bisakah Anda meletakkan array di dalam array JavaScript?