面试--JS篇

最新推荐文章于 2024-08-28 08:53:32 发布

Web_JHP

最新推荐文章于 2024-08-28 08:53:32 发布

阅读量550

点赞数

本文链接：https://blog.csdn.net/Web_JHP/article/details/80306975

版权

1、如何实现数组、对象的深拷贝，列举所有方法

参考： https://blog.csdn.net/mafan121/article/details/74420957

clone: (obj)=> {
    var buf;
    if (obj instanceof Array) {
        buf = [];
        var i = obj.length;
        while (i--) {
            buf[i] = clone(obj[i]);
        }
        return buf;
    }else if (obj instanceof Object){
        buf = {};
        for (var k in obj) {
            buf[k] = clone(obj[k]);
        }
        return buf;
    }else{
        return obj;
    }
}

2、介绍一下async和await

async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

参考链接： https://segmentfault.com/a/1190000007535316

3、fetch

Fetch 目前还不是 W3C 规范，因此原生支持率并不高。

幸运的是，引入下面这些 polyfill 后可以完美支持 IE8+ ：

fetch支持

1.由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham

2.引入 Promise 的 polyfill: es6-promise3.引入 fetch 探测库：fetch-detector

4.引入 fetch 的 polyfill: fetch-ie8

5.可选：如果你还使用了 jsonp，引入 fetch-jsonp

6.可选：开启 Babel 的 runtime 模式，现在就使用 async/await

参考链接： https://segmentfault.com/a/1190000003810652； https://my.oschina.net/u/1416844/blog/731749

4、如何解决跨域问题？

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。

jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。

5、编写函数解析url，输出对象

getQueryData: function (queryString) {

}

6、实现元素拖拽

Drag.prototype.touchs = function (e) {
var e = e || window.event;
var drag = $('#drag');
var left,top;
var pageX = document.documentElement.clientWidth;
var pageY = document.documentElement.clientHeight;
var w = drag.width();
var h = drag.height();
switch (e.type){
case "touchstart":
$('body').css({
'transform': 'translate3d(0,-'+scrollTo+'px, 0)',
'-webkit-transform': 'translate3d(0,-'+scrollTo+'px, 0)',
'height': $(window).height(),
'overflow': 'hidden'
});
break;
case "touchend":
var ol = drag[0].offsetLeft;
var ot = drag[0].offsetTop;
$('body').css({
'height': 'auto',
'overflow':'visible'
});
if(ot< 0){drag.animate({'top':0},100)}
if(ol>= pageX/2){
drag.animate({'left':pageX-(w+10)},300);
}else{
drag.animate({'left':10},300);
}
break;
case "touchmove":
e.preventDefault();
var x = e.touches[0].clientX;
var y = e.touches[0].clientY;
x = x > pageX?pageX-(w/2):x;
x = x < 0?w:x;
if(y <= 0){
y = h;
return
}
y = y > pageY-(h/2)?pageY-(h/2):y;
drag.css('left',x-(w/2));
drag.css('top',y-(h/2));
break;
}

}

7、函数柯里化

function add(n){

return function(m){
n+=m;
arguments.callee.toString = function(){
return n;
}
return arguments.callee;
}

}

let add = (a,b)=>{
if(b){
return a+b;
}
return function (b) {
return a+b;
}

}

8、安利一个Promise中的执行顺序

摘自：https://juejin.im/entry/58b21e6c570c3500692805f1

setTimeout(function() {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});

console.log(5)；

相同、类似的一个；转自：https://juejin.im/post/5af3cc4af265da0ba3521028

let promise = new Promise(function(resolve, reject) {

console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!'); // Promise , Hi! , resolved

字体大小

var setFontSize = ()=> {

this.width = 750; //psd750px宽度 ,default

this.fontSize = 100;//字体大小

this.widthP = function () {

var p = ((document.body && document.documentElement.clientWidth || document.getElementsByTagName("html")[0].offsetWidth ) / this.width );

var px1 = (p * _self.fontSize).toFixed(4);

px1 = px1 > 100 ? 100 : px1;

px1 = px1 < 0.08 ? 0.08 : px1;

return px1;

};

document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + this.widthP() + "px; !important");

};

bind实现：

Function.prototype.bind = (context) =>{

return function() { // 返回一个新函数

return this.apply(context, arguments); // 执行新函数时，将传入的上下文context作为新函数的this

}

typeOf:

typeOf: function(value) {
var type, typeToString;

if (value === null) {
return 'null';
}

type = typeof value;

if (type === 'undefined' || type === 'string' || type === 'number' || type === 'boolean') {
return type;
}

typeToString = toString.call(value);

switch(typeToString) {
case '[object Array]':
return 'array';
case '[object Date]':
return 'date';
case '[object Boolean]':
return 'boolean';
case '[object Number]':
return 'number';
case '[object RegExp]':
return 'regexp';
}

if (type === 'function') {
return 'function';
}

if (type === 'object') {
if (value.nodeType !== undefined) {
if (value.nodeType === 3) {
return (/\S/).test(value.nodeValue) ? 'textnode' : 'whitespace';
}
else {
return 'element';
}
}

return 'object';