feat: 面试手写题

src/router/modules/demo.ts

@@ -80,6 +80,10 @@ const titleArr = [
         key: 'sendBeacon',
         title: 'sendBeacon离开页面埋点保证送达方案',
     },
+    {
+        key: 'code',
+        title: '面试手写题',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/code.vue

@@ -0,0 +1,159 @@
+<template>
+    <base-container>
+        <div class="mb-5 mt-5">
+            <el-button
+                v-for="(item, index) in functionArray"
+                :key="index"
+                type="primary"
+                @click="item"
+                >点击执行{{ item.name }}方法</el-button
+            >
+        </div>
+        <h3>请查看控制台输出与页面源码</h3>
+    </base-container>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+/**
+ * 题目 1. 冒泡排序
+ */
+function useBubbleSort() {
+    const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
+    const bubbleSort = (arr: number[]): number[] => {
+        const arrLength = arr.length - 1;
+
+        for (let i = 0; i < arrLength; i++) {
+            for (let j = 0; j < arrLength - i; j++) {
+                let temp = arr[j + 1];
+                if (arr[j] > arr[j + 1]) {
+                    arr[j + 1] = arr[j];
+                    arr[j] = temp;
+                }
+            }
+        }
+        console.log(arr);
+        return arr;
+    };
+
+    bubbleSort(arr);
+}
+
+/**
+ * 题目 1. 防抖函数
+ * 防抖函数的作用是，当函数被多次调用时，只有当函数执行结束后，才会执行一次，防止函数被频繁调用。
+ * 防抖函数的实现原理是，在函数执行的过程中，设置一个定时器，当函数执行结束后，清除定时器，这样就保证了函数只执行一次。
+ * 应用场景一般有：
+ * 1. 文本输入框的实时搜索功能，用户输入字符后，函数会在输入结束后才执行，防止函数执行过于频繁。
+ * 2. 页面滚动时，函数只在页面停止滚动后才执行，防止函数执行过于频繁。
+ * 3. 表单提交时，函数只在用户提交表单后才执行，防止函数执行过于频繁。
+ * 4. 窗口大小改变时，函数只在窗口大小改变结束后才执行，防止函数执行过于频繁。
+ */
+function useDebounce() {
+    const debounce = (fn, delay) => {
+        let timer = null;
+        return function (...args) {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            timer = setTimeout(() => {
+                fn.apply(this, args);
+            }, delay);
+        };
+    };
+
+    window.addEventListener(
+        'resize',
+        debounce(() => {
+            console.log('窗口大小改变了');
+        }, 200)
+    );
+}
+
+/**
+ * 题目 1. 节流函数
+ */
+
+/**
+ * 题目 1. 实现new关键字
+ */
+function useNew() {
+    function _new(f: Function, ...args: any[]) {
+        let obj: any = {};
+        obj.__proto__ = f.prototype;
+        f.apply(obj, args);
+        return obj;
+    }
+
+    function Person(name, age) {
+        this.name = name;
+        this.age = age;
+        this.sayName = function () {
+            console.log(this.name);
+        };
+    }
+
+    const person = _new(Person, '张三', 20);
+    console.log(person);
+}
+
+/**
+ * 题目 1. 改变this指向
+ */
+function useChangeThis() {
+    function Person() {
+        console.log(this.name);
+        console.log(this.age);
+    }
+
+    class Student {
+        constructor(
+            public name: string,
+            public age: number
+        ) {
+            this.name = name;
+            this.age = age;
+        }
+    }
+
+    Person.apply(new Student('李四', 21));
+}
+
+/**
+ * 题目 1. 深拷贝
+ * Map与Set注意点
+ * Map的键是唯一的
+ * Set的元素是唯一的
+ */
+function useDeepClone() {
+    function deepClone(obj: any, existMap = new Map()) {
+        if (existMap.get(obj)) {
+            return existMap.get(obj);
+        }
+
+        let newObj = Array.isArray(obj) ? [] : {};
+        existMap.set(obj, newObj);
+        for (let key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key], existMap) : obj[key];
+            }
+        }
+
+        return newObj;
+    }
+
+    // 循环引用示例
+    let a = { name: 'a', child: null };
+    let b = { name: 'b', child: a };
+    a.child = b;
+
+    let deepCloneA = deepClone(a);
+    deepCloneA.child.child.name = 'c';
+    console.log('深拷贝的原始值', a);
+    console.log('深拷贝的新值', deepCloneA);
+}
+
+/** 拿到script中所有方法 */
+const functionArray = ref([useBubbleSort, useDebounce, useNew, useChangeThis, useDeepClone]);
+</script>

src/views/demo/ts.vue

@@ -1,65 +0,0 @@
-<template>
-    <div>请查看页面源码</div>
-</template>
-
-<script setup lang="ts">
-/**
- * 第一题 1. 冒泡排序
- */
-function useBubbleSort() {
-    const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
-    const bubbleSort = (arr: number[]): number[] => {
-        const arrLength = arr.length - 1;
-
-        for (let i = 0; i < arrLength; i++) {
-            for (let j = 0; j < arrLength - i; j++) {
-                let temp = arr[j + 1];
-                if (arr[j] > arr[j + 1]) {
-                    arr[j + 1] = arr[j];
-                    arr[j] = temp;
-                }
-            }
-        }
-        console.log(arr);
-        return arr;
-    };
-
-    bubbleSort(arr);
-}
-useBubbleSort();
-
-/**
- * 第二题 1. 防抖函数
- * 防抖函数的作用是，当函数被多次调用时，只有当函数执行结束后，才会执行一次，防止函数被频繁调用。
- * 防抖函数的实现原理是，在函数执行的过程中，设置一个定时器，当函数执行结束后，清除定时器，这样就保证了函数只执行一次。
- * 应用场景一般有：
- * 1. 文本输入框的实时搜索功能，用户输入字符后，函数会在输入结束后才执行，防止函数执行过于频繁。
- * 2. 页面滚动时，函数只在页面停止滚动后才执行，防止函数执行过于频繁。
- * 3. 表单提交时，函数只在用户提交表单后才执行，防止函数执行过于频繁。
- * 4. 窗口大小改变时，函数只在窗口大小改变结束后才执行，防止函数执行过于频繁。
- */
-function useDebounce() {
-    const debounce = (fn, delay) => {
-        let timer = null;
-        return function (...args) {
-            if (timer) {
-                clearTimeout(timer);
-            }
-            timer = setTimeout(() => {
-                fn.apply(this, args);
-            }, delay);
-        };
-    };
-
-    window.addEventListener(
-        'resize',
-        debounce(() => {
-            console.log('窗口大小改变了');
-        }, 200)
-    );
-}
-
-/**
- * 第三题 1. 节流函数
- */
-</script>