前端面试官常问javaScript编程题，隔壁王大爷看了都会了
Posted 孙叫兽
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端面试官常问javaScript编程题，隔壁王大爷看了都会了相关的知识，希望对你有一定的参考价值。
目录
7.setTimeout()和setInterval()的使用以及区别
导读：一些常见的前端面试官会让求职者写的编程题
1.数组排序。
sort() 方法以字母顺序对数组进行排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();使用相同的技巧对数组进行降序排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
2.数组元素的去重；
利用ES6 Set去重（ES6中最常用）
function unique (arr) {
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]利用for嵌套for，然后splice去重
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重，两个null直接消失了更多数组去重：https://segmentfault.com/a/1190000016418021?utm_source=tag-newest
3.用递归的方法求数组的求和；
递归
var arr = [1,2,3];
function sum(arr) {
if(arr.length == 0){
return 0;
} else if (arr.length == 1){
return arr[0];
} else {
return arr[0] + sum(arr.slice(1));
}
}
console.log(sum(arr));//6
for循环
var arr = [1,2,3];
function sum(arr) {
var s = 0;
for (var i = 0;i<arr.length;i++) {
s += arr[i];
}
return s;
}
console.log(sum(arr));//6
4.防抖节流的思路。
防抖
函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
比如：坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待 10 秒。在上述例子中，电梯在检测到有人进入 10 秒钟之后，才会关闭电梯门开始运行，因此，“函数防抖”的关键在于，在 一个事件 发生 一定时间 之后，才执行 特定动作。
函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));节流
函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。
函数节流主要有两种实现方法：时间戳和定时器。
时间戳
var throttle = function(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, 1000));定时器
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
5.深拷贝、浅拷贝；
深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。
浅复制
var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);
function shallowCopy(src) {
var dst = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
dst[prop] = src[prop];
}
}
return dst;
}
因为浅复制只会将对象的各个属性进行依次复制，并不会进行递归复制，而 javascript 存储对象都是存地址的，所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址。
shallowObj.arr[1] = 5; obj.arr[1] // = 5
而深复制则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。
需要注意的是，如果对象比较大，层级也比较多，深复制会带来性能上的问题。在遇到需要采用深复制的场景时，可以考虑有没有其他替代的方案。在实际的应用场景中，也是浅复制更为常用。
6.做一个10秒的倒计时；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
function daojishi()
{
var starttime=document.getElementById("id2").innerText;
if(starttime==0)
{
return ;
}
setTimeout("daojishi()",1000);
starttime--;
document.getElementById("id2").innerText=starttime;
}
</script>
<body>
<h5 id="id2">10</h5>
<button id="id1" onclick="daojishi()">开始倒计时</button>
</body>
</html>7.setTimeout()和setInterval()的使用以及区别
1、setTimeout()方法
这个方法所有浏览器都支持，setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来
设定一个时间, 时间到了, 就会执行一个指定的 method。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var x = 0;
function countSecond()
{
x = x+1;
document.haorooms.haoroomsinput.value = x;
setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>
<form name="haorooms">
<input type="text" name="haoroomsinput" value="0" size=4 >
</form>
<script>
countSecond();
</script>
</body>
</html>setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到
clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function test(){
this.name = "setInternal";
this.waitMes = function(){
var that = this;
setInterval(function(){
alert(that.name);
},3000);
}
}
var te = new test();
te.waitMes();
</script>
</html>通过上面可以看出，setTimeout和setinterval的最主要区别是：
1）setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样
的setTimeout命令，则可循环运行。（即 要循环运行，需函数自身再次调用 setTimeout()）；而 setinterval是循环运行的，即每
到设定时间间隔就触发指定代码。这是真正的定时器。
2）setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒。
以上是关于前端面试官常问javaScript编程题，隔壁王大爷看了都会了的主要内容，如果未能解决你的问题，请参考以下文章
2021前端面试经历（字节滴滴虎牙），前端面试官常问的前端问题都在这！讲真的还挺难