Array adalah salah satu struktur data yang paling populer di JavaScript karena mereka digunakan untuk menyimpan data. Selain itu, array memberikan banyak peluang untuk bekerja dengan data ini. Memahami bahwa bagi mereka yang berada di awal cara belajar JavaScript, array adalah salah satu topik paling mendasar, dalam artikel ini saya ingin memperkenalkan Anda pada beberapa trik bermanfaat yang mungkin tidak Anda ketahui. Mari kita mulai.
1. Cara hanya meninggalkan nilai unik dalam array
Ini adalah pertanyaan yang sangat populer selama wawancara untuk posisi pengembang Javascript. Berikut ini adalah solusi cepat dan mudah untuk masalah ini. Pertama Anda perlu mendapatkan nilai unik array, untuk ini Anda dapat menggunakan
new Set() (
sekitar. Re: struktur data Set hanya menyimpan nilai unik ). Selanjutnya, Anda perlu mengubah struktur data Set ke dalam array. Saya ingin memperkenalkan Anda kepada dua cara bagaimana melakukan ini: yang pertama - menggunakan metode
from() , yang kedua - menggunakan operator spread (
"…" ).
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];
Mudah kan?
2. Bagaimana cara mengganti nilai dalam array
Ada situasi ketika Anda perlu mengganti nilai-nilai dalam array dengan nilai-nilai lain. Ada metode yang bagus untuk hal ini yang mungkin belum Anda ketahui - metode
splice(start, value to remove, values to add) , di mana
start adalah nomor indeks dari mana kami ingin menghapus elemen-elemen array,
value to remove adalah jumlah elemen yang ingin kita hapus, dan
values to add adalah elemen yang ingin kita sisipkan di tempat yang dihapus:
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.splice(0, 2, 'potato', 'tomato'); console.log(fruits);
3. Cara mengubah array tanpa menggunakan metode map()
Mungkin semua orang tahu metode array
map() , tetapi ada solusi lain yang dapat digunakan untuk mendapatkan efek yang sama dan kode bersih. Untuk melakukan ini, kita dapat menggunakan metode
from() :
const friends = [ { name: 'John', age: 22 }, { name: 'Peter', age: 23 }, { name: 'Mark', age: 24 }, { name: 'Maria', age: 22 }, { name: 'Monica', age: 21 }, { name: 'Martha', age: 19 }, ] const friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames);
4. Cara menghapus array dengan cepat
Sebagai contoh, kita memiliki sebuah array di mana ada banyak elemen. Kami perlu membersihkannya (apa pun tujuannya), sementara kami tidak ingin menghapus elemen satu per satu. Ini sangat mudah dilakukan dengan satu baris kode. Untuk menghapus array, kita perlu mengatur panjang array menjadi 0, dan hanya itu!
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.length = 0; console.log(fruits);
5. Cara mengonversi array ke objek
Situasi ini terjadi: kami memiliki array, tetapi kami membutuhkan objek (sekali lagi, apa pun tujuannya) dengan data ini, dan cara tercepat untuk mengubah array ke objek adalah dengan menggunakan operator spread (
"..." ):
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; const fruitsObj = { ...fruits }; console.log(fruitsObj);
6. Cara mengisi array dengan nilai yang sama
Ada beberapa situasi yang berbeda ketika kita ingin membuat sebuah array dan mengisinya dengan beberapa nilai, atau kita membutuhkan sebuah array dengan nilai yang sama. Metode
fill() untuk tugas-tugas tersebut adalah solusi yang bagus:
const newArray = new Array(10).fill('1'); console.log(newArray);
7. Cara menggabungkan lebih dari dua array
Apakah Anda tahu cara menggabungkan array menjadi satu tanpa menggunakan metode
concat() ? Ada cara mudah untuk menggabungkan sejumlah array menjadi satu array dengan satu baris kode. Seperti yang mungkin sudah Anda pahami, operator spread (
"..." ) adalah alat yang sangat berguna ketika bekerja dengan array, seperti dalam kasus ini:
const fruits = ['apple', 'banana', 'orange']; const meat = ['poultry', 'beef', 'fish']; const vegetables = ['potato', 'tomato', 'cucumber']; const food = [...fruits, ...meat, ...vegetables]; console.log(food);
8. Cara menemukan persimpangan dua array
Anda dapat menghadapi tugas ini dalam setiap wawancara JavaScript, karena solusinya menunjukkan pengetahuan Anda tentang metode array, serta cara Anda berpikir. Untuk menemukan nilai-nilai umum dari dua array, kami akan menggunakan salah satu metode yang dibahas sebelumnya dalam artikel ini untuk memastikan bahwa nilai-nilai dalam array yang kami periksa tidak digandakan. Selain itu, kami akan menggunakan metode
filter() dan
includes() . Akibatnya, kami mendapatkan array dengan elemen yang direpresentasikan dalam kedua array:
const numOne = [0, 2, 4, 6, 8, 8]; const numTwo = [1, 2, 3, 4, 5, 6]; const duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item)); console.log(duplicatedValues);
9. Bagaimana menghapus nilai-nilai palsu dari array
Untuk memulai, mari kita mendefinisikan nilai-nilai salah. Dalam Javascript, nilai-nilai salah adalah:
false ,
0 ,
"" ,
null ,
NaN dan
undefined . Sekarang kita bisa mencari cara untuk menghapus nilai-nilai tersebut dari array kita. Untuk mencapai ini, kita memerlukan metode
filter() :
const mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false]; const trueArr = mixedArr.filter(Boolean); console.log(trueArr);
10. Cara mendapatkan nilai array acak
Terkadang kita perlu memilih nilai array acak. Untuk membuat solusinya sederhana, pendek dan cepat, kita bisa mendapatkan nomor indeks acak sesuai dengan panjang array. Lihatlah contoh ini:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]; console.log(randomColor);
11. Cara memperluas array ke arah yang berlawanan
Ketika kita perlu "membalik" array kita, tidak perlu untuk membuatnya melalui loop dan fungsi yang kompleks, karena ada metode array
reverse() sederhana yang melakukan semua ini untuk kita, dan dengan satu baris kode kita dapat "membalik" array kita:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const reversedColors = colors.reverse(); console.log(reversedColors);
12. metode lastIndexOf()
JavaScript memiliki metode
lastIndexOf(elem) yang menarik yang memungkinkan Anda menemukan indeks kemunculan terakhir elemen
elem . Misalnya, jika array kami memiliki nilai duplikat, kami dapat menemukan posisi kejadian terakhir di dalamnya. Lihatlah contoh kode berikut:
const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; const lastIndex = nums.lastIndexOf(5); console.log(lastIndex);
13. Cara menjumlahkan semua nilai dalam array
Pertanyaan populer lainnya selama wawancara untuk posisi pengembang JavaScript. Jumlah semua elemen dapat ditemukan dalam satu baris kode, jika Anda tahu metode
reduce() :
const nums = [1, 5, 2, 6]; const sum = nums.reduce((x, y) => x + y); console.log(sum);
Kesimpulan
Pada artikel ini, saya memperkenalkan Anda 13 trik yang berguna untuk membantu Anda menulis kode yang bersih dan ringkas. Selain itu, jangan lupa bahwa ada banyak trik berbeda yang dapat Anda gunakan dalam Javascript dan yang patut dipelajari tidak hanya untuk bekerja dengan array, tetapi juga untuk struktur data lainnya. Saya harap Anda menyukai solusi yang disajikan dalam artikel dan Anda akan menggunakannya untuk meningkatkan proses pengembangan.
Dapatkan kode tulisan yang bagus!