web前端面试题必看

Posted 2020-09-03

69.Javascript的typeof返回哪些数据类型；列举3种强制类型转换和2中隐式类型转换

1）返回数据类型

undefined

string

boolean

number

symbol(ES6)

Object

Function

2）强制类型转换

Number(参数)  把任何类型转换成数值类型。

parseInt(参数1，参数2)  将字符串转换成整数

parseFloat()将字符串转换成浮点数字

string(参数)：可以将任何类型转换成字符串

Boolean()  可以将任何类型的值转换成布尔值。

3）隐式类型转换

1.四则运算

加法运算符+是双目运算符，只要其中一个是String类型，表达式的值便是一个String。

对于其他的四则运算，只有其中一个是Number类型，表达式的值便是一个Number。

对于非法字符的情况通常会返回NaN：

‘1‘ * ‘a‘     // => NaN，这是因为parseInt(a)值为NaN，1 * NaN 还是 NaN

2.判断语句

判断语句中的判断条件需要是Boolean类型，所以条件表达式会被隐式转换为Boolean。 其转换规则同Boolean的构造函数。比如：

var obj = {};if(obj){

    while(obj);}

3.Native代码调用

javascript宿主环境都会提供大量的对象，它们往往不少通过JavaScript来实现的。 JavaScript给这些函数传入的参数也会进行隐式转换。例如BOM提供的alert方法接受String类型的参数：

alert({a: 1});    // => [object Object]

1、  写出3个使用this的典型应用

function Thing() { }

 Thing.prototype.foo = "bar";

 Thing.prototype.logFoo = function () {

      console.log(this.foo);

 }

 Thing.prototype.setFoo = function (newFoo) {

      this.foo = newFoo;

  }

  var thing1 = new Thing();

var thing2 = new Thing();

thing1.logFoo(); //logs "bar"

 thing2.logFoo(); //logs "bar"

 thing1.setFoo("foo");

 thing1.logFoo(); //logs "foo";

thing2.logFoo(); //logs "bar";

 thing2.foo = "foobar";

 thing1.logFoo(); //logs "foo";

 thing2.logFoo(); //logs "foobar";

2.

  function Thing1() { }

  Thing1.prototype.foo = "bar";

  function Thing2() {

     this.foo = "foo";

 }

  Thing2.prototype = new Thing1();

  function Thing3() {}

Thing3.prototype = new Thing2();

var thing = new Thing3();

console.log(thing.foo); //logs "foo"

3.

  function Thing() {}

  Thing.prototype.foo = "bar";

Thing.prototype.logFoo = function () {

function doIt() {

onsole.log(this.foo);

}

 doIt.apply(this);

  }

 function doItIndirectly(method) {

method();

}

var thing = new Thing();

doItIndirectly(thing.logFoo.bind(thing)); //logs bar

对前端界面工程师这个职位是怎么样理解的？它的前景会怎样？

前端工程师属于一个比较新兴的技术，各种技术层出不穷，随着客户体验的重要性前端需要掌握的技能也越来越多了，对前端的要求也越来越多了，而且我们离客户很近，除了掌握必要的技能还要掌握用户的心理，属于沟通。 前景：前景无疑是值得肯定的，也需要我们时刻关注最新的技术，这会是一个时刻都在学习的道路

2、  JQuery delegate函数的作用？请举例说明

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

例如点击div中的p标签 让 弹个窗口

