Visualizzazione dei valori di diversi campi in un array con ternario
Questo piccolo pezzo di codice mostra il valore di diversi campi di un array. Sto cercando un modo per migliorare questa funzione ternaria nidificata. Una if statementsoluzione sarebbe ovvia, quindi mi chiedo se ci sia qualcosa di più elegante per risolverlo.
<button type="button" onclick="myFunction()">Check</button>
<p id="demo"></p>
<script>
function getArray(value){
var showValue = (value.value1 > 0) ? value.value1 :
(value.value2 > 0) ? value.value2 :
(value.value3 > 0) ? value.value3 : 0;
document.getElementById("demo").innerHTML += value.system + ": "+ showValue + " ";
}
function myFunction() {
var array = [
{system:"Abba", value1:0, value2:1, value3:0},
{system:"Mars", value1:0, value2:4, value3:0},
{system:"Nexus", value1:0, value2:0, value3:6},
];
array.map(getArray);
}
</script>
Produzione
Abba: 1 Mars: 4 Nexus: 6
Risposte
Sto cercando un modo per migliorare questa funzione ternaria nidificata
Le chiavi da controllare potrebbero essere ripetute, ad es
function getArray(value) {
var showValue = 0;
for (let key of ['value1', 'value2', 'value3']) {
if (value[key] > 0) {
showValue = value[key];
break;
}
}
document.getElementById("demo").innerHTML += value.system + ": " + showValue + " ";
}
function myFunction() {
var array = [
{system:"Abba", value1:0, value2:1, value3:0},
{system:"Mars", value1:0, value2:4, value3:0},
{system:"Nexus", value1:0, value2:0, value3:6},
{system:"Zeroes", value1:0, value2:0, value3:0}
];
array.forEach(getArray);
}
<button type="button" onclick="myFunction()">Check</button>
<p id="demo"></p>
E questo potrebbe essere semplificato utilizzando il metodo dell'array find()combinato con l'OR logico, ovvero ||per un valore di fallback utilizzando la valutazione del cortocircuito per il caso in cui nessun valore è maggiore di zero:
function getArray(value){
//find the key that has a value greater than zero
const key = ['value1', 'value2', 'value3'].find(key => value[key] > 0);
//return the value that is greater than zero, or else zero in case no value is greater than zero
const showValue = value[key] || 0;
document.getElementById("demo").innerHTML += value.system + ": "+ showValue + " ";
}
function myFunction() {
var array = [
{system:"Abba", value1:0, value2:1, value3:0},
{system:"Mars", value1:0, value2:4, value3:0},
{system:"Nexus", value1:0, value2:0, value3:6},
{system:"Zeroes", value1:0, value2:0, value3:0}
];
array.forEach(getArray);
}
<button type="button" onclick="myFunction()">Check</button>
<p id="demo"></p>
Altri punti di revisione
Uso improprio del mapmetodo
Il map()metodo " crea un nuovo array popolato con i risultati della chiamata di una funzione fornita su ogni elemento nell'array chiamante " 1 . Per questo codice forEach()può essere utilizzato (come nei due frammenti precedenti) poiché il valore restituito di ciascuna iterazione non viene utilizzato dopo l'esecuzione del callback. .map()potrebbe essere utilizzato per restituire una stringa per ogni oggetto e quindi aggiornare l'elemento DOM solo una volta, il che sarebbe meglio per molteplici motivi:
- meno ricerche DOM: ricorda che non sono economiche
- Array.join()può essere utilizzato per separare ogni stringa con uno spazio, senza aggiungere uno spazio in eccesso alla fine dell'output
- la funzione avrebbe una sola responsabilità, in linea con il principio della responsabilità unica
function getArray(value){
const key = ['value1', 'value2', 'value3'].find(key => value[key] > 0);
const showValue = value[key] || 0;
return value.system + ": "+ showValue;
}
function myFunction() {
var array = [
{system:"Abba", value1:0, value2:1, value3:0},
{system:"Mars", value1:0, value2:4, value3:0},
{system:"Nexus", value1:0, value2:0, value3:6},
{system:"Zeroes", value1:0, value2:0, value3:0}
];
document.getElementById("demo").innerHTML = array.map(getArray).join(" ");
}
<button type="button" onclick="myFunction()">Check</button>
<p id="demo"></p>
Mantieni HTML e JavaScript separati
L'HTML ha un onclickattributo:
<button type="button" onclick="myFunction()">Check</button>
Invece di utilizzare tale attributo, la gestione degli eventi può essere impostata in Javascript, ad esempio utilizzando document.addEventListener():
document.getElementById('checkBtn').addEventListener('click', myFunction);
ciò richiederebbe l'aggiunta di un attributo id all'elemento, ad es
<button type="button" id="checkBtn">Check</button>
sebbene siano possibili altri modi per rilevarlo (ad es. nome della classe, elementi di document.forms, ecc. Con questa separazione il JavaScript (logica) può essere modificato senza mai aver bisogno di alterare l'HTML (markup) - particolarmente utile nei progetti più grandi in cui una persona potrebbe aggiornare HTML e un altro il JS.