本周面试总结

一、什么是防抖和节流？如何实现防抖和节流，请写出主要代码

函数防抖和节流，都是控制事件触发频率的方法

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。什么叫有节制呢？就是在一段时间内，只执行一次。

防抖 、指触发事件后，就是把触发非常频繁的事件合并成一次去执行。

即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。

0.回顶部的案例

1.节流的代码实现

//节流的实现
function throttle(fn,delay){
    let valid = true;
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 请注意，节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
    */

// 以下照旧
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000) 

2.防抖的代码实现

防抖就实现了(debounce)
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
// 然后是旧代码
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000);

二、箭头函数和普通函数的区别

1.箭头函数是匿名函数，不能作为构造函数，不能使用new

2.将头函数不能绑定arguments,取而代之用rest参数...解决

3.箭头函数没用原型属性

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

4.箭头函数中没有this机制，普通函数的this指向调用他的对象，没有办法改变其指向

5.扩展argumentsdui一、什么是防抖和节流？如何实现防抖和节流，请写出主要代码

 

函数防抖和节流，都是控制事件触发频率的方法

 

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。什么叫有节制呢？就是在一段时间内，只执行一次。

 

防抖 、指触发事件后，就是把触发非常频繁的事件合并成一次去执行。

 

即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。

 

二、箭头函数和普通函数的区别

 

1.箭头函数是匿名函数，不能作为构造函数，不能使用new

 

2.将头函数不能绑定arguments,取而代之用rest参数...解决

 

3.箭头函数没用原型属性

 

var a = ()=>{

  return 1;

}

function b(){

  return 2;

}

console.log(a.prototype);  // undefined

console.log(b.prototype);   // {constructor: ƒ}

4.箭头函数中没有this机制，普通函数的this指向调用他的对象，没有办法改变其指向

 

5.扩展arguments对象，js中每一个函数都会有一个Arguments对象实例化arguments,他应用这函数的参数，可以通过数组下标引用。arguments.length为函数实参个数

　　　　特性：

　　　　1.arguments对象和Function是分不开的。

　　　　2.因为arguments这个对象不能显式创建。

　　　　3.arguments对象只有函数开始时才可用。

function test() {
        var s = "";
        for (var i = 0; i < arguments.length; i++) {
            alert(arguments[i]);
            s += arguments[i] + ",";
        }
        return s;
}
test("name", "age");
alert: name
alert: age
"name,age,"

三、src和href的区别

 

1.href表示超文本引用，用来建立当前元素和文档的链接。常用的有：link和a。例如引入文件时浏览器会识别该文档，下载的同时、并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因

 

2.src是引入，src指向的内容会嵌入到当前文档中当前标签所在位置。例如img、script。例如当浏览器解析到script时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部的原因。

 

四、什么是优雅降级和渐进增强

 

渐进增强：

 

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级：

一开始就构建的完整功能，然后再针对低版本浏览器进行兼容。

 

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

 

三、src和href的区别

1.href表示超文本引用，用来建立当前元素和文档的链接。常用的有：link和a。例如引入文件时浏览器会识别该文档，下载的同时、并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因

2.src是引入，src指向的内容会嵌入到当前文档中当前标签所在位置。例如img、script。例如当浏览器解析到script时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部的原因。

四、什么是优雅降级和渐进增强

渐进增强：

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级：

一开始就构建的完整功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。