Recherche…


Introduction

Le nœud 6 devenant la nouvelle version LTS du nœud. Nous pouvons voir un certain nombre d'améliorations apportées au langage grâce aux nouvelles normes ES6. Nous allons passer en revue certaines des nouvelles fonctionnalités introduites et des exemples de leur mise en œuvre.

Paramètres de fonction par défaut

function addTwo(a, b = 2) {
    return a + b;
}

addTwo(3) // Returns the result 5

Avec l'ajout de paramètres de fonction par défaut, vous pouvez désormais rendre les arguments facultatifs et leur donner une valeur par défaut.

Paramètres de repos

function argumentLength(...args) {
    return args.length;
}

argumentLength(5) // returns 1
argumentLength(5, 3) //returns 2
argumentLength(5, 3, 6) //returns 3

En préfaçant le dernier argument de votre fonction avec ... tous les arguments passés à la fonction sont lus comme un tableau. Dans cet exemple, nous obtenons plusieurs arguments et obtenons la longueur du tableau créé à partir de ces arguments.

Opérateur d'épandage

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

La syntaxe de propagation permet à une expression d'être développée dans des endroits où plusieurs arguments (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableau) ou plusieurs variables sont attendus. Tout comme les paramètres de repos, préférez simplement votre tableau avec ...

Fonctions de flèche

La fonction de flèche est la nouvelle façon de définir une fonction dans ECMAScript 6.

// traditional way of declaring and defining function
var sum = function(a,b)
{
    return a+b;
}

// Arrow Function
let sum = (a, b)=> a+b;

//Function defination using multiple lines 
let checkIfEven = (a) => {
    if( a % 2 == 0 )
        return true;
    else
        return false;
}

"this" in Arrow Function

Cette fonction in fait référence à un objet d'instance utilisé pour appeler cette fonction mais cette fonction en flèche est égale à celle de la fonction dans laquelle la fonction de flèche est définie.

Comprenons en utilisant le diagramme portée lexicale de cette fonction flèche

Comprendre à l'aide d'exemples.

var normalFn = function(){
   console.log(this) // refers to global/window object.
}

var arrowFn = () => console.log(this); // refers to window or global object as function is defined in scope of global/window object
    
var service = {

    constructorFn : function(){

        console.log(this); //  refers to service as service object used to call method.

        var nestedFn = function(){
            console.log(this); // refers window or global object because no instance object was used to call this method.
        }
        nestedFn();
    },
    
    arrowFn : function(){
        console.log(this); // refers to service as service object was used to call method.
        let fn = () => console.log(this); // refers to service object as arrow function defined in function which is called using instance object.
        fn();
    } 
}

// calling defined functions
constructorFn();
arrowFn();
service.constructorFn();
service.arrowFn();

Dans la fonction flèche, il s'agit de la portée lexicale qui est la portée de la fonction où la fonction flèche est définie.
Le premier exemple est la manière traditionnelle de définir les fonctions et, par conséquent, cela fait référence à l' objet global / window .
Dans le deuxième exemple, ceci est utilisé à l’intérieur de la fonction flèche, c’est-à-dire qu’il fait référence à la portée où il est défini (qui est Windows ou objet global). Dans le troisième exemple, il s'agit d'un objet de service, car l'objet de service est utilisé pour appeler la fonction.
Dans le quatrième exemple, la fonction de flèche dans défini et appelé à partir de la fonction dont la portée est le service , par conséquent, il imprime un objet de service .

Remarque: - L'objet global est imprimé dans Node.Js et l'objet Windows dans le navigateur.



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow