JavaScript 手写代码 第四期

简介: 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日

date对象我之前有详细讲过,大家可以看一下 Date对象详解

目录
打赏
0
0
0
0
20
分享
相关文章
|
4月前
|
短小精悍的js代码
【10月更文挑战第17天】
150 58
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
118 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
334 2
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
63 0
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
141 15
在 golang 中执行 javascript 代码的方案详解
|
3月前
|
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
83 3
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
771 4

热门文章

最新文章