ES6 数组API的实现（练习笔记）

m0_53829130
于 2022-11-11 14:15:09 发布
阅读量82
点赞数
文章标签： es6 javascript 前端
本文链接：https://blog.csdn.net/m0_53829130/article/details/127805383
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
         ES数组API

         forEach
         map
         find 与 findIndex
         filter
         some every
         reduce
  
     -->
    <script>
        // reduce : 对数组的元素值进行累计（元素值进行加减乘除）
        // acc： 累计数 上一个元素值与初始的数据进行累计的结果
        // cur: 当前循环遍历的元素
        // idx： 当前循环遍历的数组下标
        // target：循环遍历的数组对象
        // initvalue： 累计的初始值，如果该参数未提供，则累计的初始值以数组第一个元素值为累计的初始值
        // 注：initvalue在正式循环遍历过程中自遍历的次数 数组长度-1
        // reduce函数的返回值 数组所有元素累计的结果值
        // Array.reduce((acc,cur,idx,target) =>{},initvalue);
        const arr1 = [1, 2, 3];
        const init = 10;
        let totals = arr1.reduce((acc, cur, idx, target) => {
            // console.log('acc', acc, ' cur:', cur, ' idx:', idx, ' target', target);
            return acc + cur;
        }, init);
        // console.log(totals);

        let shoppingcart = [{
            sn: '001',
            sname: 'Java入门',
            price: 85,
            count: 10
        }, {
            sn: '002',
            sname: 'JS入门',
            price: 35,
            count: 5
        }, {
            sn: '003',
            sname: 'HTML入门',
            price: 55,
            count: 6
        }, ];
        let totalCount = shoppingcart.reduce((acc, cur) => {
            // console.log('acc', acc, ' cur:', cur);
            return acc + cur.price * cur.count
        }, 0);

        // console.log('当前订单总金额：', totalCount);

        //函数式编程: 提供给使用一个函数对象， 使用者可以将业务封装在该函数对象中，内部执行该函数对象完成使用者的业务设计
        //prototype : js对象中内置的属性 给所有的对象实例添加共享的属性值
        Array.prototype.custForEach = function(callback) {
            //this 获取当前循环遍历的数组对象
            for (let index = 0; index < this.length; index++) {
                //每次循环调用函数模块
                callback(this[index], index, this);
            }
        }

        // 模拟map 函数
        Array.prototype.custMap = function(callback) {
            // 定义一个新数组对象 用map 函数返回一个新的数组
            let mapArray = [];
            for (let index = 0; index < this.length; index++) {
                //每次循环调用函数模块
                let mapValue = callback(this[index], index, this);
                //将 返回值 mapValue 添加至新数组对象中mapAray
                mapArray.push(mapValue);
            }
            return mapArray;
        }

        //模拟 find 函数
        Array.prototype.cutFind = function(callback) {
            for (let index = 0; index < this.length; index++) {
                //每次循环调用函数模块
                let findFlag = callback(this[index], index, this);
                if (findFlag) return this[index];


            }
            return undefined;

        }

        //模拟 find 函数
        Array.prototype.cutFindIndex = function(callback) {
            for (let index = 0; index < this.length; index++) {
                //每次循环调用函数模块
                let findFlag = callback(this[index], index, this);
                if (findFlag) return index;


            }
            return -1;

        }

        //模拟 filter
        Array.prototype.custFilter = function(calback) {
            let tempArray = [];
            for (let index = 0; index < this.length; index++) {

                //每次循环调用函数模块
                let findFlag = callback(this[index], index, this);
                if (findFlag) tempArray.push(this[index]);
            }
            return tempArray;
        }

        //模拟Some
        Array.prototype.custSome = function(callback) {
            for (let index = 0; index < this.length; index++) {
                //每次循环调用函数模块
                let findFlag = callback(this[index], index, this);
                if (findFlag) return true
            }
            return false;
        }

        //模拟 every
        Array.prototype.custEvery = function(callback) {
            for (let index = 0; index < this.length; index++) {
                //每次循环调用函数模块
                let findFlag = callback(this[index], index, this);
                if (!findFlag) return false
            }
            return true;
        }


        let arr0 = [1, 2, 3];
        // //定义函数对象
        // arr0.custForEach(((item, idx, target) => {
        //     // console.log('item: ', item, ' index:', idx, ' target', target);
        // }))

        // let tempMapArray = arr0.custMap((item, idx, target) => {
        //     return item * 2
        // })
        // console.log(tempMapArray);

        // let findObj = arr.custFind((item, index, target) => {
        //     return 4 == item
        // });
        // console.log(findObj);

        // let tarry = arr0.custFilter((item, idx, target) => {
        //     return item < 3
        // })
        // console.log('tarry:', tarry);

        // let flag = arr0.custSome((item, idx, target) => {
        //     return item == 0;
        // })
        // console.log(flag);

        let flag = arr0.custEvery((item, idx, target) => {
            return item < 4;
        })
        console.log(flag);
    </script>

</body>

</html>