前端面试常考笔试题

(1)深浅克隆——拷贝的是不是引用,引用值改变——拷贝值是否改变

1.浅拷贝
        function shadowClone(obj) {

            if (obj === null) return null
            if (typeof obj !== "object") return obj
            if (obj instanceof RegExp)  return new RegExp(obj)
            if (obj instanceof Date)  return new Date(obj)

            newObj =new obj.constructor
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    newObj[key] = obj[key]
                }
            }
            return newObj
        }
2.深拷贝
	function deepClone(obj) {
	
            if (obj === null) return null;
            if (typeof obj !== "object") return obj;
            if (obj instanceof RegExp) return new RegExp(obj);
            if (obj instanceof Date) return new Date(obj);

            let newObj = new obj.constructor
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    newObj[key] = deepClone(obj[key])
                }
            }
            return newObj
        }

(2)防抖节流——(一段时间后|连续事件完成后)——一次性触发

        function debounce(func,delay){
            let timer
            return  function(){
                let content=this
                let arg=arguments
                clearTimeout(timer)
                timer=setTimeout(
                    function(){
                        func.apply(content,arg)
                    },delay)
            }
        }
        function throttle(color,delay){
            let pre=0
            return function(){
                let content= this
                let arg=arguments
                let now = new Date()
                if(now - pre > delay){
                    color.apply(content,arg)
                    pre = now
                }
            }
        }

(3)双向绑定——数据劫持+发-订模式

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,
在数据变动时发布消息给订阅者,触发相应的监听回调。我们先来看Object.defineProperty()这个方法:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <div id="demo">div>
    <input type="text" id="inp">
    <script>
        var obj  = {};
        var demo = document.querySelector('#demo')
        var inp = document.querySelector('#inp')
        /*
        Object.defineProperty 函数一共有三个参数,第一个参数是需要定义属性的对象,第二个参数是需要定义的属性,第三个是该属性描述符。
一个属性的描述符有四个属性,分别是 value 属性的值,writable 属性是否可写,enumerable 属性是否可枚举,configurable 属性是否可配置修改。
*/
        Object.defineProperty(obj, 'name', {
            get: function() {
                return val;
            },
            set: function (newVal) {//当该属性被赋值的时候触发
                inp.value = newVal;
                demo.innerHTML = newVal;
            }
        })
        inp.addEventListener('input', function(e) {
            // 给obj的name属性赋值,进而触发该属性的set方法
            obj.name = e.target.value;
        });
        obj.name = 'fei';//在给obj设置name属性的时候,触发了set这个方法
    script>
body>
html>

你可能感兴趣的:(前端面试常考笔试题)