Web前端开发JavaScript面试题合集(四)_惠州前端培训学校

接下来跟着惠州北大青鸟老师一起来了解一下Web前端开发JavaScript面试题合集(四)，希望对大家有帮助。

一、for...in 和 for...of的区别

1. for...of 是ES6新引入的特性，修复了ES5引入的for...in的不足

2. for...in 循环出的是key，for...of循环出的是value

3. for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

4. 推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of

二、new一个对象，这个过程中发生了什么

var obj = new Object("name","sansan");

1. 创建一个新对象，如：var obj = {};

2. 新对象的_proto_属性指向构造函数的原型对象。

3. 将构造函数的作用域赋值给新对象。(也所以this对象指向新对象)

4. 执行构造函数内部的代码，将属性添加给obj中的this对象。

5. 返回新对象obj。

三、js的防抖和节流是什么

· 防抖: 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

使用场景:

1. 给按钮加函数防抖防止表单多次提交。

2. 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。

简单的防抖(debounce)代码:

function debounce(fn, wait) {

var timeout = null;

return function () {

if (timeout !== null) clearTimeout(timeout)

timeout = setTimeout(fn, wait)

}

}

// 处理函数

function handle() {

console.log(Math.random())

}

//滚动事件

window.addEventListener('scroll', debounce(handle, 2000));

· 节流: 就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

function throttle(func, delay) {

var prev = Date.now();

return function () {

var context = this;

var args = arguments;

var now = Date.now();

if (now - prev >= delay) {

func.apply(context, args);

prev = Date.now();

}

}

}

function handle() {

console.log(Math.random());

}

window.addEventListener('scroll', throttle(handle, 2000));

区别：

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

想了解更多关于前端的资讯，可以来惠州北大青鸟新方舟校区了解一下。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