Mari kita bincangkan tentang kemahiran penggunaan pertimbangan bersyarat JavaScript

Artikel ini membawakan anda pengetahuan yang berkaitan tentang JavaScript terutamanya tentang kemahiran penggunaan pertimbangan bersyarat JavaScript. Rakan-rakan yang berminat boleh melihatnya bersama-sama.

Artikel ini akan memperkenalkan cara menulis pertimbangan bersyarat yang lebih mudah dalam JavaScript untuk membantu anda menulis kod yang lebih ringkas. Alamat kod sumber

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

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 langsung sebagai syarat

Terdapat masalah menggunakan rentetan secara langsung sebagai syarat, iaitu apabila kita melakukan kesilapan ejaan , Sangat memalukan.

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 heksadesimal ke dalam objek dalam nilai.

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 Warna = { SLAT: '#64748b', KELABU: '#6b7280', // ... } fungsi convertToHex(warna) { jika (!warna dalam Warna) { kembalikan '#ffffff' } kembali Warna[warna] } convertToHex(Colors.SLATE)

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

Dengan 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 , 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.

Di atas ialah penjelasan terperinci tentang teknik penggunaan penghakiman bersyarat JavaScript.

Pembelajaran yang disyorkan: "Tutorial Video JavaScript"