Introduction étendue aux fonctions es6 (exemple de code)

Cet article vous apporte une introduction détaillée aux fonctions es6 (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Valeurs par défaut des paramètres de fonction

Nous savons tous que déclarer une fonction peut définir des paramètres formels, mais avez-vous déjà pensé que les paramètres formels peuvent également définir directement des valeurs par défaut ? comment l'écrire ensuite

Code

function f(x,y=2) {
    return x+y
}
console.log(f(2)) // 4

Le petit exemple ci-dessus définit simplement une valeur par défaut de 2 pour y, puis lorsque nous utilisons cette fonction, nous transmettons uniquement le paramètre 2 de x, donc nous obtiendrons 4, et si nous passons 1 comme paramètre à y ? Quel genre de résultat obtiendrons-nous ? Si nous continuons à regarder l'exemple ci-dessous

function f(x,y=2) {
    return x+y
}
console.log(f(2，1)) // 3

nous obtiendrons 3, car si vous transmettez les paramètres réels, la valeur par défaut sera remplacée. à expérimenter par eux-mêmes ! ! !

function f(x，x,y=2) {
    return x+y
}
console.log(f(2，2, 1)) // 报错

L'exemple ci-dessus signalera une erreur car nous ne pouvons pas définir les mêmes paramètres

let x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

var x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

function f(x,y=x) {
    console.log(x,y) // 2 2
    var x = 3
    console.log(x,y) // 3 2
    return x+y
}
console.log(f(2)) // 5

Les trois exemples ci-dessus sont des exemples de portée des paramètres de fonction. Jetons un coup d'œil au premier. 1 Dans le deuxième exemple, la valeur par défaut de la fonction aura sa propre portée distincte, donc cela ne fonctionnera pas si nous déclarons le x modifié à l'extérieur. Mais dans le troisième exemple, nous modifions x à l'intérieur de la fonction. à notre La valeur imprimée est visible. Avant la déclaration, nos x et y étaient tous deux 2. Il n'y a pas de promotion variable ici, x devient 3 et y reste inchangé, nous obtenons donc 5

paramètre de repos

官方注解：ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

Code

function f(...x) {
    console.log(x) // [1,2,3]
}
f(1,2,3)

Dans l'exemple ci-dessus, nous obtiendrons un tableau, qui est exactement tel qu'il est défini. Il rassemblera les variables redondantes dans un tableau.

function f(arr,y,...x) {
    console.log(x)
}

function f(arr,...x，y) {
}

Le premier des deux exemples ci-dessus peut être exécuté et vous pouvez obtenir les résultats souhaités, mais le second signalera une erreur car le paramètre rest ne peut être placé qu'à la dernière position du paramètre

Comment utiliser le repos en mode strict ?

从Es5开始函数内已经可以定义严格模式了，但Es6规定函数参数默认值定义严格模式会报错，但也要看严格模式定义在局部还是全局

Si vous ne comprenez pas le mode strict, vous pouvez y jeter un œil et en apprendre davantage

Strict mode

Code

 function fn(a=5) {
   'use strict';
   console.log(a)
   }
   fn()

Dans l'exemple ci-dessus, nous avons défini le mode strict à l'intérieur de la fonction, mais elle n'a pas renvoyé le résultat comme prévu, mais a signalé une erreur. Jetons un coup d'œil à l'explication officielle : le mode strict à l'intérieur d'une fonction s'applique à la fois aux corps de fonction et aux paramètres de fonction. Cependant, lorsque la fonction est exécutée, les paramètres de la fonction sont exécutés en premier, puis le corps de la fonction est exécuté. C'est-à-dire que si le mode strict est défini à l'intérieur de la fonction, les paramètres de la fonction sont exécutés en premier, puis le corps de la fonction (si le mode strict n'est pas défini, les paramètres de la fonction sont exécutés en premier), il est donc déraisonnable de vérifier si les paramètres sont en mode strict dans le corps de fonction

Alors comment éviter de telles erreurs ? Code

   'use strict';
   function fn2(a=5) {
       console.log(a)
   }
   fn2()
   
    function fn() {
   'use strict';
       return function (a=5) {
           console.log(5)
       }
   }
   fn()() // 5

Nous pouvons définir le mode strict globalement, ou le définir à l'intérieur d'une fonction et renvoyer une fonction avec des paramètres, afin que nous puissions contourner les paramètres de la fonction d'exécution et exécuter la fonction Non une erreur sera signalée lors de la saisie de

attribut de nom

 官方注解： 函数的name属性，返回该函数的函数名  使用方式   函数名.name

code

function a() {
}
console.log(a.name) // a

function b() {
}
console.log(b.name) // a

Dans les deux exemples ci-dessus, nous obtiendrons le nom de la fonction en utilisant le attribut name, bien sûr Es5 Il peut également être utilisé Vous pouvez essayer de le tester dans l'environnement Es6 et Es5

Fonction flèche

  let fn = a => a
  console.log(fn(10)) // 10
  
  // 对比
  
  let fn1 = function (a) {
      return a
  }
  console.log(fn1(10)) //10
  
  let fn2 =  (a,b) => a+b
  console.log(fn2(1,2))
  
  // 对比
  
  let fn21 = function (a,b) {
      return a+b
  }
  console.log(fn2(1,2))

Nous pouvons jeter un œil à la fonction flèche. ci-dessus et les fonctions que nous écrivons couramment dans Es5. La différence est que l'écriture des lettres anglaises est considérablement réduite et devient plus concise. En fait, les fonctions fléchées et les fonctions ordinaires ont des fonctions similaires, et elles sont simples et faciles à comprendre. imbriqués les uns dans les autres. Ils sont très utiles pour la propreté de votre propre code. J'encourage tout le monde à utiliser davantage la fonction des flèches, il y a alors plusieurs points à noter sur les fonctions des flèches dont vous devez vous souvenir

L'objet this dans le corps de la fonction est l'objet où il est défini, pas l'objet où il est utilisé (ce point est fixe)

1. Ne peut pas être utilisé comme constructeur, c'est-à-dire que la nouvelle commande ne peut pas être utilisé, sinon une erreur sera générée
2. L'objet arguments ne peut pas être utilisé, car l'objet n'existe pas dans le corps de la fonction. Si vous souhaitez l'utiliser, vous pouvez utiliser le paramètre rest à la place
3. La commande rendement ne peut pas être utilisée, donc la fonction flèche ne peut pas être utilisée comme fonction Générateur (nous mentionnerons cette fonction à la fin)
4. Appel de queue

Code

 通俗的解释：就是在函数中最后一步调用函数

Récursion de queue

  let fn = () => {
  console.log(123)
  return () => 5
  }
  console.log(fn()()) // 123     5

Faire un appel récursif lui-même dans la dernière étape à l'intérieur du fonction pour obtenir l'effet récursif

let fn = (a,b) => {
  if(a===b) return b
  console.log(1)
  return fn(a+1, b)
  }
  console.log(fn(1,5))

La virgule finale du paramètre de fonction

Dans l'exemple ci-dessus, nous avons ajouté une virgule après le paramètre. Après avoir exécuté le résultat, nous avons constaté qu'il était. peut fonctionner normalement, mais je n'obtiendrai pas d'erreur dans l'environnement es6. J'ai essayé es5 et aucune erreur n'a été signalée. Vous pouvez l'essayer à nouveau. L'extension de la fonction

Es7中允许函数形参最后一个带有逗号，以前都是不允许带有逗号的
  let fn = (a,) => {
      console.log(a)
  }
  fn(1)

se termine ici. à apprendre sont les fonctions fléchées et le transfert de valeur des paramètres de repos, ainsi que les fonctions en mode strict Le fonctionnement de

Cet article est terminé ici Pour un contenu plus passionnant, vous pouvez faire attention à. la rubrique

Vidéo du didacticiel JavaScript du site PHP chinois !

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!