JavaScript 手写代码第四期

男娘i 2024-03-16 22:13 55阅读 0赞

#### 文章目录 ####

*  1. 为什么要手写代码？
 *  2. 手写实现
 *   *  2.1 数组扁平化
     *   *  2.1.1 递归实现数组扁平化
         *  2.1.2 利用扩展运算符和数组方法some
         *  2.1.3 利用reduce方法进行迭代
         *  2.1.4 利用toString方法将数组扁平化
         *  2.1.5 可以直接使用 ES6 新增的 flat 方法
         *  2.1.6 JSON.Stringify实现和正则表达式
     *  2.2 实现交换变量的值(不使用中间变量temp)
     *  2.3 实现日期格式化函数(年月日)

## 1. 为什么要手写代码？ ##

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

## 2. 手写实现 ##

### 2.1 数组扁平化 ###

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

#### 2.1.1 递归实现数组扁平化 ####

**具体思路见注释**

#### 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对象详解][Date]

<table> 
 <tbody> 
  <tr> 
   <td>欢迎大家在讨论学习，感谢大家支持</td> 
  </tr> 
 </tbody> 
</table>

[Date]: https://blog.csdn.net/qq_63299825/article/details/130999891