前端面试题2019年2月14日

最新推荐文章于 2023-01-24 00:03:59 发布

庚中

最新推荐文章于 2023-01-24 00:03:59 发布

阅读量175

点赞数

分类专栏：十四.面试题文章标签：前端面试题目

本文链接：https://blog.csdn.net/xiaodi520520/article/details/87285546

版权

十四.面试题专栏收录该内容

24 篇文章 2 订阅

订阅专栏

1.比较typeof与instanceof有哪些差异.
答:

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。
instanceof
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

2.请列出js字符串有哪些操作函数?

js 字符串操作函数
concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。 
indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。 
charAt() – 返回指定位置的字符。 
lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。 
match() – 检查一个字符串是否匹配一个正则表达式。 
substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。 
replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。 
search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。 
slice() – 提取字符串的一部分，并返回一个新字符串。 
split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。 
length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。 
toLowerCase() – 将整个字符串转成小写字母。 
toUpperCase() – 将整个字符串转成大写字母。

3.js中如何检测一个变量是一个String类型?请写出函数实现过程

JavaScript中如何检测一个变量是一个String类型？请写出函数实现过程,下面是三种方法:
1.function a(obj){

return typeof(obj)=="string";

}

alert(a(123));

alert(a("abc"));

2.function b(obj){

  return obj.constructor === String

}

alert(b(123));

alert(b("abc"));

3.function type(data){

return Object.prototype.toString.call(data).slice(8,-1).toLowerCase();

}

alert(type(123));

alert(type("abc"));

4.如何理解闭包?
闭包就是指有权访问另一个函数作用域中变量的函数，通俗点讲闭包就是能够读取其他函数变量的函数。

5.jquery中$.get和$.post提交区别是什么?

答:


 jquery中$.get()提交和$.post()提交区别
  1   $.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来 进行异步请求的。



    2   get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体     内容发送给Web服务器的，这种传递是对用户不可见的。



    3   get方式传输的数据大小不能超过2KB 而POST要大的多。



    4   GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

6.$(this)和this关键字在jQuery中有何不同?

 $(this)是jquery对象，能调用jquery的方法，例如click(), keyup()。
而this,则是html元素对象，能调用元素属性，例如this.id,this.value。
例如假设已经使得this和$(this)都指向了input对象了，若要获得input的值,可以this.value，但$(this)就得$(this).val()。

7.写一个function,清除字符串前后的空格?

第一种：循环替换

//供使用者调用  
function trim(s){  
    return trimRight(trimLeft(s));  
}  
//去掉左边的空白  
function trimLeft(s){  
    if(s == null) {  
        return "";  
    }  
    var whitespace = new String(" \t\n\r");  
    var str = new String(s);  
    if (whitespace.indexOf(str.charAt(0)) != -1) {  
        var j=0, i = str.length;  
        while (j < i && whitespace.indexOf(str.charAt(j)) != -1){  
            j++;  
        }  
        str = str.substring(j, i);  
    }  
    return str;  
}  

//去掉右边的空白 www.2cto.com   
function trimRight(s){  
    if(s == null) return "";  
    var whitespace = new String(" \t\n\r");  
    var str = new String(s);  
    if (whitespace.indexOf(str.charAt(str.length-1)) != -1){  
        var i = str.length - 1;  
        while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){  
           i--;  
        }  
        str = str.substring(0, i+1);  
    }  
    return str;  
}     

第二种：正则替换

<SCRIPT LANGUAGE="JavaScript">  
<!--  
String.prototype.Trim = function()  
{  
return this.replace(/(^\s*)|(\s*$)/g, "");  
}  
String.prototype.LTrim = function()  
{  
return this.replace(/(^\s*)/g, "");  
}  
String.prototype.RTrim = function()  
{  
return this.replace(/(\s*$)/g, "");  
}  
//-->  
</SCRIPT> 

//去左空格;
function ltrim(s){
    return s.replace(/(^\s*)/g, "");
}
//去右空格;
function rtrim(s){
    return s.replace(/(\s*$)/g, "");
}
//去左右空格;
function trim(s){
    return s.replace(/(^\s*)|(\s*$)/g, "");
}

第三种：使用jquery

$().trim();

jquery的内部实现为：

function trim(str){   
    return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');   
}

第四种：使用motools

function trim(str){   
    return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');   
}  

第五种：剪裁字符串方式

function trim(str){   
    str = str.replace(/^(\s|\u00A0)+/,'');   
    for(var i=str.length-1; i>=0; i--){   
        if(/\S/.test(str.charAt(i))){   
            str = str.substring(0, i+1);   
            break;   
        }   
    }   
    return str;   
}  

//----------------------------------------------------------
//     去掉字符串前后的空格
//    返回值：
//    去除空格后的字符串
//----------------------------------------------------------
function trim(param) {
    if ((vRet = param) == '') { return vRet; }
    while (true) {
        if (vRet.indexOf (' ') == 0) {
            vRet = vRet.substring(1, parseInt(vRet.length));
        } else if ((parseInt(vRet.length) != 0) && (vRet.lastIndexOf (' ') == parseInt(vRet.length) - 1)) {
            vRet = vRet.substring(0, parseInt(vRet.length) - 1);
        } else {
            return vRet;
        }
    }
}

8.浏览器是如何渲染页面的?
答:

大致的流程如下： 
（解析html以构建dom树->构建render树->布局render树->绘制render树） 
具体的流程如下： 
1：浏览器会将HTML解析成一个DOM树，DOM树的构建过程是一个深度遍历过程，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点， 
2：将CSS解析成CSS规则树； 
3：根据DOM树和CSS来构造render树，渲染树不等于DOM树，像header和display：none；这种没有具体内容的东西就不在渲染树中； 
4：根据render树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系，然后可以计算出每个节点在屏幕中的位置； 
5：遍历render树进行绘制页面中的各元素。 
P.S页面发生重拍（回流）的话，会重新加载DOM树，影响页面加载速度。会导致页面重拍的原因如下： 
**1：页面初始化； 
2：操作DOM时； 
3：某些元素的尺寸变了； 
4：CSS的属性发生改变。** 
浏览器加载页面资源的步骤如下（部分参考网络资料）： 
1.用户输入网址（假设是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 
2.浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件； 
3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 
4.浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了； 
5.浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续加载后面的代码； 
6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； 
7.浏览器发现了一个包含一行Javascript代码的＜script＞标签，直接运行该脚本； 
8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。少了一个元素，浏览器不得不重新渲染这部分代码； 
9.＜/html＞表示暂时加载完成； 
10.此时用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径； 
11.浏览器向服务器请求了新的CSS文件，重新加载页面。然后执行渲染过程。
--------------------- 
作者：longholidays 
来源：CSDN 
原文：https://blog.csdn.net/longholidays/article/details/62054097 
版权声明：本文为博主原创文章，转载请附上博文链接！

9.px和em的区别?
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

10.请说出三种减低页面加载时间的方法?
答:
1、减少http请求（合并文件、合并图片）
2、优化图片文件，减小其尺寸
3、压缩Javascript、CSS代码

庚中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试题2019年2月14日

1.比较typeof与instanceof有哪些差异.答:typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。instanceofinstanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。2.请列出js字符串有哪些操作函数?js 字符串操作函数concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。...
复制链接

扫一扫

专栏目录