深入数组 map forEach filter reduce 函数

最新推荐文章于 2025-04-21 14:09:19 发布

原创最新推荐文章于 2025-04-21 14:09:19 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

72 篇文章

订阅专栏

本文深入探讨了JavaScript中数组的forEach、filter、map及reduce方法的手动实现过程，包括如何处理对象的深度克隆，以及reduce方法的灵活运用。

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

<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        var personArr = [
            { name: 'gao', src: '../images/1.jpg', sex: 'f' },
            { name: 'bang', src: '../images/2.jpg', sex: 'm' },
            { name: 'rong', src: '../images/3.jpg', sex: 'm' }
        ];
        // //1.forEach函数 没法跳出for循环 没法打断遍历
        // //break语句是写在func函数里面的
        // Array.prototype.myForEach=function(func){
        //     for(var i=0;i<this.length;i++){
        //         func(this[i],i,this);
        //     // if(elem.name=="gao"){
        //     //     break;
        //     // }
        //     }
        // }
        // personArr.myForEach(function(elem,index,arr){
        //     console.log(arr);
        //     // if(elem.name=="gao"){
        //     //     break;
        //     // }
        // })


        //filter（）返回的是布尔值
        // Array.prototype.filter = function (func) {
        //     var arr = [];
        //     for (var i = 0; i < this.length; i++) {
        //         var tape = func(this[i], i);//回调函数来控制执行结果 布尔值判断是否返回true
        //         if (tape) {
        //             arr.push(this[i]);
        //         }
        //     }
        //     return arr;
        // }
        // var arr1 = personArr.filter(function (elem, index) {
        //     if (elem.sex == 'f') {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // });
        // console.log(arr1);

        //map()返回的是值
        // Array.prototype.map = function (func) {
        //     var arr=[];
        //     for (var i = 0; i < this.length; i++) {
        //         if(typeof(this[i])=='object'){//如果选项是对象属性类，需要进行深度拷贝再放到数组中
        //             var newObj={};
        //             deepClone(newObj,this[i]);//对对象进行深度拷贝
        //             arr.push(func(newObj,i));//将克隆好的对象进行func（）筛选操作 然后放到数组中
        //         }else{//如果对象是原始数值 就直接放到数组中
        //             arr.push(func(this[i],i));
        //         }
        //     }
        //     return arr;
        // }
        // var arr1 = personArr.map(function (elem, index) {
        //     if (elem.sex == 'f') {
        //         elem.boyF = true;
        //         return elem;
        //     } else {
        //         elem.gf = true;
        //         return elem;
        //     }
        // })
        // console.log(arr1);
        // function deepClone(target, origin) {
        //     var target=target||{};
        //     //容错处理以防如果外部没有传入的空对象，就自己创建一个新的空对象{}，
        //     //若有的话就把旧target对象传给新创建的target
        //     var objStr = '[object Object]';
        //     var arrStr = '[object Array]';
        //     if (origin !== 'null') {
        //         for (var prop in origin) {
        //             if (origin.hasOwnProperty(prop)){
        //                 if (typeof(origin[prop]) == 'object') {
        //                     if (Array.prototype.toString.call(origin[prop]) == objStr) {
        //                         target[prop] = {};
        //                     } else {
        //                         target[prop] = [];
        //                     }
        //                     deepClone(target[prop], origin[prop]);
        //                 } else {
        //                     target[prop] = origin[prop];
        //                 }         
        //             }
        //         }
        //     }
        //      return target;//如果外部调用函数没有传target对象情况，就返回一个复制好的对象
        // }


        //reduce函数
        Array.prototype.reduce=function(func,init){
            var previous=init,k=0;
            if(init==undefined){
                previous=this[0];
                k=1;
            }
            for(k;k<this.length;i++){
                // previous=previous+this[k];
               previous=func(previous,this[k],k);
               //用previous接收，第二遍的时候再将previous传到func函数中
            }
            return previous;//最后的结果赋值到previous中
            
        }
        var arr=[1,2,3,4,5];
        var value=arr.reduce(function(preValue,ele,index){
            return preValue+ele;
        });
        console.log(value);
    

    </script>
</body>

</html>