Ringkaskan kemahiran penggunaan penghakiman bersyarat JavaScript

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript terutamanya penerangan terperinci tentang teknik penggunaan pertimbangan bersyarat JavaScript. Rakan-rakan yang memerlukan boleh merujuknya semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Artikel ini memerlukan masa yang sangat singkat Mari perkenalkan cara menulis pertimbangan bersyarat yang lebih mudah dalam JavaScript untuk membantu anda menulis kod yang lebih ringkas dan kod yang lebih mudah dibaca.

Andaikan kita mempunyai fungsi yang menukar nilai warna kepada pengekodan heksadesimal.

function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === 'slate') {
      return '#64748b'
    } else if (color === 'gray') {
      return '#6b7280'
    } else if (color === 'red') {
      return '#ef4444'
    } else if (color === 'orange') {
      return '#f97316'
    } else if (color === 'yellow') {
      return '#eab308'
    } else if (color === 'green') {
      return '#22c55e'
    } else {
      return '#ffffff'
    }
  } else {
    return '#ffffff'
  }
}

Fungsi fungsi ini adalah sangat mudah, ia adalah untuk menghantar dalam rentetan warna dan kemudian mengembalikan nombor heksadesimal yang sepadan Jika yang diluluskan bukan rentetan, atau tiada apa-apa yang diluluskan, maka putih dikembalikan dalam heksadesimal.

Seterusnya kami akan mula mengoptimumkan kod ini.

Elakkan menggunakan rentetan secara terus sebagai syarat

Ada masalah menggunakan rentetan secara terus sebagai syarat, iaitu akan memalukan apabila kita melakukan kesalahan ejaan.

convertToHex("salte")

Untuk mengelakkan ralat ini, kita boleh menggunakan pemalar.

const Colors = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === Colors.SLATE) {
      return '#64748b'
    } else if (color === Color.GRAY) {
      return '#6b7280'
    }
    // ...
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

Jika anda menggunakan skrip taip, anda boleh menggunakan penghitungan secara langsung.

Menggunakan Objek

Sebenarnya, tidak sukar untuk mencari daripada kod di atas yang kita boleh terus menyimpan nilai perenambelasan ke dalam nilai objek.

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

Dengan cara ini kod akan menjadi lebih ringkas dan mudah dibaca.

Tidak memenuhi jangkaan, pulang lebih awal

Satu lagi amalan terbaik ialah kita boleh menulis situasi yang tidak memenuhi jangkaan di hadapan fungsi dan kembali lebih awal untuk mengelakkan lupa untuk kembali .

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (!color in Colors) {
    return '#ffffff'
  }
  return Colors[color]
}
convertToHex(Colors.SLATE)

Cara ini tidak perlu lagi. Menggunakan teknik ini, kami boleh menghapuskan banyak lagi dalam kod kami.

Gunakan Peta dengan Objek

Menggunakan peta adalah lebih profesional, kerana peta boleh menyimpan sebarang jenis kunci, dan ia mewarisi daripada Map.prototype serta mempunyai kaedah dan sifat yang lebih mudah.

Dan Object lebih mudah untuk mengakses sifat Kita boleh terus menggunakan Object untuk melaksanakan penghitungan.

const ColorsEnum = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
const Colors = new Map()
Colors.set(ColorsEnum.SLATE, '#64748b')
Colors.set(ColorsEnum.GRAY, '#6b7280')
// ...
Colors.set('DEFAULT', '#ffffff')
function convertToHex(color) {
  if (!Colors.has(color)) {
    return Colors.get('DEFAULT')
  }
  return Colors.get(color)
}
convertToHex(Colors.SLATE)

Peta juga boleh menyimpan fungsi

Katakan kita menyimpan banyak warna, sehingga beribu-ribu, dan juga perlu menyokong konfigurasi bahagian belakang, dan hasilnya boleh diperolehi melalui beberapa macam proses pengiraan .

Kemudian kita boleh menggunakan Map untuk menyimpan fungsi.

return Colors.get(color)()

Cuba elakkan ungkapan ternary dan tukar

Walaupun ungkapan ternary adalah mudah, kebolehbacaannya sangat berkurangan Jika ia adalah keadaan berbilang peringkat, ia akan menjadi sangat sukar untuk dibaca .

suis tidak mempunyai kelebihan yang jelas berbanding jika, sebaliknya, ia kadangkala mudah untuk dikembalikan, menyebabkan kod tidak dilaksanakan seperti yang diharapkan.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Ringkaskan kemahiran penggunaan penghakiman bersyarat JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!