Objek.kunci, nilai, entri

Mari kita menjauh dari struktur data individual dan membicarakan tentang iterasi pada struktur tersebut.

Pada bab sebelumnya kita melihat metode map.keys() , map.values() , map.entries() .

Metode-metode ini bersifat umum, ada kesepakatan umum untuk menggunakannya untuk struktur data. Jika kita membuat struktur data kita sendiri, kita harus menerapkannya juga.

Mereka didukung untuk:

• Map

• Set

• Array

Objek biasa juga mendukung metode serupa, tetapi sintaksnya sedikit berbeda.

Objek.kunci, nilai, entri

Untuk objek biasa, tersedia metode berikut:

• Object.keys(obj) – mengembalikan array kunci.

• Object.values(obj) – mengembalikan array nilai.

• Object.entries(obj) – mengembalikan array pasangan [key, value] .

Harap perhatikan perbedaannya (dibandingkan dengan peta misalnya):

Perbedaan pertama adalah kita harus memanggil Object.keys(obj) , dan bukan obj.keys() .

Mengapa demikian? Alasan utamanya adalah fleksibilitas. Ingat, objek adalah dasar dari semua struktur kompleks di JavaScript. Jadi kita mungkin memiliki objek seperti data kita sendiri yang mengimplementasikan metode data.values() miliknya sendiri. Dan kita masih bisa memanggil Object.values(data) di atasnya.

Perbedaan kedua adalah Object.* mengembalikan objek array “nyata”, bukan hanya sebuah iterable. Hal ini terutama karena alasan historis.

Misalnya:

 biarkan pengguna = {
  nama: "Yohanes",
  usia: 30
};

• Object.keys(user) = ["name", "age"]

• Object.values(user) = ["John", 30]

• Object.entries(user) = [ ["name","John"], ["age",30] ]

Berikut ini contoh penggunaan Object.values ​​untuk mengulang nilai properti:

 biarkan pengguna = {
  nama: "Yohanes",
  usia: 30
};

// mengulang nilai
for (biarkan nilai Objek.nilai(pengguna)) {
  peringatan(nilai); // John, lalu 30
}

Object.keys/values/entries mengabaikan properti simbolik

Sama seperti perulangan for..in , metode ini mengabaikan properti yang menggunakan Symbol(...) sebagai kunci.

Biasanya itu nyaman. Namun jika kita menginginkan kunci simbolik juga, maka ada metode terpisah Object.getOwnPropertySymbols yang mengembalikan array yang hanya berisi kunci simbolik. Juga, terdapat metode Reflect.ownKeys(obj) yang mengembalikan semua kunci.

Mengubah objek

Objek kekurangan banyak metode yang ada untuk array, misalnya map , filter dan lain-lain.

Jika kita ingin menerapkannya, kita bisa menggunakan Object.entries diikuti dengan Object.fromEntries :

1. Gunakan Object.entries(obj) untuk mendapatkan array pasangan kunci/nilai dari obj .

2. Gunakan metode array pada array tersebut, misalnya map , untuk mengubah pasangan kunci/nilai ini.

3. Gunakan Object.fromEntries(array) pada array yang dihasilkan untuk mengubahnya kembali menjadi objek.

Misalnya, kita mempunyai objek dengan harga, dan ingin menggandakannya:

 misalkan harga = {
  pisang: 1,
  oranye: 2,
  daging: 4,
};

biarkan doubleHarga = Objek.dariEntries(
  // ubah harga menjadi array, petakan setiap pasangan kunci/nilai ke dalam pasangan lainnya
  // lalu fromEntries mengembalikan objeknya
  Objek.entri(harga).peta(entri => [entri[0], entri[1] * 2])
);

alert(doublePrices.daging); // 8

Ini mungkin terlihat sulit pada pandangan pertama, namun menjadi mudah dimengerti setelah Anda menggunakannya sekali atau dua kali. Kita dapat membuat rantai transformasi yang kuat dengan cara ini.

Tugas

Jumlahkan propertinya

pentingnya: 5

Ada objek salaries dengan jumlah gaji yang berubah-ubah.

Tulis fungsi sumSalaries(salaries) yang mengembalikan jumlah semua gaji menggunakan Object.values ​​dan for..of loop.

Jika salaries kosong, maka hasilnya harus 0 .

Misalnya:

 misalkan gaji = {
  "Yohanes": 100,
  "Pete": 300,
  "Maria": 250
};

waspada( jumlahGaji(gaji) ); // 650

Buka kotak pasir dengan tes.

larutan

 jumlah fungsiGaji(gaji) {

  misalkan jumlah = 0;
  for (biarkan gaji Objek.nilai(gaji)) {
    jumlah += gaji;
  }

  jumlah pengembalian; // 650
}

misalkan gaji = {
  "Yohanes": 100,
  "Pete": 300,
  "Maria": 250
};

waspada( jumlahGaji(gaji) ); // 650

Atau, secara opsional, kita juga bisa mendapatkan jumlahnya menggunakan Object.values ​​dan reduce :

 // mengurangi loop pada array gaji,
// menambahkannya
// dan mengembalikan hasilnya
jumlah fungsiGaji(gaji) {
  return Object.values(gaji).reduce((a, b) => a + b, 0) // 650
}

Buka solusi dengan pengujian di kotak pasir.

Hitung properti

pentingnya: 5

Tulis fungsi count(obj) yang mengembalikan jumlah properti pada objek:

 biarkan pengguna = {
  nama: 'John',
  usia: 30
};

peringatan(hitungan(pengguna) ); // 2

Cobalah untuk membuat kode sesingkat mungkin.

PS Abaikan properti simbolik, hitung hanya properti yang “biasa”.

Buka kotak pasir dengan tes.

larutan

 jumlah fungsi(obj) {
  return Objek.kunci(obj).panjang;
}

Buka solusi dengan pengujian di kotak pasir.