前端基础知识点

1.闭包

作用域的特殊情况有两种表现：a.函数作为参数被传递；b.函数作为返回值被返回 两种情况输出结果都是100

结论：闭包中/所有自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方！！！！

2.window.onload和DOMContentLoaded的区别？

3. 实现一个深拷贝

deepClone(source) {
    if(typeof source !== 'object' || !source) {
        throw new Error('error')
    }
    var targetObj = source.constructor === 'Object' ? {} : []
    for(var key in source) {
        if(source.hasOwnProperty(key)) {
            if(source[key] && typeof source[key] === 'object'){
                targetObj[key] = source[key].constructor === 'Object' ? {} : []
                targetObj[key] = deepClone(source(key))
            } else {
                targetObj[key] = source(key)
            }
        }
    }
    return targetObj
}

4. 定时函数执行结果

for (let i = 1; i <= 3; i++){
    setTimeout(function() {
      console.log(i)
    }, i * 1000);
}

每隔一秒打印一个数值：1， 2， 3

for (var i = 1; i <= 3; i++){
    setTimeout(function timer() {
      console.log(i)
    }, 3000);
}

隔了3秒连续输出3个4

for (let i = 1; i <= 3; i++){
    setTimeout(function timer() {
      console.log(i)
    }, 3000);
}

3秒之后一次性输出 1，2，3 5.关于作用域和自由变量的场景题

let a = 100
function test(){
    alert(a)
    a = 10
    alert(a)
}
test()
alert(a)

执行结果：100，10，10

5.数组拍平

function flat(arr) {
    const isDeep = arr.some(item => item instanceof Array)
    if(!isDeep) {
        return arr
    }
    const res = Array.prototype.concat.apply([],arr)
    return flat(res) //递归
}

6. 栈

第一题：请用 ES6 的 class，封装一个 Stack 类，包括 push、pop、peek 方法。

class Stack {
	constructor(){
		this.items = []
	}
	push(item){
		return this.items.push(item)
	}
	pop(item){
		return this.items.pop(item)
	}
	peek(){
		return this.items[this.items.length - 1]
	}
}
const stack = new Stack()
stack.push(1)
stack.push(2)
stack.push(3)
console.log(stack.peek()) // 3
console.log(stack.pop()) // 3
console.log(stack.peek()) // 2

第二题：请用栈这个数据结构，将 100 这个十进制数字转为二进制。

function decimalToBinary(dicimalNumber){
	const stack = []
	while(dicimalNumber > 0){
		stack.push(dicimalNumber % 2)
		dicimalNumber = Math.floor(dicimalNumber / 2)
	}
	let decimalStr = ''
	while(stack.length){
		decimalStr += stack.pop()
	}
	return decimalStr
}
console.log(decimalToBinary(100))  // 1100100

7.队列

第一题：请用 ES6 的 class，封装一个 Queue 类，包括 push、shift、peek 方法。

class Queue {
	constructor(){
		this.items = []
	}
	push(item) {
		return this.items.push(item)
	}
	shift() {
		return this.items.shift
	}
	peek() {
		return this.items[0]
	}
}

第二题：请用队列这个数据结构结合 React 或 Vue 写一个任务 App，包括添加任务和完成任务功能，要求任务只能先进先出。

import React, { useState, useRef } from 'react';
const TaskApp = () => 
    const [tasks, setTasks] = useState([]);
    const [newTask, setNewTask] = useState('');
    const taskQueue = useRef([]);
    const addTask = () => {
        if (newTask.trim()) {
            setTasks((prevTasks) => [...prevTasks, newTask]);
            taskQueue.current.push(newTask);
            setNewTask('');
        }
    };
    
    const completeTask = (task) => {
        const updatedTasks = tasks.filter(t => t !== task);
        setTasks(updatedTasks);
        taskQueue.current = taskQueue.current.filter(t => t !== task);
    };
    
    return (
        <div>
            <h2>Task Tracker</h2>
            <input
                type="text"
                value={newTask}
                onChange={e => setNewTask(e.target.value)}
                placeholder="Add a task"
            />
            <button onClick={addTask}>Add Task</button>
            <h3>Tasks to complete:</h3>
            <ul>
                {tasks.map(task => (
                    <li key={task}>
                        {task}
                        <button onClick={() => completeTask(task)}>Complete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TaskApp;

8.链表

定义链表

const a = { val: 'a' }
const b = { val: 'b' }
const c = { val: 'c' }
const d = { val: 'd' }
a.next = b
b.nect = c
c.next = d

遍历链表

let p = a
while(p){
    console.log(p.val)
    p = p.next
}

增加节点e在c与d中

const e = { val: 'e' }
c.next = e
e.next = d

删除e节点

c.next = d

9. 手写instanceOf函数

const instanceOf = (A, B) => {
    let p = A
    while (p) {
        if (p === B.prototype) {
            return true
        }
        p = p.__proto__
    }
    return false
}
const res = instanceOf([], Array)
console.log(res)