Saya mendengarkan Podcast Sintaks FM hebat yang merangkum array JavaScript dan metode objek yang berguna. Metode ini membantu pengembang menulis kode yang bersih dan mudah dibaca. Banyak dari metode ini mengurangi kebutuhan untuk menjangkau perpustakaan utilitas seperti Lodash.

Semua metode dalam artikel ini dapat dirantai, artinya metode tersebut dapat digunakan dalam kombinasi satu sama lain dan juga tidak mengubah data, yang mana hal ini sangat penting ketika bekerja dengan React. Dengan semua metode array dan objek ini, Anda tidak perlu lagi melakukan perulangan for atau while.

.filter()

Membuat larik baru berdasarkan apakah item larik melewati kondisi tertentu.

Contoh

Buat serangkaian usia siswa yang memenuhi usia legal untuk meminum minuman beralkohol.

const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter( age => age > 18 );
// ableToDrink will be equal to [19, 21]

.map()

Membuat array baru dengan memanipulasi nilai dalam array lain. Sangat bagus untuk manipulasi data dan sering digunakan di React karena merupakan metode yang tidak dapat diubah.

Contoh

Buat array yang menambahkan $ ke awal setiap angka.

const numbers = [2, 3, 4, 5];
const dollars = numbers.map( number => '$' + number);
// dollars will be equal to ['$2', '$3', '$4', '$5']

.reduce()

Metode yang sering diabaikan ini menggunakan akumulator untuk mengurangi semua item dalam array menjadi satu nilai. Bagus untuk menghitung total. Nilai yang dikembalikan dapat berupa jenis apa pun (yaitu objek, array, string, integer).

Contoh

Tambahkan bilangan bulat dalam array.

const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
// total will be equal to 30

Ada beberapa kasus penggunaan yang sangat keren untuk .reduce() yang diuraikan dalam dokumen MDN yang memberikan contoh tentang cara melakukan hal-hal seperti meratakan array, mengelompokkan objek berdasarkan properti, dan menghapus item duplikat dalam array.

.forEach()

Menerapkan fungsi pada setiap item dalam array.

Contoh

Catat setiap item array ke konsol

const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion) );
// Will log the following:
// 'happy'
// 'sad'
// 'angry'

.some()

Memeriksa apakah ada item dalam array yang melewati kondisi tersebut. Kasus penggunaan yang baik adalah memeriksa hak istimewa pengguna. Ini juga dapat digunakan serupa dengan .forEach() di mana Anda akan melakukan tindakan pada setiap item array dan keluar dari loop setelah nilai truthy dikembalikan.

Contoh

Periksa apakah ada setidaknya satu 'admin' dalam sebuah array.

const userPrivileges = ['user', 'user', 'user', 'admin'];
const containsAdmin = userPrivileges.some( element => element === 'admin');
// containsAdmin will be equal to true

.every()

Mirip dengan .some(), tetapi memeriksa apakah semua item dalam array melewati suatu kondisi.

Contoh

Periksa apakah semua peringkat sama atau lebih besar dari 3 bintang.

const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every( rating => rating >= 3 );
// goodOverallRating will be equal to true

.includes()

Memeriksa apakah suatu array berisi nilai tertentu. Ini mirip dengan .some(), tetapi alih-alih mencari kondisi yang harus dilewati, ini akan mencari apakah array berisi nilai tertentu.

Contoh

Periksa apakah array menyertakan item dengan string ‘waldo’.

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');
// includesWaldo will be equal to true

Array.from()

Ini adalah metode statis yang membuat array berdasarkan array atau string lain. Anda juga dapat meneruskan fungsi panggilan balik map sebagai argumen untuk membentuk lebih lanjut data dalam larik baru. Sejujurnya, saya tidak terlalu yakin mengapa seseorang menggunakan metode ini dibandingkan metode .map().

Contoh

Buat array dari string.

const newArray = Array.from('hello');
// newArray will be equal to ['h', 'e', 'l', 'l', 'o']

Buat array yang memiliki nilai dua kali lipat untuk setiap item di array lain.

const doubledValues = Array.from([2, 4, 6], number => number * 2);
// doubleValues will be equal to [4, 8, 12]

Object.values()

Mengembalikan array nilai suatu objek.

Contoh

const icecreamColors = {
    chocolate: 'brown',
    vanilla: 'white',
    strawberry: 'red',
}

const colors = Object.values(icecreamColors);
// colors will be equal to ["brown", "white", "red"]

Object.keys()

