web前端面试题附答案043 - 面试官让给数组添加一个方法，可以实现内部数字的累加

这道题是考数组的一个内置函数，当然，你不会也能做，题目已经说了，累加嘛

1、我就喜欢累加 

        既然是数组，那么就开始遍历，遍历之前定义一个变量为0，然后遍历的过程中实现累加。

<script>
   let num = 0;
   let arr = [1, 3, 5, 7, 9, 111];
   arr.forEach((item) => {
     num += item;
   })
   console.log(num); // 136
</script>

2、高阶函数 reduce

        但总有人觉得遍历做这道题太傻了，太初级了，而且也是最近几年新出了内置函数 reduce，

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

注意: reduce() 对于空数组是不会执行回调函数的

<div id="demo"></div>
<script>
    var arr = [1, 3, 5, 7, 9, 111];

    function getSum(total, num) {
        return total + num;
    }
    function myFunction() {
        document.getElementById("demo").innerHTML = arr.reduce(getSum);
    }

    myFunction();
</script>

3、自己实现一个

        要求自己实现以后呢，例如添加一个mySum()的方法，可以通过arr.mySum()，就可以实现累加，这个怎么搞呢？

        首先给数组添加一个方法，一定会用到prototype，在数组的原型链上添加一个方法，而内部的this呢，指向了数组本身，看上去是不是挺像内部走了一下valueOf函数

<script>
  let arr = [1, 3, 5, 7, 9, 111];
  Array.prototype.mySum = function() {
    console.log(this); // [1, 3, 5, 7, 9, 111]
  }
  arr.mySum();
</script>

        这个时候就可以在内部实现一些自己的逻辑了，而且不止于累加，还可以对内部一些元素做逻辑判断。

        更大的好处在于当项目中如果有一些特殊的需求，而且目前内置函数不能满足，就可以考虑自己封装了。

        比如有一段时间，在异步请求到数据的时候，前端都是拼接字符串，不像现在有模板框架，那个时候我把一段段的dom字符串push到一个数组里，然后最后在转为一个大的字符串，innerHTML到预备好的div中。但当服务端返回某个字段有异常的时候，我就需要在业务逻辑代码里不断判断

<script>
    $.ajax({
        url: xxx,
        data: {},
        ......
        success: function(data) {
            var arr = [];
            arr.push('<div>');
            if (data['num']) {
                arr.push(data['num']);
            } else {
                arr.push('--');
            }
            arr.push('</div>');
        }
    })
    
</script>

        可以说这种判断到处都是，弄得开发人员痛苦的不行，而且也使业务代码变得更乱套。但如果自己封装一个方法，就可以少很多麻烦事。比如先封装一个myPush方法给数组，使其正常的情况下就push正常内容,异常情况下push兜底内容

<script>
    Array.prototype.myPush = function(data) {
        if (data) {
            this.push(data);
        } else {
            this.push('--');
        }
    }
</script>

        如此一来，通过封装新的方法，大家是不是就可以使用arr.myPush(xx)来添加内容了，就可以减少考虑的时间，抽更多的时间来做业务开发了。