JavaScript面试题，经典常问、易错集合！-EW帮帮网

== 和 ===的区别？
==： 等同的意思，两边值类型不同的时候，要先进行类型转换为同一类型后，再比较值是否相等。
=== ：要求不仅值相等，而且也要求类型相同。不做类型转换，类型不同的结果一定返回false
在标准的 JavaScript 中， Ajax 异步执行调用基于下面哪一个机制才能实现？
Event和callback
以下代码执行后，console 的输出是？

function Foo(){
    console.log(this.location);
}
Foo()

浏览器下输出当前窗口的location，node环境下输出undefined

白屏时间first paint和可交互时间dom ready的关系是？
先触发first paint ，后触发dom ready
什么是零宽断言？
零宽断言：即js正则前瞻表达式。由于js原生不支持后瞻表达式，所以我们不做研究。
/?=(exp)/ ： 正向前瞻，后面一定要匹配什么
/?!exp/： 负向前瞻，后面一定不要匹配什么
经典面试题-IIFE（立即函数）

for (var i = 0; i < 6; i++) {
  function output() {
    console.log(i); // 为什么输出的是6，而不是0，1，2，3，4，5
    // 因为输出的 i 是全局作用域的，当循环结束后 i 的值是 6，所以输出的 i 就是6。
  }
}
output()
for (var i = 0; i < 6; i++) {
  (function (j) {
    console.log(j); //0,1,2,3,4,5
  })(i)
  // 因为 JS 中调用函数传递参数都是值传递 ，所以当立即执行函数执行时，首先会把参数 i 的值复制一份，然后再创建函数作用域来执行函数，循环5次就会创建5个作用域，所以每个输出访问的都是不同作用域的 i 的值 。
}

综合案例-作用域链-闭包-经典面试题
寻找变量指向:
js的4种设计模式：
1. 工厂模式
  优点：封装了创建对象的函数,可以批量创建对象，提高了代码复用率
  缺点：无法区分创建出来的对象种类，函数中的方法，在对象每次创建出来时都会重新创建，造成方法冗余
2. 构造函数模式
  优点：相比于工厂模式可以区分种类
  缺点：方法依旧冗余
3. 原型模式
  优点：方法不冗余
  缺点：所有的属性和方法都放在原型对象中，无法通过实例重写值
4. 组合模式
  优点：构造函数中放实例私有的属性，构造函数原型对象中放共有属性和方法。方法不冗余。目前使用最广泛，认可度最高。
什么是深克隆，浅克隆？
浅克隆，只克隆节点，不克隆节点内容拷贝对象时仅仅拷贝对象本身（包括对象中的基本变量），而不拷贝对象包含的引用指向的对象。)
深克隆，复制节点和内容(不仅拷贝对象本身，而且拷贝对象包含的引用指向的所有对象)
获取节点内部内容的方式和区别？
1. innerHtml：识别HTML代码片段
2. innerText：只识别文本，去除空格和回车，不可以识别代码片段（只会输出标签里面的纯文本内容）
3. textContent：只识别文本，不去除空格和回车（会把标签解析后搬运）
  例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="d1">
    123
    	<p>这里面是p标签的内容</p>
    <!-- 这是注释 -->
    <span>span</span>
  </div>
  <script>
    var d1 =document.getElementById('d1')
  </script>
</body>
</html>

在这里插入图片描述

http 和 https 区别？
1. http：客户端和服务器通信遵循的超文本传输协议（请求和应答的标准）明文传输容易被黑客拦截（wifi、运营商网络、代理服务器）
2. https是具有安全性的ssl加密的传输协议，会对传输的数据进行加密，会对响应的数据解密
3. http默认端口是80，https的默认端口是443
4. 页面加载时间不同：http连接简单无状态；htpps握手时间长，会使得页面加载时间延长50%，增加10%~20%的耗电。
5. https需要ca证书（数据加密方式），费用较高
什么是重排和重绘？
重排： 当dom的变化影响了元素的几何信息（位置），浏览器需要计算元素的几何属性，将其安放在界面中的正确位置，这个过程就叫做重排。重排表现为重新生成排列布局，重新排列元素。
**重绘：**当一个元素的外观（如颜色、字体颜色）被改变，但是没有改变布局，重新把元素外观绘制出来的过程，就叫做重绘。重绘表现为某些元素的外观改变。
重排和重绘都会消耗浏览器的性能（会去计算浏览器的内存空间占据CPU），造成页面卡顿，ui展示迟缓。重排的影响比重绘大。
重排与重绘的关系： 重排一定会出现重绘（位置会变化），重绘不一定会出现重排
什么情况下会出现重排和重绘？
1. 添加、删除节点（重排）、更新节点（重绘）
2. display：none(重排)
3. visibility:hidden（重绘）
4. 添加动画（重排）
5. 添加一个样式表（重排）
6. 用户行为（重排或重绘）
什么是事件委托?
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
将本应该绑定给子元素的事件代理给父元素
目的：减少dom操作浏览器的重排和重绘，并且新添加的元素也可以添加到事件
javascript是单线程语言还是多线程语言?javascript是怎么实现它的异步任务的？
①：JavaScript是一门单线程语言。所谓单线程，就是指一次只能完成一件任务，如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。
②：js在执行代码时，会优先执行主线程的任务。遇到异步任务或者宏任务，不会立即执行，而是放到任务栈（也叫任务队列）中。
为什么这样做？
因为如果立即执行异步请求，而异步请求长时间无法得到回应，主线程就会崩溃无法往下执行。
因此要将异步请求和宏任务放到任务栈中，等主线程任务执行完再去执行任务栈的任务。
说一下前端的存储方式有哪种，都有什么特点？
web存储有cookie和WebStorage，WebStorage又分为sessionstorage和localstorage。
1. cookie存储：产生于服务器，存储于客户端；同一服务器的cookie是共享的，传输数据最大只有4kb。
2. sessionstorage会话存储：针对选项卡而言，一次性存储，当选项卡或浏览器关闭时，会话结束，存储的数据也跟着失效。传输数据可达5M。一般拿来存储token数据。
3. localStorage本地存储：将数据存到本地磁盘中，即使选项卡或浏览器关闭，数据依然存在，传输数据可达5M甚至更大。
script 标签放在header里和body底部的区别？
script通常放在header或者body标签中，不同的位置又不同的加载效果。
放在header中，html结构

本文含有隐藏内容，请开通VIP 后查看

JavaScript面试题，经典常问、易错集合！

网站公告

今日签到

热门文章

最新发布