Mengembalikan array kunci suatu objek.

Contoh

const icecreamColors = {
  chocolate: 'brown',
  vanilla: 'white',
  strawberry: 'red',
}

const types = Object.keys(icecreamColors);
// types will be equal to ["chocolate", "vanilla", "strawberry"]

Object.entries()

Membuat array yang berisi array pasangan kunci/nilai suatu objek.

Contoh

const weather = {
  rain: 0,
  temperature: 24,
  humidity: 33,
}

const entries = Object.entries(weather);
// entries will be equal to
// [['rain', 0], ['temperature', 24], ['humidity', 33]]

Array menyebar

Menyebarkan array menggunakan operator spread (…) memungkinkan Anda memperluas elemen dalam array. Ini berguna saat menggabungkan sekumpulan array menjadi satu. Ini juga merupakan cara yang baik untuk menghindari penggunaan metode splice() ketika ingin menghapus elemen tertentu dari array karena metode ini dapat digabungkan dengan metode slice() untuk mencegah mutasi langsung pada array.

Contoh

Gabungkan dua array.

const spreadableOne = [1, 2, 3, 4];
const spreadableTwo = [5, 6, 7, 8];

const combined = [...spreadableOne, ...spreadableTwo];
// combined will be equal to [1, 2, 3, 4, 5, 6, 7, 8]

Hapus elemen array tanpa mengubah array aslinya.

const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat'];
const mammals = [...animals.slice(0,3), ...animals.slice(4)];
// mammals will be equal to ['squirrel', 'bear', 'deer', 'rat']

Penyebaran objek

Menyebarkan suatu objek memungkinkan penambahan properti dan nilai baru ke suatu objek tanpa mutasi (yaitu objek baru dibuat) dan juga dapat digunakan untuk menggabungkan beberapa objek menjadi satu. Perlu dicatat bahwa menyebarkan objek tidak melakukan penyalinan bersarang.

Contoh

Tambahkan properti dan nilai objek baru tanpa mengubah objek aslinya.

const spreadableObject = {
  name: 'Robert',
  phone: 'iPhone'
};

const newObject = {
  ...spreadableObject,
  carModel: 'Volkswagen'
}
// newObject will be equal to
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

Fungsi Istirahat

Fungsi dapat menggunakan sintaks parameter sisanya untuk menerima sejumlah argumen sebagai array.

Contoh

Menampilkan array argumen yang diteruskan.

function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}

displayArgumentsArray('hi', 'there', 'bud');
// Will print ['hi', 'there', 'bud']

Object.freeze()

Mencegah Anda mengubah properti objek yang ada atau menambahkan properti dan nilai baru ke objek. Seringkali itulah yang dipikirkan orang const, namun const memungkinkan Anda memodifikasi suatu objek.

Contoh

Bekukan objek untuk mencegah properti name diubah.

const frozenObject = {
  name: 'Robert'
}

Object.freeze(frozenObject);

frozenObject.name = 'Henry';
// frozenObject will be equal to { name: 'Robert' }

Object.seal()

Menghentikan penambahan properti baru ke objek, namun tetap mengizinkan properti yang sudah ada diubah.

Contoh

Segel objek untuk mencegah penambahan properti wearsWatch.

const sealedObject = {
  name: 'Robert'
}

Object.seal(sealedObject);

sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;
// sealedObject will be equal to { name: 'Bob' }

Object.assign()

Memungkinkan objek digabungkan bersama. Metode ini tidak terlalu diperlukan karena Anda dapat menggunakan sintaks penyebaran objek. Seperti operator penyebaran objek, Object.assign() tidak melakukan kloning mendalam. Lodash adalah teman terbaik Anda dalam hal mengkloning objek secara mendalam.

Contoh

Gabungkan dua objek menjadi satu.

const firstObject = {
  firstName: 'Robert'
}

const secondObject = {
  lastName: 'Cooper'
}

const combinedObject = Object.assign(firstObject, secondObject);
// combinedObject will be equal to { firstName: 'Robert', lastName: 'Cooper' }

Jika menurut Anda artikel ini menarik dan pengembangan front-end menarik minat Anda, pertimbangkan untuk mengikuti saya di Twitter, "Github", atau LinkedIn .

✉️ BerlanggananCodeBurst"Email Blast" sekali seminggu,🐦 IkutiCodeBurstdi Twitter", lihat🗺️ "Peta Jalan Pengembang Web 2018", dan🕸️ "Pelajari Pengembangan Web Full Stack .