Question

我的代码有一些问题。在这里，我将显示我的代码的两个版本，但是其中一个无法正常工作。

使用arguments关键字的此代码不起作用：

$(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>

但是，当我使用rest参数...val时，一切运行正常：

$(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>

如何在不使用...val且仅使用arguments关键字的情况下使此代码完美地工作？

Answer 1

这是因为'arguments'是Javascript中的保留关键字。当您在.each()内的其他函数中调用上下文时，上下文将发生变化。它不仅像其他任何变量一样按原样传递到内部。

如果要实现此目的，应使用箭头功能。
Arrow functions in JS
希望此问题已解决。

Answer 2

除了您的方式外，还有两种其他可能的方法：

使用箭头函数，以便参数范围仍然链接到外部功能。
如果要保留该函数，可以每次将值作为参数传递，但这只是浪费计算能力。

Answer 3

尝试在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')
    })

在最初发布的表单中，嵌套的匿名函数是指其自己的自变量，但意图（按照我的解释）是指的是自变量调用func（）代替。正如其他人所指出的那样，这是不可能的，因为 arguments 关键字始终是当前函数的本地变量。因此，通过在闭包中添加一个var（在func（）内部，但在嵌套的匿名函数外部），则可以在外部自变量中引用该数据的“副本”，而不是在嵌套函数内部。

Answer 4

您需要使用输入参数（在您的情况下为...val）。每次调用方法时，都会在其中传递一个新参数。

JavaScript参数关键字和多个参数... args

4 个答案: