Javascript for Each作为特殊变量

Javascript forEach as special variable

本文关键字：变量 for Each Javascript      更新时间：2023-09-26

我试图理解这里使用svg制作的径向进度条的代码，但我无法理解下面部分中使用的var forEach。它是一个特殊定义的变量吗？因为如果我们用其他变量（如temp等）替换它，它就不起作用了。此外，请解释传递到函数中的参数的来源。

var forEach = function (array, callback, scope) {
     for (var i = 0; i < array.length; i++) {
     callback.call(scope, i, array[i]);
     }}

以下是完整的代码：我们将不胜感激：）

<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        var con = "<div class='center'></div>";
        $("body").prepend(con);
           var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
             svg.setAttributeNS(null, 'width', '200px');
             svg.setAttributeNS(null, 'height', '280px');
             svg.setAttributeNS(null, 'class', 'progress');
             svg.setAttributeNS(null, 'data-progress', '65');
             $('.center').prepend(svg);
             var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
             path.setAttributeNS(null, 'class', 'fill');
             path.setAttributeNS(null, 'd', 'M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0');
             $("svg").prepend(path);
             var spath = document.createElementNS("http://www.w3.org/2000/svg", "path");
             spath.setAttributeNS(null, 'class', 'track');
             spath.setAttributeNS(null, 'd', 'M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0');
             $("svg").prepend(spath);
             var forEach = function (array, callback, scope) {
                  for (var i = 0; i < array.length; i++) {
                    callback.call(scope, i, array[i]);
                 }}
     window.onload = function(){
       var max = -219.99078369140625;
       forEach(document.querySelectorAll('.progress'), function (index,value){
       percent = value.getAttribute('data-progress');
       value.querySelector('.fill').setAttribute('style',
       'stroke-dashoffset: ' + ((100 - percent) / 100) * max);});}})
 </script>

var forEach

在这里，我们定义了一个变量，该变量包含对函数的引用。

function(array, callback, scope)

该功能接受三个参数：

  • array：我们可以遍历的数组
  • callback：对函数的引用
  • scope：将用于运行回调的作用域（这定义了回调内部的"This"）

for (var i = 0; i < array.length; i++)

只是一个for循环。

callback.call(scope, i, array[i])

call（）是Function类型的方法，它相当于只调用函数，就像调用callback（）一样，但还有一个额外的好处，那就是可以在特定的范围内运行函数。即：

var f = function(){
    console.log("Hi, " + this.name);
};
var scope1 = {name: "John"};
var scope2 = {name: "Peter"};
f.call(scope1);// logs Hi, John
f.call(scope2);// logs Hi, Peter

另外两个call（）参数作为参数传递给函数。

希望这能澄清源参数是如何工作的。

记住两件事：

  1. 在JavaScript中，函数是数据。这意味着它们可以被指定为变量的值，就像任何其他数据一样。但是，因为它们是函数，所以有两种方法可以与数据交互：

    1a。作为数据：

     var x = function(){alert("test");};
 var y = x;

    1b。作为可调用代码：

     x(); // runs the function stored in x

  2. 属性名称可以隐藏在较小的范围内。forEach是Array.prototype对象所具有的属性的名称，但属性名称可以被重写，从而导致标识符（属性名称）对给定范围具有不同的含义。在您的案例中，forEach实际上并没有隐藏Array.prototype的forEach，因为它没有被指定为该对象的属性名，但它只是一个保存函数数据并使其可调用的正则变量。

相关文章：