Mengapa disebut shift dan unshift javascript?

Array adalah aspek penting dari bahasa pemrograman apa pun, karena kita dapat menyimpan data di dalamnya dari angka, string, objek, dan bahkan array lainnya. Mampu bekerja dengan array secara efektif adalah keterampilan penting bagi pengembang mana pun, apa pun bahasa pemrogramannya. JavaScript menyediakan banyak metode untuk mempermudah pengerjaan array

Kita dapat mendefinisikan array dengan cara berikut

Deklarasi larik

Array adalah salah satu tipe data yang ada di JavaScript. Mereka digunakan untuk menyimpan data dari tipe data apa pun, tetapi tidak seperti objek di JavaScript (mirip dengan kamus di Python), indeks setiap elemen penting

Meskipun larik dapat digunakan untuk menyimpan data jenis apa pun, sering berguna untuk menyimpan data serupa dalam larik, seperti larik pengguna yang mendaftar untuk acara atau larik item agenda. Dari cuplikan kode di atas, saya telah menetapkan dua metode yang dapat Anda gunakan

  • Menempatkan semuanya dalam tanda kurung siku
  • Menggunakan konstruktor Array

Metode kedua jarang digunakan, tetapi juga berguna. Mari selami tujuan utama artikel ini. Saya senang untuk memandu Anda melalui beberapa metode ini. Saya harap Anda juga bersemangat untuk memulai

Foto oleh Japheth Mast di Unsplash

Metode Larik

Ada beberapa metode yang dimiliki array JavaScript. Artikel ini akan memandu Anda melalui beberapa di antaranya

Saya akan mulai dengan yang paling umum

Sebagian besar waktu, diberikan sebuah array, Anda ingin menambahkan elemen ke akhir atau awal, menghapus elemen pertama atau terakhir. Menerapkan yang berikut ini agak mudah

Metode mendorong

Metode pertama yang akan saya bicarakan adalah metode push. Metode ini hanya menambahkan elemen ke akhir array dan mengembalikan panjang array usersData setelah menambahkan elemen. Cuplikan kode di atas mendefinisikan array usersData, yang meniru hasil panggilan database/API

Kemudian kami membuat pengguna baru, dan kami ingin menambahkan pengguna baru ini ke usersData kami. Alih-alih melakukan hardcoding ID, salah satu cara untuk mengatasinya tanpa bekerja dengan database sebenarnya adalah dengan mengatur nilai ID menjadi panjang array sebelum menambahkan elemen plus satu

Metode pop

Metode pop_ cukup menghapus elemen terakhir dari array dan mengembalikan elemen itu

Cuplikan kode di atas mendefinisikan larik usersData yang meniru hasil panggilan database/API. Kemudian, kami menghapus elemen terakhir dari data

Metode pergeseran

Metode shift_, tidak seperti metode pop, hanya menghapus elemen pertama dari array dan mengembalikan elemen itu. Cuplikan kode di atas mendefinisikan array usersData, yang meniru hasil panggilan database/API

Metode tidak bergeser

Metode push0, tidak seperti metode push, cukup menambahkan elemen ke awal array dan mengembalikan panjang array baru. Cuplikan kode di atas mendefinisikan array usersData yang meniru hasil panggilan database/API. Saya kemudian membuat objek pengguna baru, yang ingin kami tambahkan ke awal array

Metode ES6

ES6

ES6, yang merupakan kependekan dari ECMAScript 6, adalah versi JavaScript yang dirilis pada Juni 2015. Tampaknya para pengembang yang memelihara JavaScript seperti bulan kelahiran saya karena pada saat itulah sebagian besar versi mereka dirilis

Jika Anda baru mempelajari JavaScript, ES6 akan membuat hidup Anda jauh lebih mudah. Ini tidak hanya menyediakan metode array, tetapi juga menyediakan hal-hal seperti destrukturisasi, fungsi panah, cara yang lebih baik untuk menulis kode berorientasi objek dan modular, antara lain

Sebagian besar metode larik ES6 ini menggunakan fungsi panggilan balik, dan akibatnya disebut metode larik orde tinggi. Fungsi panah sangat umum dalam fungsi tingkat tinggi, karena menyederhanakan kode kita

Metode peta

Jika ada metode larik ES6 yang akan Anda gunakan hampir setiap saat, inilah metode ini. Ini adalah metode larik terbaik saya dalam JavaScript dan Python. Meskipun beberapa pengembang JavaScript telah mencoba menerapkan push3 sebelum ES6, metode standar push3 diperkenalkan di JavaScript di ES6. Dalam cuplikan kode di bawah ini, saya menerapkan push_3 dalam tiga cara

  • Menggunakan fungsi JavaScript biasa. Di sini saya meneruskan dua argumen ke fungsi, pertama push6, yang merupakan elemen yang ingin saya gunakan untuk melakukan sesuatu, dan argumen opsional, push7, yang merupakan indeks dari setiap elemen
  • Menggunakan fungsi panah. Saya juga menyampaikan dua argumen seperti pada contoh pertama, tetapi fungsi panggilan balik di sini adalah fungsi panah, yang membuat kode jauh lebih rapi
  • Saya juga menggunakan fungsi panah, tetapi saya hanya menyampaikan satu argumen — item yang ingin saya ulangi. Ini berguna jika saya tidak membutuhkan index

Jika saya ingin mengimplementasikan fungsi ini tanpa metode ES6, saya harus mengulang array secara native menggunakan loop push8 standar. push_9. Namun berkat ES6, kami bisa melakukan ini

Metode penyaringan

Metode usersData_0 adalah metode array orde tinggi lainnya yang harus Anda gunakan hari ini. Apa yang usersData_0 lakukan itu sederhana. Diberikan array elemen, kami ingin mengembalikan array baru dari array awal, di mana kondisi tertentu adalah usersData2. Fungsi panggilan balik harus mengembalikan boolean, dan elemen yang mematuhi kondisi tersebut adalah yang akan ada di array baru

Metode pengurangan

Ini sangat bagus, dan menurut saya ini yang paling sulit dari semua metode yang telah saya sebutkan sejauh ini. Apa yang dilakukan metode ini adalah menggunakan callback tertentu untuk mengurangi array. Misalnya, jika saya ingin menemukan jumlah semua elemen dalam array atau produk dari semua elemen dalam array, metode ini adalah metode yang bagus untuk digunakan, daripada mengulang dan menambah jumlah atau produk awal.

Metode forEach

Metode ini mirip dengan metode push3, tetapi dalam kasus ini, metode ini tidak mengembalikan array baru. Ini lebih dari loop push_8 biasa dalam JavaScript tetapi dengan cara yang lebih bersih dan lebih canggih. Dibutuhkan tiga parameter, seperti yang mungkin Anda ketahui. Yang pertama adalah item dalam array, yang kedua adalah indeks item (yang bersifat opsional), dan yang ketiga adalah objek array yang dimiliki oleh elemen saat ini.

Dalam cuplikan kode di bawah ini, saya menggunakan usersData_5 untuk memanipulasi Document Object Model (DOM), yang cukup keren. Saya dapat mengupdate array, dan item daftar yang dirender di DOM akan diubah secara otomatis

Metode concat

Ada kasus di mana Anda ingin menggabungkan atau menggabungkan dua atau lebih array menjadi satu. Kemudian, fungsi ini akan sangat berguna. Memanggil usersData_6 pada dua larik menghasilkan larik baru yang terdiri dari gabungan dua larik

Setiap dan beberapa metode

Metode-metode ini berguna jika Anda ingin mengetahui apakah semua elemen dalam array melewati suatu kondisi dan jika beberapa elemen dalam array masing-masing melewati suatu kondisi

Metode lain termasuk

Metode pengisian

Mengisi setiap elemen dalam larik dengan nilai yang diteruskan sebagai parameter. usersData7 // usersData8

Metode entri

Ini membuat array berperilaku seperti objek dengan pasangan kunci-nilai, di mana kuncinya adalah indeks dan nilainya adalah elemennya

