javascript – jQuery迭代函数

像each这样的jQuery迭代器函数具有与此类似的语法：

.each(function(index, element))

这似乎意味着匹配此声明的函数必须采用2个参数.就像是：

function my_func(index, element){
  alert(index+":"+element);
}

对我来说,这给出了两个可能的声明：

$("li").each(my_func);

要么

$("li").each(function(index, element) {alert(index+":"+element);});

第一个让我感到困惑,因为我没有看到传递给my_func的索引或元素. jQuery中是否有一些魔法可以知道my_func需要两个参数？

其次,如果我宣布了

var my_func= function(index, element){
  alert(index+":"+element);
}

这会改变什么.我的理解是,第一个是声明式,第二个是表达式,但是,在这种情况下,它们的行为应该相同吗？

最后,我看到的大多数实现都是这样的：

$("li").each(function(){alert(this)});

每个回调的所有参数都是可选的吗？

解决方法:

将函数作为回调传递的方法

在这：

$("li").each(my_func);

您只是将对my_func的引用传递给.each()方法.每个方法本身都会在调用它时将两个参数传递给该函数.如果你想访问这两个参数,那么你可以在你自己的my_func定义中将它们声明为参数,但你不必这样做.无论你是否申报,论证都会在那里.

您可以通过多种不同方式声明my_func：

// somewhat normal way and you can easily access the index and element arguments
function my_func(index, element) {
     // code here
}

// if you don't need index and element, you don't need to declare them
// but they are still actually there and can be reached via the arguments object
function my_func() {
     // code here
     console.log(arguments[0]);   // index
}

使用var声明函数

和…之间的不同：

var my_func= function(index, element){
  alert(index+":"+element);
}

和

function my_func(index, element){
  alert(index+":"+element);
}

主要是时机之一.在第二个中,my_func被定义为函数,只要它所在的javascript文件被定位并被解析,并且它定义的范围变为实时并且可以“好像”它在范围的最顶部被声明在其中定义.这通常被称为“提升”,其中定义被提升到定义它的范围的顶部.

在第一个中,my_func不是函数UNTIL,该JS行在该javascript文件的正常执行流程中执行.

除了时间,你可以互换使用这两个.如果个人更喜欢函数xxx()形式,因为那时我不必担心函数是否在声明运行之前被调用 – 但这实际上是个人风格偏好.

你必须声明回调参数吗？

对于上一个问题,如果要使用它们,只需要声明回调的参数.在javascript中,函数是完全相同的函数,无论您是否使用参数声明它(在C语言中都不是这种情况),因此如果您想通过名称访问它们,则只需要声明它们.

javascript中的函数参数声明是可选的.您可以声明多于传递给函数的函数,并且可以声明少于传递给函数的函数.在javascript中都不会导致任何类型的错误.

假设你有这个代码：

 function callWithDelay(t, fn, arg1, arg2) {
     setTimeout(function() {
         fn(arg1, arg2);
     }, t);
 }

使用它的预期方法是定义一个带有两个参数并将其作为fn参数传递的函数.

 function myFunc(msg, color) {
     var obj = document.getElementById("error")
     obj.innerHTML = msg;
     obj.style.color = color;
 }

 callWithDelay(2000, myFunc, "Both first and last name are required", "red");

但是,您不必传递具有这些参数的函数.你可以这样做(通过arguments对象而不是名字访问参数)：

 function myFunc() {
     var obj = document.getElementById("error")
     obj.innerHTML = arguments[0];
     obj.style.color = arguments[1];
 }

 callWithDelay(2000, myFunc, "Both first and last name are required", "red");

或者,您可以传递一个甚至不需要这些参数的函数：

 function myFunc() {
     document.getElementById("error").style.display = "none";
 }

 callWithDelay(2000, myFunc);

callWithDelay函数不关心你传递什么类型的函数引用.它几乎可以是任何功能. callWithDelay函数会将两个参数传递给它在调用它时传递给它的回调,但它完全取决于接收函数是否使用这些参数.在最后一个例子中,我在调用时忽略了callWithDelay的最后两个参数.当你省略一个参数时(在调用列表的末尾),那个参数就是未定义的.在javascript中,undefined是一个合法的值.因此,当我将它们调用callWithDelay(2000,myFunc)时,它们是未定义的,因此未定义的是作为其两个参数传递给myFunc回调的内容.在这种情况下,由于没有使用这些参数,没有人关心它们是未定义的.

函数重载 – 检查传递的参数类型

在javascript中,您还可以检查传递给函数的参数类型,并相应地调整您的行为.例如,假设您有一个隐藏DOM元素的简单函数：

function hide(elem) {
    elem.style.display = "none";
}

// usage
var obj = document.getElementById("test");
hide(obj);

此函数假定elem是一个DOM元素,并且仅在传递的内容时才起作用.但是,如果我们还想允许某人传递元素的id,该怎么办？我们可以检查传递给hide的参数,看看它是否是一个字符串,如果是的话,我们可以将它视为id值.

function hide(elem) {
    // if a string was passed, find the DOM object using that string as an id
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }
    elem.style.display = "none";
}

// first usage
var obj = document.getElementById("test1");
hide(obj);

// second uage
hide("test2");

现在,假设我们不仅要允许传递单个DOM元素,还要允许DOM元素数组,以便该函数可以对数组中的每个DOM元素进行操作.

function hide(elem) {
    // if a string was passed, find the DOM object using that string as an id
    if (typeof elem === "string") {
        document.getElementById(elem).style.display = "none";
    } else if (typeof elem === "object" && Object.prototype.toString.call(elem) === "[object Array]") {
        // an array was passed
        for (var i = 0; i < elem.length; i++) {
            elem[i].style.display = "none";
        }
    } else {
        // only a single DOM element was passed
        elem.style.display = "none";
    }
}

// usages
hide(obj);
hide([obj1, obj2, obj3]);
hide("test");

标签：declarative,javascript,jquery,function,expression
来源： https://codeday.me/bug/20190831/1772930.html