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