JavaScript arguments mot-clé et arguments multiples ...args

Question

J'ai quelques problèmes avec mon code. Je vais vous montrer deux versions de mon code, mais l'une d'entre elles ne fonctionne pas.

Ce code utilisant le arguments Le mot-clé ne fonctionne pas :

$(document).ready(function(){
  var data = {
    'one':'b',
    'two':'c',
    'three':'d'
  }
  function func(){
    for(var i=0;i<arguments.length;i++){
      $('.a').each(function(){
        if($(this).hasClass(data[arguments[i]])){
          $(this).css('background','red')
        }
      })
    }
  }
  func('one','two')
})

body{
  margin:0;
  pading:0;
  height:100vh;
}
.a{
  height:50px;
  width:50px;
  background:green;
  margin:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a"></div>
<div class="a b"></div>
<div class="a c"></div>

Cependant, lorsque j'utilise un paramètre de repos, ...val tout fonctionne parfaitement :

$(document).ready(function() {
  var data = {
    'one': 'b',
    'two': 'c',
    'three': 'd'
  }

  function func(...val) {
    for (var i = 0; i < val.length; i++) {
      $('.a').each(function() {
        if ($(this).hasClass(data[val[i]])) {
          $(this).css('background', 'red')
        }
      })
    }
  }
  func('one', 'two')
})

body {
  margin: 0;
  pading: 0;
  height: 100vh;
}

.a {
  height: 50px;
  width: 50px;
  background: green;
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a"></div>
<div class="a b"></div>
<div class="a c"></div>

Comment faire pour que ce code fonctionne parfaitement sans utiliser ...val et en utilisant uniquement le arguments mot-clé ?

Answer 1

En effet, "arguments" est un mot clé réservé en Javascript. Son contexte changera lorsque vous l'appellerez à l'intérieur d'une autre fonction dans le cadre de la fonction .each() . Il ne s'agit pas d'une variable comme les autres, qui sera passée telle quelle à l'intérieur.

Si vous voulez y parvenir, vous devez utiliser les fonctions de flèche.
Fonctions fléchées en JS
J'espère que le problème a été résolu.

Answer 2

Il y a deux autres façons possibles de procéder en plus de la vôtre :

• Utilisez une fonction flèche pour que la portée des arguments soit toujours liée à la fonction externe. extérieure.
• Si vous voulez conserver la fonction, vous pouvez passer la valeur à chaque fois en tant que paramètre, mais ce n'est qu'un gaspillage de puissance de calcul.

Answer 3

Essayez d'utiliser une variable locale dans func() :

    $(document).ready(function(){
      var data = {
        'one':'b',
        'two':'c',
        'three':'d'
      }
      function func(){
        for(var i=0;i<arguments.length;i++){
          var key = arguments[i]
          $('.a').each(function(){
            if($(this).hasClass(data[key])){
              $(this).css('background','red')
            }
          })
        }
      }
      func('one','two')
    })

Dans le formulaire affiché à l'origine, la fonction anonyme imbriquée faisait référence à sa propre fonction arguments mais l'intention (telle que je l'ai interprétée) était de se référer à la arguments de l'appel à func() à la place. Comme cela a été souligné par d'autres personnes, cela n'est pas possible puisque la fonction arguments est toujours local à la fonction courante. Par conséquent, en ajoutant une variable à la fermeture (à l'intérieur de func() mais à l'extérieur de la fonction autonome imbriquée), vous pouvez faire référence à cette "copie" des données dans la fonction externe arguments à l'intérieur de la fonction imbriquée.

Answer 4

Vous devez utiliser le paramètre d'entrée ( ...val dans votre cas). Chaque fois que vous appelez votre méthode, vous lui passez un nouveau paramètre.