免费注册网站云空间,天津和平做网站哪家好,房地产开发商是干什么的,做长老环的网站目录 1.数组排序。
2.数组元素的去重#xff1b;
3.用递归的方法求数组的求和#xff1b;
4.防抖节流的思路。
5.深拷贝、浅拷贝#xff1b;
6.做一个10秒的倒计时#xff1b;
7.setTimeout()和setInterval()的使用以及区别 导读#xff1a;一些常见的前端面试官会让…目录 1.数组排序。
2.数组元素的去重
3.用递归的方法求数组的求和
4.防抖节流的思路。
5.深拷贝、浅拷贝
6.做一个10秒的倒计时
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 i0; iarr.length; i){for(var ji1; jarr.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_sourcetag-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));//6for循环
var arr [1,2,3];
function sum(arr) {var s 0;for (var i 0;iarr.length;i) {s arr[i];}return s;
}
console.log(sum(arr));//64.防抖节流的思路。
防抖 函数防抖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 langenmeta charsetUTF-8title/title
/head
script typetext/javascriptfunction daojishi(){var starttimedocument.getElementById(id2).innerText;if(starttime0){return ;}setTimeout(daojishi(),1000);starttime--;document.getElementById(id2).innerTextstarttime;}
/scriptbody
h5 idid210/h5
button idid1 onclickdaojishi()开始倒计时/button/body
/html
7.setTimeout()和setInterval()的使用以及区别
1、setTimeout()方法 这个方法所有浏览器都支持setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来
设定一个时间, 时间到了, 就会执行一个指定的 method。
!DOCTYPE html
html
headmeta charsetUTF-8scriptvar x 0;function countSecond(){x x1;document.haorooms.haoroomsinput.value x;setTimeout(countSecond(), 1000)}/script
/head
html
bodyform namehaoroomsinput typetext namehaoroomsinput value0 size4
/formscriptcountSecond();
/script/body
/html
setInterval() 方法可按照指定的周期以毫秒计来调用函数或计算表达式。setInterval() 方法会不停地调用函数直到
clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body/body
scriptfunction 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的最主要区别是 1setTimeout只运行一次也就是说设定的时间到后就触发运行指定代码运行完后即结束。如果运行的代码中再次运行同样
的setTimeout命令则可循环运行。即 要循环运行需函数自身再次调用 setTimeout()而 setinterval是循环运行的即每
到设定时间间隔就触发指定代码。这是真正的定时器。 2setinterval使用简单而setTimeout则比较灵活可以随时退出循环而且可以设置为按不固定的时间间隔来运行比如第一次1秒第二次2秒第三次3秒。
