前端面试题总结

一、JavaScript：

1. setTimeOut准时吗？

不一定准时，他只是把时间到了放进时间队列里

2. JS快速打乱一个数组

先上代码
sort + Math.random()

var arr=[1,2,3,4,,5,6,7,8,9,10];
arr.sort(function(){
      return Math.random()-0.5
})

解析:
random( ）方法返回一个0-1之间的随机数，用随机数减去 0.5，可以实现随机返回一个正负数字完成乱序了

3. JS 预编译

js预编译实现过程：
1.创建GO/AO对象
2.找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
3.将实参值和形参统一
4.在函数体里面找函数声明，值赋予函数体

4. JS ajax

//步骤一:创建异步对象
    var ajax = new XMLHttpRequest();
    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
    ajax.open('get','getStar.php?starName='+name);
    //步骤三:发送请求
    ajax.send();
    //步骤四:注册事件 onreadystatechange 状态改变就会调用
    ajax.onreadystatechange = function () {
    if (ajax.readyState==4 &&ajax.status==200) {
        //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
    　　　　console.log(ajax.responseText);//输入相应的内容
    　　}
    }

5. 节流函数(常考点)

/**
 * 节流：动作绑定事件，动作发生后一段时间后触发事件，
 * 在这段时间内，如果动作有发生了，则无视该动作，直到时间执行完后，才能重新触发
 * 原理：在每次函数执行前先判断是否存在定时器，存在则跳过本次执行，否则设置定时器
 */
function throttle(fn, wait) {
  var pre = Date().now();
  return function () {
    var now = Date.now();
    if (now - prev >= wait) {
      fun.apply(this, arguments);
      pre = Date.now();
    }
  };
}

6. 防抖函数

/**
 * 动作绑定事件，
 * 动作发生后在一定时间内触发事件，
 * 在这段时间内，如果动作发生了，则重新等待一定时间在触发事件
 *
 * 原理：在每次函数执行前先清空上一次设置的定时器
 * */
function debounce(fn, wait) {
  var timer;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}

7. JS bind 实现

 if (!Function.prototype.bind) {
        Function.prototype.bind = function () {
            var self = this,                        // 保存原函数
            context = [].shift.call(arguments), // 保存需要绑定的this上下文
            args = [].slice.call(arguments);    // 剩余的参数转为数组
            return function () {                    // 返回一个新函数
                self.apply(context,[].concat.call(args, [].slice.call(arguments)));
            }
        }
    }

8. JS map 实现

Array.prototype.map = function () {
  var arr = this, result = [];
  var [fn, thisValue] = Array.prototype.slice.call(arguments);
  for (var i = 0; i < arr.length; i++) {
    result.push(fn.call(thisValue, arr[i], i, arr))
  }
  return result;
}

9. IndexOf的实现

    function ArrayIndexOf(arr,value,n){
        var i=isNaN(n)?0:n;//有第三参时
            i=(i<0)?arr.length+i:i;//第三参为负数时
        for(i;i<arr.length;i++){
            if(arr[i]===value){return i;}                   
        }return -1;
    }

10. 懒加载

    let lazyImages = [...document.querySelectorAll('.lazy-image')]
    let inAdvance = 300 // 自定义一个高度，当距离300px到达图片时加载
    function lazyLoad() {
        lazyImages.forEach(image => {
            if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) { // 距离xxpx时加载图片
                image.src = image.dataset.src
                image.onload = () => image.classList.add('loaded')
            }
        })
    }
    lazyLoad()
    window.addEventListener('scroll', _.throttle(lazyLoad, 16)) // 用到了lodash的节流函数
    window.addEventListener('resize', _.throttle(lazyLoad, 16))

11. JS实现promise

    class PromiseClone {
    constructor (process) {
        this.status = 'pending'
        this.msg = ''
        process(this.resolve.bind(this), this.reject.bind(this))
        return this
    }
    resolve (val) {
        this.status = 'fulfilled'
        this.msg = val
    }
    reject (err) {
        this.status = 'rejected'
        this.msg = err
    }
    then (fufilled, reject) {
        if(this.status === 'fulfilled') {
            fufilled(this.msg)
        }
        if(this.status === 'rejected') {
            reject(this.msg)
        }
    }

12. Jsonp跨域

function Jsonp(url, param, callback) {
  var script = document.createElement('script')
  param = {...param, callback}
  var arr = [];
  for(var key in param) {
    arr.push(`${key}=${param[key]}`)
  }
  script.src=`${url}?${arr.join('&')}`
  document.body.appendChild(script)
  window[callback] = function(data) {
    console.log(data)
    document.removeChild(script)
  }
}

13. JS 获取url参数

   function getQueryString(name) { 
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    	var r = window.location.search.substr(1).match(reg); 
    	if (r != null) return unescape(r[2]); return null; 
    }
    或
    export function getQueryStringByStr(data) {
        const url = data; // 获取url中"?"符后的字串
        const theRequest = {};
        if (url.indexOf('?') !== -1) {
            const str = url.substr(1);
            const strs = str.split('&');
            for (let i = 0; i < strs.length; i += 1) {
            theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]);
            }
        }
        return theRequest;
    }

14. JS发布订阅模式

vue.js是采用数据劫持结合发布者-订阅者的方式,通过object.defineProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图,
具体步骤:
第一步,我们首先需要给observer数据对象进行递归遍历,包括子属性对象的属性，都加上setter和getter,这样当我们给对象某个值赋值,会触发setter,那么就会监听到数据.
第二步:compile解析模板指令,将模板的所有变量转换为数据,然后初始化页面视图,将每个指令对应的节点绑定更新函数,添加监听订阅者,一但数据发生改变,收到通知,改变视图
第三步:watcher订阅者是observer和Complie之间通信的桥梁,主要做的有:
1.在自身实例化时往订阅器(dep)里添加自己
2.自身必须有一个updata方法
3.待属性变动dep.notice()通知时,能调用自身的update方法,并触发Complie中绑定的回调,完美退出
第四步:mvvm作为数据绑定的入口,整合observe,Comple和Watcher三者,observe,来监听自己的model数据变化,Comple来解析模板指令,Watcher用来搭起observe和Cmplie之间通信的桥梁
达到数据变化-视图更新,视图交互变化,数据model变更双向绑定效果