前端面试题整理

最新推荐文章于 2022-08-13 14:38:02 发布

冰雪为融

最新推荐文章于 2022-08-13 14:38:02 发布

阅读量324

点赞数 1

分类专栏： web常见面试题整理文章标签：前端面试题

本文链接：https://blog.csdn.net/lhjuejiang/article/details/80786572

版权

web常见面试题整理专栏收录该内容

25 篇文章 8 订阅

订阅专栏

习惯了，每天不管再忙都要整理至少一篇博客，一来是强迫自己把不会的或有疑问的问题进行深入的研究，另外也是不想给自己的偶尔想要偷懒的心留下放纵的机会，最重要的是，每天都能够学到点前端的知识，是件很开心的事，如果实在没得写就看面试题，哈哈。

在网上找的面试题，只把我自己可能有疑问的，易错的整理了出来，如果想要看全部的话，文章后面会有参考文章链接哦

1、猜猜下面这道题的结果

var str = "123abc";
alert(typeof str++);  
alert(str);

正确答案：

var str = "123abc";
alert(typeof str++);  // number
alert(str);  // NaN

2、例举至少 3 种强制类型转换和 2 种隐式类型转换?

1. 强制类型转换：明确调用内置函数，强制把一种类型的值转换为另一种类型。强制类型转换主要有：Boolean、Number、String、parseInt、parseFloat
2. 隐式类型转换：在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有：+、–、==、!

3、同步和异步的区别?

首先同步异步于阻塞非阻塞并没有关系。同步异步主要是事情做完以后，如何进行处理、或者说关注的是一种消息通信机制。
同步的情况下，是由处理消息者自己去等待消息是否被触发；
而异步的情况下是由触发机制来通知处理消息者；
阻塞非阻塞，主要是对于请求者而言的。
阻塞：发出请求等待结果返回，然后再处理后续的事情；

非阻塞：发出请求不等待结果返回，可以接着做后续的事情；

4、GET和POST的区别，何时使用POST？

GET：一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get 只能发送普通格式（URL 编码格式）的数据。

POST：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录 post 提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。

在以下情况中，请使用 POST 请求：
以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）；
发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）；
向服务器发送大量数据（数据大小限制区别）；
上传文件图片时（数据类型区别）；

5、null 和 undefined 的区别？

null： null表示空值，转为数值时为0；
undefined：undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

变量被声明了，但没有赋值时，就等于undefined。
对象没有赋值的属性，该属性的值为undefined。
函数没有返回值时，默认返回undefined

6、iframe有那些缺点？
iframe会阻塞主页面的Onload事件；
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript

动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

7、Event对象中，target和currentTarget的区别？
currentTarget是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，event.target标识事件发生的元素。

有个简单的验证方法，你会在下面的例子中看到e.currentTarget一直返回的是body元素，而e.target则随着你点击位置的不同而变化

<body>
    <ul id="test">
        <li>
            <ul class="enter-sensitive">
                <li>item 1-1</li>
                <li>item 1-2</li>
            </ul>
        </li>
        <li>
            <ul class="enter-sensitive">
                <li>item 2-1</li>
                <li>item 2-2</li>
            </ul>
        </li>
    </ul>
    <script>
        document.body.addEventListener('click', function (e) {
            console.log(e.target, e.currentTarget)
        })
    </script>
</body>

参考文章：

https://zhuanlan.zhihu.com/p/25424194

https://zhuanlan.zhihu.com/p/34760498