前端面试---Js （一）

var和let和const

var声明变量可以重复声明；后边的会覆盖前面的；var声明的变量可以提升；
let不可重复声明而且let声明的变量有作用域块
const声明变量必须赋值，不能更改

深拷贝和浅拷贝

基本数据类型不存在深拷贝和浅拷贝，是赋值，只有引用数据类型才存在深拷贝和浅拷贝

//
let a=3;
let b=a;
b=7;
console.log(a,b) //3 ,7

// 浅拷贝
let arr=[1,23,0]

let newArr=arr

newArr.push(99)
console.log(arr,newArr)  //[1,23,0,99] [1,23,0,99]

深拷贝方法

//1.只能对一维对象或数组深拷贝对多维对象或数组是浅拷贝
let arr =[1,2]
let newArr=[...arr]
newArr.push(3)
console.log(arr,newArr)  //[1,2] [1,2,3] 

//2.对数组和对象可以深拷贝  但是方法不行

let obj={a:'1',b:{c:"s"}};
let newObj=JSON.parse(JSON.stringify(obj))
newObj.b.c="666";
console.log(obj,newObj) //{a:'1',b:{c:"s"}}; {a:'1',b:{c:"666"}};


//3.自定义深拷贝函数

function deepClone(source) {
        // 判断内容中存在undefined和null
        if(!source){
            return source
        }
        let target = source.constructor === "Array" ? [] : {}
        for (const key in source) {
            if (source.hasOwnProperty(key)) {
                if (typeof source[key] === 'object') {
                    // target[key] = source[key].constructor === "Array" ? [] : {}
                    target[key] = deepClone(source[key])
                } else {
                    target[key] = source[key]
                }

            }

        }

        return target;
    }


    let obj = {
        kong:"  ",
        un:undefined,
        n:null,
        a: 'eee',
        name: 'zhangsan',
        chrid: {
            one: {
                name: 'zhangda'
            },
            two: {
                name: 'zhanger',
                chird: {
                    name: 'sss'
                }
            }
        }
    }


    let newObj = deepClone(obj)
    newObj.chrid.one.name="张老八"

    console.log(newObj,newObj);
    /**
     *
     * {
        kong:"  ",
        un:undefined,
        n:null,
        a: 'eee',
        name: 'zhangsan',
        chrid: {
            one: {
                name: 'zhangda'
            },
            two: {
                name: 'zhanger',
                chird: {
                    name: 'sss'
                }
            }
        }
    }

    ,
    {
        kong:"  ",
        un:undefined,
        n:null,
        a: 'eee',
        name: 'zhangsan',
        chrid: {
            one: {
                name: '张老八'
            },
            two: {
                name: 'zhanger',
                chird: {
                    name: 'sss'
                }
            }
        }
    }
      */

节流与防抖

防抖：多少秒内只执行一次

 let input = document.createElement("input")
    input.style.cssText = "width:80px"
    //防抖函数
    function antiShake(fn, time) {
        let timer = null
        return () => {
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                fn()
            }, time)
        }
    }

    input.addEventListener("input", antiShake(() => { console.log("ppppp"); }, 1000))
    
    document.body.append(input)

节流 ：每隔多少秒只执行一次

let box = document.createElement("div")
    box.style.cssText = "width:80px;height:80px;background:blue"

    // 节流
    let throttle = function (fn, time) {
        let timer = null

        return () => {
            if (!timer) {
                timer = setTimeout(() => {
                    fn();
                    timer = null;
                    // clearInterval(timer)  清空定时器后变量会变成1
                    // console.log(timer);
                }, time)
            }
        }
    }
    box.addEventListener("mousemove", throttle(() => { console.log("dou"); }, 1000))
    document.body.append(box)

闭包

1. 闭包会延长变量生命周期 （闭包的变量会存在内存中不被销毁）；
2. 闭包拥有自己私有作用域
3. 外部可以访问函数内部变量

 //闭包
 function testCloSure() {
        let a = 0;

        return {
            add: () => {
                a += 1
            },
            minus: () => {
                a -= 1
            },
            getA: () => {
                
                return a
            }
        }
    }

    let cloSure1 = testCloSure()
    let cloSure2 = testCloSure()

    cloSure1.add()
    cloSure1.add()
    cloSure2.minus()
    let a1 = cloSure1.getA()
    let a2 = cloSure2.getA()
    console.log(a1); //2
    console.log(a2); //-1

es6简单的去重和调换

  //
    let a = "a1";
    let b = "b2";

    [b, a] = [a, b]
    // [a, b] = [b, a]
    console.log(a, b); //b2 ,a2

    //数组去重  只能去除相同属性
    let arr = ["12", 78, 90, 12, "13", "13", 90]
    let narr = [...new Set(arr)]

    console.log(narr); // ["12", 78, 90, 12, "13"]

js去重

let arr = [99, -21, 10, 8, 67, 19, 901, 11, 2, 4]


        //快速排序
        function quickSort(arr, left, right) {
            let posionIndex = 0;
            // 数组左右坐标
            left = typeof left === 'number' ? left : 0
            right = typeof right === 'number' ? right : arr.length - 1;
            //条件 将数组分为两段
            if (left < right) {
                // let p = left
                //开始对比的起始位置
                let start = left + 1
                for (let i = start; i < arr.length; i++) {
                    if (arr[i] < arr[left]) {
                        swap(arr, start, i)
                        start++
                    }

                }

                swap(arr, left, start - 1)
                posionIndex = start - 1
                //左边
                quickSort(arr, left, start - 1)
                //右边
                quickSort(arr, posionIndex + 1, right)
            }
        }
        //选择排序
        function chooseSort(arr) {
            for (let i = 0; i < arr.length; i++) {
                for (let j = i + 1; j < arr.length; j++) {
                    if (arr[i] > arr[j]) {
                        swap(arr, i, j)
                    }

                }

            }
        }

        // js自带方法
        function jsSort(arr) {
            return arr.sort((a, b) => a - b)
        }

        //冒泡排序
        function bubbleSort(arr) {
            for (let i = 0; i < arr.length - 1; i++) {

                for (let j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        swap(arr, j, j + 1)
                    }

                }
            }
        }

        //交换位置
        function swap(arr, start, end) {
            let tmp = arr[start]
            arr[start] = arr[end]
            arr[end] = tmp
        }

        bubbleSort(arr)
        console.log(arr);