高阶函数实践-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangzhiyong666/article/details/82026519

本文探讨了高阶函数在JavaScript中的应用，包括将函数作为参数传递和作为返回值使用。通过具体示例展示了如何利用高阶函数遍历DOM元素并进行样式修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script>
        /*
                高阶函数：
        1、作为参数的函数
        2、作为返回值的函数
        */
       window.onload = function() {
//         var aDiv = document.getElementsByTagName('div');
//         for(var i = 0, len = aDiv.length; i < len; i++){
//             aDiv[i].innerHTML = i;
//         }
//         var aSpan = document.getElementsByTagName('span');
//         for(var i = 0, len = aSpan.length; i < len; i++){
//             aSpan[i].innerHTML = i;
//         }

           function each(elements, callback) {
               var callback = callback || function(){};
               for(var i = 0, len = elements.length; i < len; i++){
                   elements[i].innerHTML = i;
                   var flag = callback.call(elements[i],i, elements[i]);
                   if(flag == false){
                       break;
                   }
               }
           }
           var aDiv = document.getElementsByTagName('div');
           var aSpan = document.getElementsByTagName('span');
           each(aDiv,function(index, element){
               console.log(this);
               if(index > 1){
                   return false;
               }
               element.style.backgroundColor = 'pink';
           });
           each(aSpan);
       }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>

    <span></span>
    <span></span>
    <span></span>
</body>
</html>

高阶函数应用场景each