Je sais que je peux tester une variable javascript, puis la définir si elle n'est pas définie, mais n'y a-t-il pas un moyen de dire

var setVariable = localStorage.getItem ('valeur') || 0;

semble être une manière beaucoup plus claire, et je suis à peu près sûr que j'ai vu cela dans d'autres langues.

Oui, il peut le faire, mais à proprement parler, cela attribuera la valeur par défaut si la valeur récupérée est false , par opposition à vraiment indéfinie . Il serait donc correspondre non seulement , undefinedmais aussi null, false, 0, NaN, "" (mais pas "0" ).

Si vous souhaitez définir la valeur par défaut uniquement si la variable est strictement, undefinedle moyen le plus sûr est d'écrire:

var x = (typeof x === 'undefined') ? your_default_value : x;

Sur les navigateurs plus récents, il est en fait sûr d'écrire:

var x = (x === undefined) ? your_default_value : x;

mais sachez qu'il est possible de renverser cela sur les navigateurs plus anciens où il était permis de déclarer une variable nommée undefinedqui a une valeur définie, provoquant l'échec du test.

La réponse ES6 2018 est :

return Object.is(x, undefined) ? y : x;

Si la variable x n'est pas définie, renvoie la variable y ... sinon si la variable x est définie, renvoie la variable x.

J'avais besoin de "définir une variable si non définie" à plusieurs endroits. J'ai créé une fonction en utilisant la réponse @Alnitak. Espérons que cela aide quelqu'un.

function setDefaultVal(value, defaultValue){
   return (value === undefined) ? defaultValue : value;
}  

Usage:

hasPoints = setDefaultVal(this.hasPoints, true);

Il semble plus logique de vérifier typeofau lieu de undefined? Je suppose que vous attendez un nombre lorsque vous définissez le var 0lorsqu'il n'est pas défini:

var getVariable = localStorage.getItem('value');
var setVariable = (typeof getVariable == 'number') ? getVariable : 0;

Dans ce cas, si ce getVariablen'est pas un nombre (chaîne, objet, peu importe), setVariable est défini sur0

Réponse ES2020

Avec l' opérateur de coalescence Nullish , vous pouvez définir une valeur par défaut si elle valueest nulle ou non définie.

const setVariable = localStorage.getItem('value') ?? 0;

Cependant, vous devez être conscient que l'opérateur de fusion nullish ne renvoie pas la valeur par défaut pour les autres types de valeurs fausses telles que 0et ''.

Veuillez noter que la prise en charge du navigateur pour l'opérateur est limitée. Selon les données de caniuse , seuls 48,34% des navigateurs sont pris en charge (en avril 2020). La prise en charge de Node.js a été ajoutée dans la version 14 .

Si vous êtes un fan FP ( programmation fonctionnelle ), Ramda a une fonction d'aide soignée pour cela appelée defaultTo :

usage:

const result = defaultTo(30)(value)

C'est plus utile lorsqu'il s'agit de undefinedvaleurs booléennes:

const result2 = defaultTo(false)(dashboard.someValue)

var setVariable = (typeof localStorage.getItem('value') !== 'undefined' && localStorage.getItem('value')) || 0;

Je suis également entré dans ce scénario aujourd'hui où je ne voulais pas que zéro soit écrasé pour plusieurs valeurs. Nous avons un fichier avec des méthodes utilitaires courantes pour des scénarios comme celui-ci. Voici ce que j'ai ajouté pour gérer le scénario et être flexible.

function getIfNotSet(value, newValue, overwriteNull, overwriteZero) {
    if (typeof (value) === 'undefined') {
        return newValue;
    } else if (value === null && overwriteNull === true) {
        return newValue;
    } else if (value === 0 && overwriteZero === true) {
        return newValue;
    } else {
        return value;
    }
}

Il peut ensuite être appelé avec les deux derniers paramètres facultatifs si je veux définir uniquement des valeurs non définies ou également écraser les valeurs nulles ou 0. Voici un exemple d'appel à celui-ci qui définira l'ID sur -1 si l'ID est indéfini ou nul, mais ne remplacera pas une valeur 0.

data.ID = Util.getIfNotSet(data.ID, -1, true);

De nos jours, vous pouvez réellement faire votre approche avec JS:

// Your variable is null
// or '', 0, false, undefined
let x = null;

// Set default value
x = x || 'default value';

console.log(x); // default value

Donc, votre exemple fonctionnera:

const setVariable = localStorage.getItem('value') || 0;

Fonctionne même si la valeur par défaut est une valeur booléenne:

var setVariable = ( (b = 0) => b )( localStorage.getItem('value') );

Il me semble que pour les implémentations javascript actuelles,

var [result='default']=[possiblyUndefinedValue]

est une bonne façon de faire cela (en utilisant la déconstruction d'objets).

Affectation logique nulle, solution ES2020 +

De nouveaux opérateurs sont actuellement ajoutés aux navigateurs, ??=, ||=, et &&=. Cet article se concentrera sur ??=.

Ceci vérifie si le côté gauche est indéfini ou nul, court-circuitant s'il est déjà défini. Sinon, le côté droit est affecté à la variable du côté gauche.

Comparaison des méthodes

// Using ??=
name ??= "Dave"

// Previously, ES2020
name = name ?? "Dave"

// Before that (not equivalent, but commonly used)
name = name || "Dave" // name ||= "Dave"

Exemples de base

let a          // undefined
let b = null
let c = false

a ??= true  // true
b ??= true  // true
c ??= true  // false

// Equivalent to
a = a ?? true

Exemples d'objets / de tableaux

let x = ["foo"]
let y = { foo: "fizz" }

x[0] ??= "bar"  // "foo"
x[1] ??= "bar"  // "bar"

y.foo ??= "buzz"  // "fizz"
y.bar ??= "buzz"  // "buzz"

x  // Array [ "foo", "bar" ]
y  // Object { foo: "fizz", bar: "buzz" }

?? = Support du navigateur juillet 2020 - .03%

?? = Documentation Mozilla

|| = Documentation Mozilla

&& = Documentation Mozilla