1. 為什么要手寫代碼？

我們在日常開發(fā)過程中，往往都是取出來直接用，從來不思考代碼的底層實(shí)現(xiàn)邏輯，但當(dāng)我開始研究一些底層的東西的時候，才開始理解了JavaScript每個方法和函數(shù)的底層實(shí)現(xiàn)思路，我認(rèn)為這可以很好的提高我們的代碼水平和邏輯思維。

2. 手寫實(shí)現(xiàn)

2.1 數(shù)組扁平化

簡單來說，就是將多維數(shù)組轉(zhuǎn)換為一維數(shù)組

2.1.1 遞歸實(shí)現(xiàn)數(shù)組扁平化

具體思路見注釋

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            function flat(arr) {
                let result = [];
                for (let i = 0; i < arr.length; i++) {
                    // 判斷數(shù)組的元素是否為數(shù)組
                    if (Array.isArray(arr[i])) {
                        // 如果為數(shù)組，就進(jìn)行遞歸
                        result = result.concat(flat(arr[i]));
                    } else {
                        // 如果不是數(shù)組，直接push到數(shù)組里面
                        result.push(arr[i]);
                    }
                }
                return result;
            }
            console.log(flat(arr)); // [1,2,3,4,5,6]

2.1.2 利用擴(kuò)展運(yùn)算符和數(shù)組方法some

具體思路就是遍歷數(shù)組arr，只要沒有完全拍平，就一直進(jìn)行扁平化操作

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            function flat(arr) {
                // 主要數(shù)組元素還是多維數(shù)組，就會一直為true，一直指向拍平操作
                while (arr.some((item) => Array.isArray(item))) {
                    arr = [].concat(...arr);
                    console.log(arr);
                }
                return arr;
            }
            console.log(flat(arr));

2.1.3 利用reduce方法進(jìn)行迭代

            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方法將數(shù)組扁平化

            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 方法

將數(shù)組扁平化處理，返回一個新數(shù)組，對原數(shù)據(jù)沒有影響

flat()默認(rèn)只會“拉平”一層，如果想要“拉平”多層的嵌套數(shù)組，可以將flat()方法的參數(shù)寫成一個整數(shù)，表示想要拉平的層數(shù)，默認(rèn)為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實(shí)現(xiàn)和正則表達(dá)式

            let arr = [1, 2, [3, 4], [5, [6, 7]]];
            function flat(arr) {
                // 先價格
                let str = JSON.stringify(arr);
                // 將[和] 都替換為空字符串
                str = str.replace(/(\[|\])/g, '');
                // 然后再兩側(cè)加上[]就成了一維數(shù)組
                str = '[' + str + ']';
                return JSON.parse(str);
            }
            console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7]

2.2 實(shí)現(xiàn)交換變量的值(不使用中間變量temp)

成功實(shí)現(xiàn)

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

2.3 實(shí)現(xiàn)日期格式化函數(shù)(年月日)

            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日

date對象我之前有詳細(xì)講過，大家可以看一下 Date對象詳解文章來源地址http://www.zghlxwxcb.cn/news/detail-498388.html

到了這里，關(guān)于JavaScript 手寫代碼 第四期的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！