数组 - 数组的遍历与排列顺序 - 《前端杂记》

reduce() /reduceRight()
reduce(function(prevValue/前一个值，icurValur/现在数组的值, index , self){
return 需要接力的值
},初始值)
初始值被带入运行后最后会需要返回出去一个值，返回值填入prevValur,就像是接力赛跑，第二次运行完成后又将prevVlaur返回出去，依次接力数组循环完，precValur会获得整个数组的值，icurValur是每次遍历的数组的值，不接受第三个参数，并且不支持修改this指向，并只能用于数组，类数组无法使用此方法
reduceRight() 的输出结果的与reduce()相反，相当于把reduce的结果倒过来

        //  百度的cookie 获取下来就是字符串 
                //例如 BAIDUID  与其对应的值为 7C3119CAB5B11E03F4CBD94078CD2929 将其获取下来的cookie字符串转化为对象保存起来利于后面使用
        var cookieStr = 'BAIDUID=7C3119CAB5B11E03F4CBD94078CD2929:FG=1; BIDUPSID=7C3119CAB5B11E03C80040F6483B311D; PSTM=1592658731; COOKIE_SESSION=267164_0_1_0_7_1_1_0_0_1_3_0_0_0_7_0_1592709624_0_1592976781%7C4%230_0_1592976781%7C1; cflag=13%3A3; BD_UPN=12314753; BD_HOME=1; H_PS_PSSID=32096_1449_31325_32139_31254_32046_32230_32298';
        function parseCookieStr(str){
            var obj = {};
            var cookieArr = str.split(';') //将字符串以“;”分割成数组
            //                               上一个值   现在值   
            return cookieArr.reduce(function(prevValue,icurValur,index,self){
                var arr = icurValur.split('='); //将每次数组遍历的值以 “=” 再次进行分割成数组
                prevValue[arr[0]] = arr[1] // 由于初始值是对象 所以此处将分割的数组弄成对象，并将其返回出去，直到数组遍历完返回的都是prevValue
                return prevValue;
            },obj) // 此处 obj 是初始值 
        }
        var cookie = parseCookieStr(cookieStr)

reduce()原理及reduceRight()原理

        //  百度的cookie 获取下来就是字符串 例如 BAIDUID  与其对应的值为 7C3119CAB5B11E03F4CBD94078CD2929 将其获取下来的cookie字符串转化为对象
        var cookieStr = 'BAIDUID=7C3119CAB5B11E03F4CBD94078CD2929:FG=1; BIDUPSID=7C3119CAB5B11E03C80040F6483B311D; PSTM=1592658731; COOKIE_SESSION=267164_0_1_0_7_1_1_0_0_1_3_0_0_0_7_0_1592709624_0_1592976781%7C4%230_0_1592976781%7C1; cflag=13%3A3; BD_UPN=12314753; BD_HOME=1; H_PS_PSSID=32096_1449_31325_32139_31254_32046_32230_32298';
        function parseCookieStr(str){
            var obj = {};
            var cookieArr = str.split(';') //将字符串以“;”分割成数组
            //                               上一个值   现在值   
            return cookieArr.myReduce(function(prevValue,icurValur,index,self){
                var arr = icurValur.split('='); //将每次数组遍历的值以 “=” 再次进行分割成数组
                prevValue[arr[0]] = arr[1] // 由于初始值是对象 所以此处将分割的数组弄成对象，并将其返回出去，直到数组遍历完返回的都是prevValue
                return prevValue;
            },obj) // 此处 obj 是初始值 
        }
        // reduce() 的原理
        Array.prototype.myReduce = function(fun,initialValue){
            var len = this.length,_this = arguments[2] || window,nextValue = initialValue;
            for(var i = 0 ; i < len ; i++){
                nextValue = fun.apply(_this,[nextValue,this[i],i,this]);
            }
            return nextValue;
        }
        // reduceRight() 的原理
        Array.prototype.myReduceRight = function(fun,initialValue){
            var len = this.length,_this = arguments[2] || window,nextValue = initialValue;
            for(var i = len ; i >= 0 ; i++){
                nextValue = fun.apply(_this,[nextValue,this[i],i,this]);
            }
            return nextValue;
        }
        var cookie = parseCookieStr(cookieStr)

数组的累加

arr = [1,2,3,4,5]
// 数组的累加
var sum  = arr.reduce(function(fir,sec){
    console.log(fir+":"+ sec)
    return fir+sec
})

forEach
遍历数组
forEach(function)会向括号里的function传进去三个参数，第一个是每次遍历数组的数据，第二参数是数据的index，第三个参数是this,所以括号里的function做好需要接受传过来的三个参数。同时forEach(function,this)可以接受第二参数，第二个参数将会是function的this指向，如果不填第二个参数，就要用最开始的方法，也就是functio的参数为三个。
forEach(function，this指向)

   <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        li = document.getElementsByTagName('li');
        // foreach
        var personArr = [
            {name: '12' , src : '../12/123',des:'1221',sex:'m'},
            {name: '13' , src : '../13/1234',des:'1222',sex:'n'},
            {name: '14' , src : '../14/1234',des:'1223',sex:'b'},
            {name: '15' , src : '../15/1245',des:'12214',sex:'v'},
            ];
        function deal(ele,index,self){
            console.log(ele,index,self);
            li[index].innerText = ele.name;
        }
        personArr.forEach(deal)

forEach原理

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        li = document.getElementsByTagName('li');
        // foreach
        var personArr = [
            {name: '12' , src : '../12/123',des:'1221',sex:'m'},
            {name: '13' , src : '../13/1234',des:'1222',sex:'n'},
            {name: '14' , src : '../14/1234',des:'1223',sex:'b'},
            {name: '15' , src : '../15/1245',des:'12214',sex:'v'},
            ];
        function deal(ele,index,self){
            console.log(ele,index,self);
            li[index].innerText = ele.name;
        }
        // 实现forEach
        Array.prototype.myForEach = function(fun){
            var len = this.length
            // 接受第二个参数，第二参数可以修改fun的this的指向，如果没传入第二个参数那吗fun的this就指向window
            _this = arguments[1] != undefined ? arguments[1] : window;
            for(var i = 0 ; i < len; i++){
                fun.apply(_this,[this[i],i,this])
            }
        }
        personArr.myForEach(deal,personArr);

reverse()
将数组内的顺序颠倒

var arr = [1,2,3,4,5,6,7]
arr.reverse(); //结果为 arr = [7, 6, 5, 4, 3, 2, 1];

sort()
给数组排序，默认是以字符编码的顺序进行排序，也可以自定义
规则为：必须有两个参数
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。//通俗点讲就是，当返回值为负数时，前面的数在前面
若 a 等于 b，则返回 0。// 若返回值为0 ，不变
若 a 大于 b，则返回一个大于 0 的值 //返回值大于零，后面的数在前面

//自定义排序
        var arr = [2,1,3];
        arr.sort(function(a , b){
            return a-b;
        });
//结果为 arr = [1, 2, 3];