Amalan Terbaik dalam JavaScript Moden - Bahagian 2

Dalam bahagian pertama artikel ini, kami meneroka asas JavaScript moden dan beberapa amalan terbaik penting untuk mula menulis kod yang lebih bersih dan cekap. Tetapi sebagai pembangun, kami tahu bahawa sentiasa ada lagi yang perlu dipelajari dan diperbaiki.

8. Rangkaian pilihan (?.)

Apabila bekerja dengan objek atau struktur bersarang, kita kadangkala menghadapi keperluan untuk menyemak sama ada sifat wujud sebelum cuba mengaksesnya. pengendali rantai pilihan (?.) ialah alat berkuasa yang memudahkan tugas ini, mengelakkan ralat akses harta nilai nol atau tidak ditentukan.

Mengapa ia berguna?

Bayangkan anda mempunyai struktur objek yang kompleks dan anda tidak pasti sama ada sifat tertentu wujud di dalamnya. Tanpa rantaian pilihan, anda perlu melakukan semakan manual pada setiap langkah, yang boleh menjadikan kod anda lebih panjang dan kurang boleh dibaca. Dengan pengendali ?., anda boleh mengakses sifat dengan selamat dan tidak ditentukan jika mana-mana sifat perantaraan tidak wujud.

Contoh asas

const producto = {};
const impuesto = producto?.precio?.impuesto;
console.log(impuesto); // undefined

Dalam kes ini, memandangkan produk tidak mempunyai sifat harga, rantaian pilihan kembali tidak ditentukan dan bukannya menghasilkan ralat.

Contoh dengan objek yang lebih kompleks

Bayangkan anda mempunyai senarai produk dengan sifat yang berbeza, sesetengah daripadanya mungkin kosong atau tidak ditentukan:

const productos = [
  { nombre: 'Laptop', detalles: { precio: 1000 } },
  { nombre: 'Teléfono', detalles: null },
  { nombre: 'Tablet', detalles: { precio: 500, impuesto: 50 } }
];

// Acceso seguro a la propiedad 'impuesto' de cada producto
productos.forEach(producto => {
  const impuesto = producto?.detalles?.impuesto;
  console.log(impuesto); // undefined, null o el valor real
});

Dalam contoh ini, rantaian pilihan membolehkan kami mengelakkan ralat semasa cuba mengakses product.details.tax, walaupun butiran adalah batal atau tiada.

Bagaimanakah ia meningkatkan kod anda?

• Elakkan ralat akses kepada sifat batal atau tidak ditentukan.
• Memudahkan kod, menjadikan pemeriksaan keselamatan lebih bersih dan lebih mudah dibaca.
• Membolehkan anda bekerja dengan data yang tidak pasti atau tidak lengkap, sesuatu yang sangat biasa apabila anda bekerja dengan respons daripada API atau pangkalan data.

Bonus: Rangkaian pilihan dengan fungsi

Perantaian pilihan juga boleh digunakan dengan fungsi, yang sangat berguna apabila anda mempunyai fungsi yang mungkin tidak ditakrifkan pada objek:

const usuario = { nombre: 'Juan', obtenerEdad: null };
const edad = usuario.obtenerEdad?.();
console.log(edad); // undefined

Di sini, fungsi getAge tidak ditentukan (ianya batal), tetapi ia tidak menimbulkan ralat, ia hanya kembali tidak ditentukan.

9. Gunakan async/tunggu untuk pengendalian async

Apabila anda bekerja dengan operasi tak segerak dalam JavaScript, seperti mendapatkan data daripada API atau membaca fail, sintaks async/menunggu boleh menjadi kawan baik anda. Daripada menggunakan janji dengan .then() dan .catch(), async/await membenarkan anda menulis kod tak segerak dengan cara yang lebih bersih dan mudah dibaca, sama seperti cara kami menulis kod segerak.

Mengapa menggunakan async/menunggu?