Metode menemukan

Metode ini mengembalikan elemen pertama dalam larik yang lulus ujian. Dibutuhkan fungsi panggilan balik, yang mengembalikan boolean

Metode sambungan

Metode ini mengambil parameter dalam jumlah tak terbatas — dua yang pertama adalah indeks tempat Anda ingin mulai menyisipkan dan menghapus elemen dan jumlah elemen yang ingin Anda hapus, masing-masing — dan parameter yang tersisa adalah elemen yang ingin Anda tambahkan ke . Ini mengembalikan array dari elemen yang dihapus dan memutasi array

Metode sebaliknya

Metode sebaliknya membalikkan array. Perhatikan bahwa itu memutasikannya, artinya ia mengubah array alih-alih hanya membuat salinannya

Metode bergabung

Metode ini mengubah array menjadi array menjadi string. Perhatikan bahwa itu tidak memutasi array - itu hanya membuat salinannya. Kebalikan dari metode ini adalah metode usersData_9, yang mengubah string menjadi array. Dibutuhkan string sebagai parameter, yang akan digunakan untuk menggabungkan setiap elemen array

Metode datar

Metode usersData_0 adalah metode baru yang ditambahkan di ES11 (ES11 dibuat Juni ini). Metode ini meratakan array

Katakanlah kita memiliki larik yang berisi larik, dan kami ingin menemukan jumlah dan produk dari setiap elemen dalam larik di dalam larik. Maksud saya adalah jika saya memiliki array yang didefinisikan oleh usersData1, jumlahnya harus usersData2 dan produknya harus usersData3

Salah satu cara untuk melakukannya adalah dengan mengulang melalui array awal dan mengulang melalui setiap elemen dan mendapatkan jumlah dan hasil kali

Dengan ES6, saya dapat mengulang array awal dan menggunakan metode usersData4 untuk mendapatkan jumlah dan produk dari setiap elemen dalam array utama - menggunakannya untuk mendapatkan jumlah total dan produk. Tetapi dengan larik usersData0, saya dapat meratakan larik utama, sehingga mengembalikan satu larik yang hanya berisi angka, dan saya dapat menggunakan metode usersData4 di atasnya

Metode flatMap

Ini adalah kombinasi dari usersData0 dan push3. Itu memetakan setiap elemen dalam larik ke fungsi panggilan balik yang diberikan, lalu meratakan larik yang dihasilkan

Katakanlah kita ingin mendapatkan kuadrat dari setiap elemen dalam array yang tidak rata, dan kita ingin meratakannya. Metode ini akan membuat hidup kita lebih mudah. Pada bagian di mana saya menggunakan metode usersData_9 dalam cuplikan kode di bawah ini, dibutuhkan sebuah elemen yang berupa array, dan saya mengembalikan array baru, yang merupakan kuadrat dari elemen. Dan akhirnya, itu meratakan array yang dihasilkan

Kesimpulan

Artikel ini telah memandu Anda melalui beberapa metode larik JavaScript. Percayalah, ada lebih banyak metode. Apakah ada metode lain yang ingin Anda tambahkan ke daftar?

Apa itu shift dan unshift dalam JavaScript?

JavaScript shift() menghapus elemen pada posisi tertentu dan menggeser elemen yang tersisa ke atas. Fungsi JavaScript unshift() melakukan sebaliknya. unshift() menambahkan elemen baru pada posisi tertentu dan menggeser elemen yang tersisa ke bawah daftar

Apa yang dimaksud dengan Unshift dalam JavaScript?

Metode unshift() menambahkan satu atau lebih elemen ke awal larik dan mengembalikan panjang larik yang baru .

Apa itu pergeseran dalam JavaScript?

Metode shift() menghapus elemen pertama dari larik dan mengembalikan elemen yang dihapus . Metode ini mengubah panjang array.

Apakah Unshift lebih lambat dari push?

Unshift lebih lambat daripada push karena ini juga perlu melepas semua elemen ke kiri setelah elemen pertama ditambahkan.