JavaScript 手写代码第四期-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript 手写代码第四期。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 为什么要手写代码？

我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。

2. 手写实现

2.1 数组扁平化

简单来说，就是将多维数组转换为一维数组

2.1.1 递归实现数组扁平化

具体思路见注释

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            function flat(arr) {
                let result = [];
                for (let i = 0; i < arr.length; i++) {
                    // 判断数组的元素是否为数组
                    if (Array.isArray(arr[i])) {
                        // 如果为数组，就进行递归
                        result = result.concat(flat(arr[i]));
                    } else {
                        // 如果不是数组，直接push到数组里面
                        result.push(arr[i]);
                    }
                }
                return result;
            }
            console.log(flat(arr)); // [1,2,3,4,5,6]

2.1.2 利用扩展运算符和数组方法some

具体思路就是遍历数组arr，只要没有完全拍平，就一直进行扁平化操作

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            function flat(arr) {
                // 主要数组元素还是多维数组，就会一直为true，一直指向拍平操作
                while (arr.some((item) => Array.isArray(item))) {
                    arr = [].concat(...arr);
                    console.log(arr);
                }
                return arr;
            }
            console.log(flat(arr));

2.1.3 利用reduce方法进行迭代

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            function flat(arr) {
                return arr.reduce((pre, cur) => {
                    return pre.concat(Array.isArray(cur) ? flat(cur) : cur);
                }, []);
            }
            console.log(flat(arr));

2.1.4 利用toString方法将数组扁平化

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            function flat(arr) {
                return arr
                    .toString()
                    .split(',')
                    .map((item) => Number(item));
            }
            console.log(flat(arr));

2.1.5 可以直接使用 ES6 新增的 flat 方法

将数组扁平化处理，返回一个新数组，对原数据没有影响

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1

使用示例
使用Infinity(无穷大)拍平

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            // 一般我们计算要拍平几层，直接使用Infinity(无穷大)方法
            // 有几层我便拍平几层
            function flat(arr) {
                return arr.flat(Infinity);
            }
            console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7]

2.1.6 JSON.Stringify实现和正则表达式

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            function flat(arr) {
                // 先价格
                let str = JSON.stringify(arr);
                // 将[和] 都替换为空字符串
                str = str.replace(/(\[|\])/g, '');
                // 然后再两侧加上[]就成了一维数组
                str = '[' + str + ']';
                return JSON.parse(str);
            }
            console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7]

2.2 实现交换变量的值(不使用中间变量temp)

成功实现

            let a = 3,
                b = 1;
            a = a + b;
            b = a - b;
            a = a - b;
            console.log(a); // 1
            console.log(b); // 3

2.3 实现日期格式化函数(年月日)

            const dateFormat = function (date, format) {
                let year = date.getFullYear();
                // 月份加一，从0开始
                let month = date.getMonth() + 1;
                let day = date.getDate();
                // 正则替换
                format = format.replace(/YYYY/, year);
                format = format.replace(/MM/, month);
                format = format.replace(/DD/, day);
                return format;
            };
            console.log(dateFormat(new Date(), 'YYYY/MM/DD')); // 2023/6/23
            console.log(dateFormat(new Date(), 'YYYY年MM月DD日')); // 2023年6月23日