• Kesederhanaan dan kebolehbacaan: Anda mengelakkan "rantai janji" yang boleh menjadi rumit untuk dibaca dan diselenggara.
• Pengendalian ralat yang lebih intuitif: Menggunakan cuba/tangkap untuk mengendalikan ralat adalah lebih jelas daripada menggunakan .catch().
• Kawalan yang lebih tepat: Membolehkan menunggu untuk digunakan di mana-mana dalam fungsi, menjadikannya lebih mudah untuk mengawal aliran tak segerak yang lebih kompleks.

Contoh asas penggunaan:

Andaikan kami bekerja dengan API yang mengembalikan data. Menggunakan async/await dan bukannya .then() menjadikan aliran lebih mudah untuk diikuti:

const producto = {};
const impuesto = producto?.precio?.impuesto;
console.log(impuesto); // undefined

Contoh praktikal: mengambil data daripada API dan memaparkannya dalam UI

Bayangkan anda mempunyai halaman web yang anda perlukan untuk memaparkan maklumat pengguna daripada API. Berikut ialah contoh cara anda boleh melakukannya menggunakan async/menunggu untuk mendapatkan data dan memaparkannya ke antara muka:

const productos = [
  { nombre: 'Laptop', detalles: { precio: 1000 } },
  { nombre: 'Teléfono', detalles: null },
  { nombre: 'Tablet', detalles: { precio: 500, impuesto: 50 } }
];

// Acceso seguro a la propiedad 'impuesto' de cada producto
productos.forEach(producto => {
  const impuesto = producto?.detalles?.impuesto;
  console.log(impuesto); // undefined, null o el valor real
});

Object.values()

Mengembalikan tatasusunan dengan semua nilai sifat objek. Sempurna apabila anda hanya memerlukan nilai tanpa kunci.

Contoh:

const usuario = { nombre: 'Juan', obtenerEdad: null };
const edad = usuario.obtenerEdad?.();
console.log(edad); // undefined

Object.entry()

Ini adalah kaedah yang paling serba boleh. Mengembalikan tatasusunan tatasusunan, di mana setiap subtatasusunan mengandungi kunci dan nilai yang sepadan. Ini berguna jika anda ingin menggunakan kedua-dua kunci dan nilai dalam satu operasi.

Contoh:

async function obtenerDatos() {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/datos');
    if (!respuesta.ok) {
      throw new Error('Error al obtener los datos');
    }
    const datos = await respuesta.json();
    console.log(datos);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

Bonus: Lelaran dengan untuk...daripada

Tahukah anda bahawa anda boleh menggabungkan kaedah ini dengan untuk...untuk menjadikan kod anda lebih bersih? Berikut ialah contoh menggunakan Object.entry():

Contoh:

// Función para obtener y mostrar los datos de usuarios
async function obtenerUsuarios() {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/usuarios');
    if (!respuesta.ok) {
      throw new Error('No se pudieron cargar los usuarios');
    }
    const usuarios = await respuesta.json();
    mostrarUsuariosEnUI(usuarios);
  } catch (error) {
    console.error('Hubo un problema con la carga de los usuarios:', error);
    alert('Error al cargar los usuarios. Intenta más tarde.');
  }
}

