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对象详解

目录
相关文章
|
18天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
116 58
|
28天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
201 2
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
33 0
|
2月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
5天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
18 3
原生js炫酷随机抽奖中奖效果代码
|
10天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
121 4
|
12天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
62 6
|
8天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
31 1