Explication détaillée des paramètres par défaut des fonctions de traitement dans les environnements ES5 et ES6

Cette fois, je vais vous apporter une explication détaillée des étapes pour les paramètres par défaut des fonctions de traitement dans les environnements ES5 et ES6. Quelles sont les précautions concernant les paramètres par défaut des fonctions de traitement dans les environnements ES5 et ES6. Ce qui suit est un cas pratique. Jetons un coup d'œil.

La valeur par défaut de la fonction est quelque chose qui améliore considérablement la robustesse (c'est-à-dire qu'elle rend le programme plus robuste)

Description MDN des paramètres par défaut de la fonction : les paramètres par défaut de la fonction ne permettent de transmettre aucune valeur ou un élément non défini Utilisez les paramètres par défaut lors de la saisie.

ES5

Utiliser logique ou || pour implémenter

Comme nous le savons tous, dans la version ES5, il n'existe pas de méthode directe pour gérer la valeur par défaut de la fonction
, nous ne pouvons donc améliorer la fonction de la fonction que nous-mêmes, ce qui se fait généralement comme ceci :

function doSomething (name, age) {
 name = name || 'default name'
 age = age || 18
 console.log(name, age)
}

Nous le ferons. Les deux paramètres de la fonction, nom et âge, sont traités avec des valeurs par défaut. Sinon, utilise la valeur par défaut .

Après avoir exécuté la fonction, il ne semble y avoir rien de mal :

doSomething()    // default name, 18
doSomething('Niko') // Niko    , 18
doSomething(, 12)  // default name, 12

Cependant, lorsque nous exécutons un tel code, nous obtiendrons des résultats inattendus :

doSomething('Niko', 0) // Niko, 18

On peut constater que pour le paramètre 0, notre méthode d'implémentation de paramètre par défaut ci-dessus est problématique

Tout comme les quatre expressions ci-dessous, elles afficheront toutes des résultats erronés, ce qui est évident. ci-dessus la définition MDN des paramètres par défaut de la fonction :

console.log(0     || 'wrong')
console.log(''    || 'wrong')
console.log(null   || 'wrong')
console.log(false   || 'wrong')

Posture correcte

Donc, la valeur par défaut correcte dans le traitement de la valeur ES5 devrait être comme ceci :

function doSomething (name, age) {
 if (name === undefined) {
  name = 'default name'
 }
 if (age === undefined) {
  age = 18
 }
 console.log(name, age)
}

Utilisez l' opérateur ternaire pour simplifier l'opération

ou nous pouvons le raccourcir à la forme d'opérateur ternaire :

function doSomething (name, age) {
 name = name === undefined ? 'default name' : name
 age = age === undefined ? 18       : age
 console.log(name, age)
}

Utiliser la fonction pour l'encapsulation

Mais si on écrit une fonction à chaque fois, on doit faire ces opérations à plusieurs reprises
C'est trop gênant, nous faisons donc une simple encapsulation de cette logique :

function defaultValue (val, defaultVal) {
 return val === undefined ? defaultVal : val
}
function doSomething (name, age) {
 name = defaultValue(name, 'default name')
 age = defaultValue(age , 18)
 console.log(name, age)
}

De cette façon, la logique des paramètres par défaut de la fonction est implémentée de manière très concise dans ES5

une chose

Concernant la méthode d'implémentation de la fonction defaultValue ci-dessus, après avoir raisonnablement utilisé les avantages des langages faiblement typés
nous pouvons utiliser cette méthode pour sauvegarder le fonctionnement de l'opérateur ternaire :

function defaultValue () {
 return arguments[+(arguments[0] === undefined)]
}

Nous savons que les arguments représentent tous les paramètres réels de la fonction

Nous utilisons des arguments[0] pour obtenir le premier paramètre réel, puis effectuons une comparaison congruente avec undefined

Mettez l'expression dans le couche externe Le résultat est converti en nombre, puis cette valeur est utilisée comme indice pour obtenir le paramètre correspondant dans les arguments.

Comme il est converti à partir d'une valeur booléenne, il n'y a que deux options : 0 et 1.

réalise également la fonction de l'opérateur ternaire ci-dessus.

ES6

La valeur par défaut de la fonction dans la version ES6 est essentiellement la routine que nous avons implémentée ci-dessus

Mais parce que Il est natif, il y aura donc une nouvelle syntaxe correspondante, qui pourra être utilisée de manière plus concise :

function doSomething (name = 'default name', age = 18) {
 console.log(name, age)
}

ES6 fournit une nouvelle syntaxe qui nous permet d'écrire = [defaultValue] directement après les paramètres de déclaration de la fonction. Le formulaire est utilisé pour définir la valeur par défaut d’un certain paramètre.
L'utilisation de cette méthode élimine directement le besoin de vérifier la valeur par défaut à l'intérieur de la fonction, permettant à la fonction de se concentrer sur ce qu'elle doit faire.

Comment lever une exception pour certains paramètres obligatoires

Cette nouvelle syntaxe d'ES6 peut nous faire une très bonne erreur rappel pour un paramètre obligatoire :

function requireParams () {
 throw new Error('required params')
}
function doSomething (name = requireParams(), age = 18) {
 // do something
}

Si le paramètre name n'est pas défini, la règle de valeur par défaut sera déclenchée

puis la fonction requireParams est appelée, et on lance directement dans la fonction Une erreur

Traitement des valeurs par défaut des paramètres de structure complexes

Le traitement ci-dessus concerne uniquement les données de type de base simples, mais si nous avons une fonction comme ce qui suit :

function init ({id, value}) {}
init({
 id: 'tagId',
 value: 1
})

如果在ES5环境下，针对这种参数的默认值处理将会变得无比复杂

首先要判断这一个参数是否存在，然后在判断参数中的所有key是否存在

而在ES6中，可以这样来做：

function init ({
 id  = 'defaultId',
 value = 1
} = {}) {
 console.log(id, value)
}
init()

首先在解构函数的后边添加默认值= {}，然后针对每一项参数添加默认值，很简洁的就实现了我们的需求。

ES5版本的polyfill代码在仓库中的位置：defaultValue

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现无缝轮播与左右点击步骤详解

nodejs更改项目端口号步骤详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!