// Función para renderizar usuarios en el HTML
function mostrarUsuariosEnUI(usuarios) {
  const contenedor = document.getElementById('contenedor-usuarios');
  contenedor.innerHTML = usuarios.map(usuario => `
    <div>



<h3>
  
  
  ¿Qué mejoramos con async/await?
</h3>

<ol>
<li>
<strong>Manejo claro de errores:</strong> Usamos try/catch para capturar cualquier error que pueda ocurrir durante la obtención de datos, ya sea un problema con la red o con la API.</li>
<li>
<strong>Código más legible:</strong> La estructura de await hace que el flujo del código se lea de manera secuencial, como si fuera código sincrónico.</li>
<li>
<strong>Evita el anidamiento:</strong> Con async/await puedes evitar los callbacks anidados (el famoso "callback hell") y las promesas encadenadas.</li>
</ol>

<p>Usar async/await no solo mejora la calidad de tu código, sino que también hace que sea mucho más fácil depurar y mantener proyectos a largo plazo. ¡Es una herramienta poderosa que deberías incorporar siempre que trabajes con asincronía en JavaScript!</p>

<h2>
  
  
  10. Métodos modernos para objetos
</h2>

<p>Cuando trabajamos con objetos en JavaScript, es común que necesitemos iterar sobre las claves y los valores, o incluso extraer solo las claves o valores. Los métodos modernos como Object.entries(), Object.values() y Object.keys() hacen que estas tareas sean mucho más fáciles y legibles.</p>

<h3>
  
  
  Object.keys()
</h3>

<p>Este método devuelve un array con todas las claves de un objeto. Es útil cuando solo necesitas acceder a las claves y no a los valores.</p>

<p><strong>Ejemplo:</strong><br>
</p>

<pre class="brush:php;toolbar:false">const obj = { a: 1, b: 2, c: 3 };
const claves = Object.keys(obj);
console.log(claves); // ["a", "b", "c"]

Pendekatan ini lebih bersih dan mudah dibaca, terutamanya jika anda bekerja dengan objek yang besar atau kompleks.

11. Gunakan Map untuk kekunci bukan primitif

Apabila anda perlu mengaitkan nilai dengan kekunci yang bukan rentetan atau simbol, gunakan Peta. Ia lebih teguh dan mengekalkan jenis serta susunan kekunci.

Contoh:

const producto = {};
const impuesto = producto?.precio?.impuesto;
console.log(impuesto); // undefined

12. Gunakan Simbol untuk kekunci unik

Simbol ialah ciri JavaScript yang membolehkan anda mencipta kunci unik dan tidak boleh diubah, menjadikannya alat yang berkuasa apabila kita perlu memastikan bahawa nilai tidak ditulis ganti atau diakses secara tidak sengaja. Simbol tidak boleh diakses melalui kaedah seperti Object.keys(), for...in, atau JSON.stringify(), menjadikannya sempurna untuk nilai peribadi atau "tersembunyi".

Mengapa menggunakan Simbol?

Apabila kita mencipta sifat objek menggunakan kekunci seperti rentetan teks, ia boleh dimanipulasi atau ditimpa dengan mudah. Walau bagaimanapun, simbol memastikan bahawa setiap kunci adalah unik, walaupun kita mencipta simbol dengan nama yang sama. Selain itu, simbol tidak akan muncul dalam penghitungan harta objek.

Contoh asas:

const productos = [
  { nombre: 'Laptop', detalles: { precio: 1000 } },
  { nombre: 'Teléfono', detalles: null },
  { nombre: 'Tablet', detalles: { precio: 500, impuesto: 50 } }
];

// Acceso seguro a la propiedad 'impuesto' de cada producto
productos.forEach(producto => {
  const impuesto = producto?.detalles?.impuesto;
  console.log(impuesto); // undefined, null o el valor real
});

Dalam contoh ini, kunci hiddenKey adalah unik, dan walaupun bahagian lain kod kami mungkin mencipta Simbol lain('tersembunyi'), ia akan berbeza sama sekali dan tidak akan menjejaskan nilai yang disimpan dalam obj.

Contoh Lanjutan: Menggabungkan Simbol dengan Object.defineProperty

Anda juga boleh menggunakan Symbol bersama-sama dengan Object.defineProperty untuk menambah sifat pada objek dengan cara yang lebih terkawal, memastikan sifat tersebut tidak boleh dikira.

const usuario = { nombre: 'Juan', obtenerEdad: null };
const edad = usuario.obtenerEdad?.();
console.log(edad); // undefined

Dalam contoh ini, secretKey tidak akan muncul dalam penghitungan kunci objek, menjadikannya sesuai untuk nilai "peribadi" ​​yang tidak boleh diakses atau diubah suai secara tidak sengaja.

Pertimbangan:

• Simbol berguna untuk mengelakkan konflik nama harta benda, terutamanya apabila bekerja dengan perpustakaan atau API pihak ketiga.
• Walaupun simbol bukan "peribadi" sepenuhnya, hakikat bahawa ia tidak boleh diakses secara konvensional membantu melindungi integriti data.
• Sila ambil perhatian bahawa simbol tidak boleh disirikan kepada JSON, jadi jika anda perlu menghantar data, pastikan anda mengendalikan sifat Simbol dengan sewajarnya.

13. Berhati-hati dengan JSON dan nombor yang besar

Dalam JavaScript, mengendalikan bilangan yang besar boleh menjadi cabaran sebenar. Jenis data Nombor mempunyai had untuk mewakili integer dengan tepat: nilai integer selamat terbesar ialah 9007199254740991 (juga dikenali sebagai Number.MAX_SAFE_INTEGER). Jika anda cuba menggunakan nombor yang lebih besar daripada ini, anda mungkin kehilangan ketepatan, yang boleh menyebabkan ralat dalam aplikasi anda.

Sebagai contoh, bayangkan anda menerima sejumlah besar daripada API luaran:

async function obtenerDatos() {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/datos');
    if (!respuesta.ok) {
      throw new Error('Error al obtener los datos');
    }
    const datos = await respuesta.json();
    console.log(datos);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

Seperti yang anda lihat, nombor 9007199254740999 tersilap ditukar kepada 9007199254741000. Ini boleh menjadi masalah jika nombor itu penting untuk permohonan anda, seperti pengecam unik atau jumlah kewangan.

Bagaimana untuk mengelakkan masalah ini?

Penyelesaian yang mudah dan elegan ialah menggunakan jenis data BigInt, yang diperkenalkan dalam ECMAScript 2020. BigInt boleh mengendalikan nombor yang lebih besar tanpa kehilangan ketepatan. Walau bagaimanapun, JSON tidak mengendalikan BigInt secara asli, jadi anda perlu menukar nombor kepada rentetan apabila mensirikannya dan kemudian menukarnya semula apabila anda menyahsirikannya.

Berikut ialah contoh cara anda boleh melakukannya:

Penyelesaian dengan BigInt dan JSON.stringify

const producto = {};
const impuesto = producto?.precio?.impuesto;
console.log(impuesto); // undefined

Dengan menggunakan pendekatan ini, anda boleh mengekalkan ketepatan nombor yang besar tanpa kehilangan data penting. Apabila anda memerlukan nombor itu sekali lagi, cuma tukarkannya semula kepada BigInt:

const productos = [
  { nombre: 'Laptop', detalles: { precio: 1000 } },
  { nombre: 'Teléfono', detalles: null },
  { nombre: 'Tablet', detalles: { precio: 500, impuesto: 50 } }
];

// Acceso seguro a la propiedad 'impuesto' de cada producto
productos.forEach(producto => {
  const impuesto = producto?.detalles?.impuesto;
  console.log(impuesto); // undefined, null o el valor real
});

Strategi lain

Jika anda tidak mahu bekerja dengan BigInt atau jika prestasi membimbangkan, strategi lain adalah dengan hanya menganggap nombor besar sebagai rentetan dalam JSON. Ini mengelakkan masalah ketepatan dengan kos perlu melakukan penukaran dalam kod anda.

Contoh:

const usuario = { nombre: 'Juan', obtenerEdad: null };
const edad = usuario.obtenerEdad?.();
console.log(edad); // undefined

Mengapa ia penting?

Pengendalian nombor besar yang betul bukan sahaja penting untuk ketepatan pengiraan, tetapi juga untuk mengekalkan integriti data. Ini amat penting apabila anda bekerja dengan API atau sistem pihak ketiga yang anda tidak kawal sepenuhnya. Nombor yang disalahtafsir boleh menyebabkan kegagalan dalam aplikasi anda, atau lebih teruk lagi, ralat dalam data yang boleh menjadi kritikal, seperti pengendalian transaksi kewangan atau pengecam unik dalam pangkalan data.

Ingat: jangan abaikan had ketepatan. Walaupun ia kelihatan seperti perincian kecil, ia adalah kawasan di mana aplikasi boleh gagal dalam cara yang tidak dijangka dan mahal.

14. Kendalikan ungkapan dalam pernyataan if secara eksplisit

Dalam JavaScript, jika pernyataan secara tersirat menukar ungkapan kepada nilai "benar" atau "palsu", yang boleh membawa kepada hasil yang tidak dijangka jika tingkah laku ini tidak diambil kira. Walaupun tingkah laku ini boleh berguna pada masa-masa tertentu, adalah disyorkan untuk menyatakan secara eksplisit dalam perbandingan untuk mengelakkan ralat halus dan meningkatkan kebolehbacaan kod.

Apakah maksud "benar" atau "palsu"?

• "Falsy" merujuk kepada nilai yang dianggap bersamaan dengan palsu apabila dinilai dalam ungkapan bersyarat. Contoh: 0, "" (rentetan kosong), null, undefined, NaN.
• "Truthy" ialah semua nilai yang tidak palsu, iaitu sebarang nilai yang bukan salah satu daripada di atas. Contoh: sebarang nombor selain daripada 0, sebarang rentetan bukan kosong, objek, dsb.

Contoh tersirat (mungkin memberikan hasil yang tidak dijangka)

const producto = {};
const impuesto = producto?.precio?.impuesto;
console.log(impuesto); // undefined

Dalam contoh di atas, syarat tidak dilaksanakan, kerana 0 dianggap "palsu". Walau bagaimanapun, tingkah laku ini sukar untuk dikesan apabila bekerja dengan nilai yang lebih kompleks.

Contoh eksplisit (lebih baik untuk kebolehbacaan)

const productos = [
  { nombre: 'Laptop', detalles: { precio: 1000 } },
  { nombre: 'Teléfono', detalles: null },
  { nombre: 'Tablet', detalles: { precio: 500, impuesto: 50 } }
];

// Acceso seguro a la propiedad 'impuesto' de cada producto
productos.forEach(producto => {
  const impuesto = producto?.detalles?.impuesto;
  console.log(impuesto); // undefined, null o el valor real
});

Petua: Setiap kali anda berurusan dengan nilai yang mungkin palsu, seperti 0, null, palsu atau "", adalah lebih baik untuk menyatakan secara eksplisit dalam perbandingan anda. Dengan cara ini anda memastikan bahawa logik dilaksanakan mengikut jangkaan anda dan bukan kerana tingkah laku paksaan jenis tersirat.

Satu lagi contoh dengan nilai yang tidak jelas

Mari kita pertimbangkan bahawa anda mempunyai objek yang boleh menjadi null, tatasusunan kosong [] atau objek kosong {}. Jika anda melakukan sesuatu seperti ini:

const usuario = { nombre: 'Juan', obtenerEdad: null };
const edad = usuario.obtenerEdad?.();
console.log(edad); // undefined

Walaupun [] (tatasusunan kosong) ialah objek yang sah dan benar, ia boleh menyebabkan kekeliruan pada masa hadapan jika anda tidak memahami tingkah laku itu sepenuhnya. Daripada bergantung pada paksaan tersirat, lebih baik membuat perbandingan yang lebih jelas, seperti:

async function obtenerDatos() {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/datos');
    if (!respuesta.ok) {
      throw new Error('Error al obtener los datos');
    }
    const datos = await respuesta.json();
    console.log(datos);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

Mengapa ia penting?

Dengan mentakrifkan syarat secara eksplisit, anda mengurangkan risiko ralat yang disebabkan oleh paksaan automatik JavaScript. Pendekatan ini menjadikan kod anda lebih jelas, lebih mudah dibaca dan lebih mudah diramal. Selain itu, ia meningkatkan kebolehselenggaraan, kerana orang lain (atau diri anda pada masa hadapan) akan dapat memahami logik dengan cepat tanpa perlu mengingati tingkah laku tersirat nilai palsu dalam JavaScript.

15. Gunakan kesaksamaan yang ketat (===) apabila boleh

Salah satu gelagat JavaScript yang paling mengelirukan datang daripada pengendali kesaksamaan yang tidak ketat (==). Operator ini melakukan apa yang dikenali sebagai paksaan jenis, yang bermaksud bahawa ia cuba menukar nilai kepada jenis biasa sebelum membandingkannya. Ini boleh menghasilkan keputusan mengejutkan tidak dijangka dan sangat sukar untuk nyahpepijat.

Contohnya:

const producto = {};
const impuesto = producto?.precio?.impuesto;
console.log(impuesto); // undefined

Ini adalah jenis perkara yang boleh membuat anda gila apabila anda sedang membangun. Operator == membandingkan [] (tatasusunan kosong) dengan ![] (yang ternyata palsu, kerana [] dianggap sebagai nilai benar dan ![] menukarkannya kepada palsu). Walau bagaimanapun, mengikut peraturan paksaan dalaman JavaScript, ini adalah keputusan yang sah, walaupun ia tidak masuk akal pada pandangan pertama.

Mengapa ini berlaku?

JavaScript menukar kedua-dua belah perbandingan kepada jenis biasa sebelum membandingkannya. Dalam kes ini, tatasusunan kosong [] menjadi palsu jika dibandingkan dengan nilai boolean ![]. Paksaan jenis ini ialah contoh yang jelas tentang betapa halus dan sukar untuk mengenal pasti ralat boleh berlaku.

Petua: Sentiasa gunakan kesaksamaan yang ketat

Untuk mengelakkan masalah ini, jika boleh, anda harus menggunakan persamaan ketat (===). Perbezaannya ialah pengendali ini tidak melakukan paksaan jenis . Ini bermakna ia membandingkan kedua-dua nilai dan jenis pembolehubah dengan ketat.

const productos = [
  { nombre: 'Laptop', detalles: { precio: 1000 } },
  { nombre: 'Teléfono', detalles: null },
  { nombre: 'Tablet', detalles: { precio: 500, impuesto: 50 } }
];

// Acceso seguro a la propiedad 'impuesto' de cada producto
productos.forEach(producto => {
  const impuesto = producto?.detalles?.impuesto;
  console.log(impuesto); // undefined, null o el valor real
});

Contoh yang lebih tipikal

Berikut ialah beberapa contoh yang lebih biasa tentang cara kesaksamaan tidak ketat (==) boleh menjadi masalah:

const usuario = { nombre: 'Juan', obtenerEdad: null };
const edad = usuario.obtenerEdad?.();
console.log(edad); // undefined

Mengapa penting untuk menggunakan ===?

• Ramalan dan kebolehpercayaan: Menggunakan === memberi anda lebih banyak perbandingan yang boleh diramal, tanpa kejutan atau penukaran jenis.
• Elakkan pepijat yang sukar dikesan: Apabila kod anda mula menjadi lebih besar dan lebih kompleks, pepijat yang berkaitan dengan paksaan jenis boleh menjadi sangat sukar dicari dan nyahpepijat.
• Tingkatkan kebolehbacaan kod: Lebih mudah untuk pembangun lain (atau anda sendiri pada masa hadapan) memahami kod anda apabila anda melihat perbandingan yang jelas, tanpa kekeliruan penukaran tersirat.

Atas ialah kandungan terperinci Amalan Terbaik dalam JavaScript Moden - Bahagian 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!