前端面试题

1.考察类型转换

console.log(([])?true:fale);
console.log(([] == false?true:fale));
console.log(({ } == false)?true:fale);

得到的结果是什么？

解答

引用类型转换成基本类型才能进行==运算；
引用类型转换成布尔都是true；
第一题
Boolean([]) //true

布尔类型里只有这几参数个返回false，其它都为true
Boolean(undefined) // false

Boolean(null) // false

Boolean(0) // false

Boolean(NaN) // false

Boolean(’’) // false

第二题，和第三题
布尔类型与其它任何类型进行比较，布尔类型将会转换为number类型。
Number([])返回0所以第二题为true

Number转换类型的参数如果为对象返回的就是NaN,
那么Number({})返回的就是NaN。
通过Object.prototype.toString.call({})来判断类型，0与NaN相比为false
所以 true true false

2.考察块级元素有哪些

解答

（1）行内元素有：a b span img input select strong
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

3.考察跨域问题

关于跨域问题下面说法正确的是（）？

A.可以利用flash的http请求，来处理跨域问题

B.通过iframe设置document.domain可以实现跨域

C.一般情况下，m.toutiao.com可以ajax请求www.toutiao.com域名下的接口并获得响应

D.通过jsonp方式可以发出post请求其他域名下的接口

解答

1.flash，不会
2.正确
3.域名不同不能使用ajax
4.jsonp方式不可以发出post请求其他域名下的接口。

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它

的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支

持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域
HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

Javascript中实现跨域的方式总结

    第一种方式：jsonp请求；jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>.
    第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中
    第三种方式：window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
    第四种方式：window.postMessage；window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。
    第五种方式：CORS；CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。
    第六种方式：Web Sockets；web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

考察typeof运算符

下面哪些属于JavaScript的typeof运算符的可能结果：（）

symbol

NaN

boolean

null

array

undefined

string

解答

string number boolean undefined object function symbol(es6新增)

ES6 中的基本数据类型是：
Number、String、Null、Undefined、Symbol、Boolean

用typeof可以检测出变量的基本数据类型，但是有个特例，就是null的typeof返回的是object，这是个javascript的历史bug。。。

考察css

下列说法正确的有：（）

visibility:hidden;所占据的空间位置仍然存在，仅为视觉上的完全透明；

display:none;不为被隐藏的对象保留其物理空间；

visibility:hidden;与display:none;两者没有本质上的区别；

visibility:hidden;产生reflow和repaint（回流与重绘）；

解答

AB visiblity:看不见，摸的着. display:看不见，摸不着. display是dom级别的，可以渲染和重绘。 visiblity不是dom级别的，不能重绘，只能渲染

考察js

页面有一个按钮button id为button1，通过原生的js如何禁用？（）

document.getElementById(“button1”).setAttribute(“Readolny”,true);

document.getElementById(“button1”).setAttribute(“disabled”,”true”);

document.getElementById(“button1”).Readolny=true;

document.getElementById(“button1”).disabled=true;

解答

Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。

考察选择器的优先性

关于下列CSS选择器：ID选择器、类选择器、伪类选择器、标签名称选择器，排序正确的是：（）

ID选择器>Class选择器>伪类=标签名称选择器

ID选择器>伪类>Class选择器>标签名称选择器

ID选择器>Class选择器>伪类>标签名称选择器

ID选择器>Class选择器=伪类>标签名称选择器

解答

一般来说，选择器的优先级（从上往下依次降低）是：
1.在属性后面使用 ! important 会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素内的样式
3.id选择器
4. 类选择器
5.标签选择器
6.通配符选择器