$(‘div’).delegate(‘p’, ‘click’, function(){  alert();}

3、  Eval函数的作用

eval可以将字符串生成语句执行，一般执行动态的js语句。
eval的使用场合：有时候我们预先不知道要执行什么语句，只有当条件和参数给时才知道执行什么语句，这时候eval就派上用场了。

4、  标签上title与alt属性的区别是什么

title 是鼠标放上去的额外信息 alt 是不能正常显示的信息

5、  对WEB标准以及w3c的理解与认识？

Web标准就是将页面的解构、表现和行为各自独立实现，w3c对标注提出了规范化的要求1.对结构的要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

1）标签字母要小写；

2）标签要闭合；

3）标签不允许随意嵌套。

2.对css和js的要求：

1）尽量使用外联css样式表和js脚本，使结构、表现和行为分成三块，符合规范，同时提高页面渲染速度，提高用户体验；

2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class命名要做到见文知义，标签越少，加载越快，用户体验更高，代码维护更简单，便于改版；

3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性

6、  Css选择符有哪些？哪些属性可以继承？优先级算法如何计算？

ID 和 CLASS ；Class 可继承 ；伪类A标签可以继承；列表 UL LI DL DD DT 可继承

；优先级就近原则，样式定义最近者为准；载入样式以最后载入的定位为准

优先级为

!important > [ id > class > tag ]  

Important 比 内联优先级高

7、  请戳出ie6/7下特有的cssbug

一：li边距“无故” 增加

设置ul的显示形式为*display:inline-block;即可，前面加*是只 针对IE6/IE7有效

二：IE6 不支持min-height属性，但它却认为height就是最小高度

使用ie6不支持但其余浏览器支持的属性!important。

三:Overflow:

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

四：border：none 在IE6不起作用： 写成border：0 就可以了，

五:100%高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义 height:100%;。

六:双边距 Bug

当元素浮动时，IE6会错误的的把浮动方式的margin值双倍计算，给float的元素添加一个display：inline

七：躲猫猫bug

些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。
1.在（那个未浮动的）内容之后添加一个<span style=”clear: both;”></span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

八:IE6 绝对定位的元素1px 间距bug

当绝对定位的父元素或宽度为奇数时，bottom和right会多出现1px，

解决方案，针对IE6进行hack处理

8、  如何将一个元素600毫秒的速度缓慢向上滑动显示？

如果需要在父元素底部向上，可以利用margin-top 把子元素，挤下去，同事父元素设置隐藏，然后改变margintop的值也可以利用定来做，把子元素定位最下边

(function(){

              var oDiv = document.createElement(‘div‘);

              oDiv.style.width = ‘100px‘;

              oDiv.style.height = ‘100px‘;

              oDiv.style.backgroundColor = ‘red‘;

              oDiv.style.position = ‘absolute‘;

              oDiv.style.marginTop = 100 + ‘px‘;

              document.body.appendChild(oDiv);

              var timer = setInterval(function(){

                     var m = parseInt(oDiv.style.marginTop);

                     if (m == 0 ) {

                            clearInterval(timer);

                            return;

                     }

                     oDiv.style.marginTop = parseInt(oDiv.style.marginTop) - 1 + ‘px‘;

              },600);

       })();

9、  写一个获取非行间样式的函数

Function getStyle(obj, attr){

       If(obj.currentStyle){

              return obj.currentStyle[attr];

}else{

              return getComputedStyle(obj,false)[attr];

}

}

10、 请用正则表达式验证数字

^[0-9]*$ 

11、 为什么利用多个域名来提供网站资源会更有效？

一、        突破浏览器的并发限制（浏览器同一域名最大的并发请求数量为6个，ie6为2个）

二、        节约cookie带宽

三、        CDN缓存更方便

四、        防止不必要的安全问题（尤其是cookie的隔离尤为重要）

五、        节约主机域名连接数，优化页面响应速度

12、 你如何从浏览器的URL中获取参数信息

浏览器宿主环境中，有一个location对象，同时这个对象也是window对象和document对象的属性。

       location对象中提供了与当前窗口加载的文档有关的的信息，即URL信息。

如 https://www.baidu.com/api/sousu?search=baidu&id=123#2

        location.href: 完整URL

        location.protocol: 返回协议（https:）

        location.host: 返回服务器名称和端口号（www.baidu.com）

location.hostname: 返回服务器名称（www.baidu.com）

location.port:返回服务器端口号（http默认80，https默认443）

location.pathname:返回URL中的目录和文件名（api/sousu）

location.search:返回查询字符串（?search=baidu&id=123#2）

location.hash:返回hash值（#2）

13、 手机端文字大小用什么单位

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

14、 是否做过有上百图层的psd切图？ps隐藏其他图层，只显示其中一个图层的快捷键

Alt + 当前图层前眼睛

15、 浏览器标准模式和怀疑模式之间的区别是什么？

这是个历史遗留问题，W3C标准推出前，旧的页面都是根据旧的渲染方式对页面进行渲染的，因此在W3C标准推出后为了保证旧页面的正常显示，保持浏览器的兼容性，这样浏览器上就产生了能够兼容W3C标准渲染的严格模式和保证旧页面显示的怪异模式的标准兼容模式。

       具体表现：

1.在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

在怪异模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2）可以设置行内元素的高宽

    在标准模式下，给span等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。

3）可设置百分比的高度

    在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在标准模式下可以使元素水平居中，但在怪异模式下却会失效, 怪异模式下的解决办法，用text-align属性:

   body{text-align:center};#content{text-align:left}

5）怪异模式下设置图片的padding会失效

6）怪异模式下Table中的字体属性不能继承上层的设置

7）怪异模式下white-space:pre会失效

16、 Javascript的同源策略

同源策略是Javascript重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓的同源就是同协议，同主机名，同端口号。

它的精髓很简单：它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

17、 你所做的WEB移动端项目中，有遇到哪些兼容?

给大家推荐个网址：

http://www.jb51.net/article/84973.htm

18、 有了解响应式布局吗？请大体说一说

响应式布局概念：Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

设计步骤：

1. 设置meta标签
2. 根据媒体查询设置样式
3. 设置多种视图宽度

注意点：

1. 宽度使用百分比
2. 处理图片缩放问题

19、 身为以为web前端工程师，你肯定知道现在最流行的前端技

术吧，有那些？

Vuejs2.0/Angular2.0/React Native /es6//Nodejs

http2

gulp/webpack

20、 请简述为什么要使用数据库的事务

数据库事务(Database Transaction) ，是指作为单个逻辑工作单元执行的一系列操作，要么完全地执行，要么完全地不执行。

原子性（Atomic）（Atomicity)
　　事务必须是原子工作单元；对于其数据修改，要么全都执行，要么全都不执行。通常，与某个事务关联的操作具有共同的目标，并且是相互依赖的。如果系统只执行这些操作的一个子集，则可能会破坏事务的总体目标。原子性消除了系统处理操作子集的可能性。
　　一致性（Consistent）(Consistency)
　　事务在完成时，必须使所有的数据都保持一致状态。在相关数据库中，所有规则都必须应用于事务的修改，以保持所有数据的完整性。事务结束时，所有的内部数据结构（如 B 树索引或双向链表）都必须是正确的。某些维护一致性的责任由应用程序开发人员承担，他们必须确保应用程序已强制所有已知的完整性约束。例如，当开发用于转帐的应用程序时，应避免在转帐过程中任意移动小数点。
　　隔离性（Insulation）(Isolation)
　　由并发事务所作的修改必须与任何其它并发事务所作的修改隔离。事务查看数据时数据所处的状态，要么是另一并发事务修改它之前的状态，要么是另一事务修改它之后的状态，事务不会查看中间状态的数据。这称为隔离性，因为它能够重新装载起始数据，并且重播一系列事务，以使数据结束时的状态与原始事务执行的状态相同。当事务可序列化时将获得最高的隔离级别。在此级别上，从一组可并行执行的事务获得的结果与通过连续运行每个事务所获得的结果相同。由于高度隔离会限制可并行执行的事务数，所以一些应用程序降低隔离级别以换取更大的吞吐量。
　　持久性（Duration）(Durability） 　　事务完成之后，它对于系统的影响是永久性的。该修改即使出现致命的系统故障也将一直保持2017-03-082017-03-08