数组forEach,filter,map,reduce

本文详细解析了JavaScript中数组的五个核心方法:forEach、filter、map、reduce和reduceRight的功能与使用。通过实例展示了如何利用这些方法进行数组操作,包括元素遍历、过滤、映射和累积计算。
foreach不能中途break和return,若有需求用for循环


<script type = "text/javascript">
        var arr = [1,2,3,4,5];
        // 1.forEach 
        //封装forEach
        Array.prototype.myForEach = function(func){
            for(var i=0; i<this.length;i++){
                func(this[i],i);
            }
        }
        //使用格式
        arr.forEach(function(ele,index){
            //ele 元素
            //index 索引
        });
        
        // 2.filter
        // 不改变原始数组
        //封装filter
        Array.prototype.myFilter = function(func){
            var arr = [];
            for(var i=0;i<this.length;i++){
                if(func(this[i],i)){
                    arr.push(this[i]);
                }
            }            
            return arr;
        }
        //使用格式
        var newArr = arr.myFilter(function(ele,index){
            if(index % 2 ==0){
                return true;//返回ture时,在newArr中添加此元素
            }else{
                return false;//返回false时,此元素过滤,newArr中不会出现此元素
            }
        });
        console.log(newArr);//[1,3,5]
        
        //3.map
        //不会改变原始数组,深度克隆或处理
        //封装myMap
        Array.prototype.myMap = function(func){
            var arr = [];
            for(var i = 0; i< this.length; i++){
                if(this[i]&& typeof(this[i])== 'object'){
                    var newObj = {};
                    deepclone(newObj,this[i]);
                    arr.push(func(newObj,i));
                }else{
                    arr.push(func(this[i],i));
                } 
            }
            return arr;
        }
        //深度克隆
        function deepclone(target,option){
            if(option != null){
                var str,temp;
                for(temp in option){
                    if(option[temp] && typeof(option[temp]) == 'object'){
                        if(Object.prototype.toString.call(option[temp])=="[object Array]"){
                            str = [];
                        }else{
                            str = {};
                        }
                        target[temp] = deepclone(str,option[temp]);
                    }else{
                        target[temp] = option[temp];
                    }
                }
            }else{
                target = null;
            }
            return target;
        }
        //使用格式
        var obj1 = [1,2,3,{hobby:{sing:'good',dance:'well'}}],
            obj2 = {};
        obj2 = obj1.myMap(function(ele,index){
            return ele;
        })
        // console.log(obj2);
        //4.reduce 常做累加器
        //封装myReduce
        Array.prototype.myReduce = function(func,init){
            var k = 0;
            if(init===undefined){
                k = 1;
                preValue = this[0];
            }
            for(k;k<arr.length;k++){
                preValue = func(preValue,this[k],k);
            }
            return preValue;
        } 
        //使用格式
        var value = arr.reduce(function(preValue,ele,index){
            // console.log(ele);
            return preValue+ele;
        })
        // console.log(value);//15

        //5.reduceRight 从右向左遍历
        var value1 = arr.reduceRight(function(preValue,ele,index){
            console.log(index);

        })


    </script>

 

<think>好的,我现在要回答用户关于JavaScript中数组forEachmap方法的区别的问题。首先,我需要回忆这两个方法的基本概念和用法,确保自己理解正确,然后组织语言,用清晰的结构解释它们的区别,可能还需要举例说明。 首先,我应该先明确两者的共同点:它们都是数组的迭代方法,都会对数组的每个元素执行回调函数。接下来,关键的不同点是什么?记得forEach没有返回值,而map会返回一个新数组。这一点很重要,但可能用户需要更详细的解释。 然后,我需要考虑它们的用途。forEach通常用于遍历数组执行副作用,比如修改外部变量、打印日志等,而map用于转换数组,生成一个新数组而不改变原数组。副作用和返回值的区别是核心。 接下来,性能方面有没有差异?虽然可能差异不大,但用户可能想知道。不过这可能不是重点,重点还是用法和用途的区别。 回调函数的参数是否相同?是的,都是currentValue, index, array,这可能需要提到,但可能不是主要区别。 是否需要举例说明?比如用forEach改变原数组,或者用map生成新数组的例子,这样用户更容易理解。 可能还要提到链式调用,因为map返回数组,所以可以链式调用其他方法,而forEach不行,这也是一个区别点。 需要确保回答结构清晰,分点说明,可能用数字或标题来组织内容,比如分用途、返回值、是否改变原数组、链式调用等方面。 另外,需要注意用户可能存在的误区,比如误用forEach来生成新数组,或者认为map会改变原数组,需要澄清这些点。 最后,总结两者的适用场景,帮助用户根据需求选择正确的方法。</think>JavaScript中数组的`forEach`和`map`方法区别可归纳为以下几点: --- ### 一、核心区别 1. **返回值** - `map`:**返回新数组**,新数组元素是回调函数返回值。 ```javascript const arr = [1, 2, 3]; const mapped = arr.map(x => x * 2); // 返回 [2, 4, 6] ``` - `forEach`:**无返回值**(返回`undefined`),仅遍历数组。 ```javascript const result = arr.forEach(x => console.log(x)); // 输出元素,result为undefined ``` 2. **用途** - `map`:用于**数据转换**,生成与原数组等长的新数组。 - `forEach`:用于**遍历执行副作用**(如修改外部变量、操作DOM)。 --- ### 二、是否修改原数组 - **均不直接修改原数组**(除非回调函数主动操作原数组): ```javascript // map不改变原数组 const original = [1, 2, 3]; original.map(x => x + 1); // 原数组仍为[1,2,3] // forEach若修改外部变量会间接影响数据 let sum = 0; original.forEach(x => sum += x); // sum=6 ``` --- ### 三、链式调用 - `map`可链式调用其他数组方法(如`filter`、`reduce`),而`forEach`不行: ```javascript // 链式调用示例 const result = [1, 2, 3] .map(x => x * 2) // [2,4,6] .filter(x => x > 3) // [4,6] .reduce((a, b) => a + b); // 10 ``` --- ### 四、性能差异 - 两者性能接近,但`forEach`通常略快于`map`(因无需生成新数组)。实际开发中优先考虑语义而非性能。 --- ### 五、示例对比 | 场景 | `map` | `forEach` | |--------------------|-------------------------------|--------------------------| | 转换数组元素 | ✅ 生成新数组(如数值加倍) | ❌ 需手动收集结果到新数组 | | 仅遍历无返回值操作 | ❌ 冗余(浪费内存) | ✅ 直接操作(如打印日志) | --- ### 总结 - **用`map`**:需基于原数组生成新数组时。 - **用`forEach`**:仅需遍历且无需返回值时。 - **避免混淆**:不要用`forEach`替代`map`去生成新数组,也不要用`map`替代`forEach`导致内存浪费。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值