本片文章中的题目均来自大厂 ， 这些企业是行业内的标杆 ， 代表了行业的最高水准 ， 经过了层层筛选得出了一些较好的题目 ， 难易适中 ， 内容丰富 ， 笔试面试中必考或者常规试题 ， 记录分享在此 ， 希望看完对你有一定的帮助。
在本片文章中 ， 我详细记录了做题时的想法和遇到的问题 ， 将解题思路一丝不苟的记录了下来 ， 在结合之后查阅文档 ， 对题目的答案做出了详细的解释 ， 并对知识点做出了充分的补充。
如果文中有地方语义有偏差 ， 或者解释不充分 ， 欢迎大家在文章底部留言 ， 我会虚心学习并及时做出修改。
A. box-sizing
B. box-shadow
C. box-flex
D. box-pack
答案 ：A
解题思路 ： 这道题比较简单 一眼就能看出答案 box-sizing 可以控制元素的盒模型 ，box-shadow 属性用于给元素添加阴影 ； 这里有两个属性比较陌生 box-flex 和 box-pack 很多同学第一眼看到这两个属性都不知道是什么 ， 这两个属性都是旧版本的伸缩属性 ，box-flex 用户创建伸缩容器 ，box-pack 用于主轴对其
A. 应用层
B. 传输层
C. 表示层
D. 会话层
答案 ：A
解题思路 ：TCP/IP 是互联网服务中的协议簇 它将通信过程抽象为了四层 ， 应用层、传输层、互联网层、网络接口层。我们常用的 SMTP、FTP、HTTP 等协议都位于应用层中
setInterval(function () {console.log(' 你好 ') }, 2000)A. 回调函数会在延迟 2 秒后执行一次
B. 回调函数会以 2 秒为间隔重复执行
C. 回调函数会在延迟 2000 秒后执行一次
D. 回调函数会重复执行 2000 次
答案 ：B
解题思路 ： 这道题读完立马就能把正确答案锁定在 A、B 两个选项上 ， 后面两个选项实在是太过离谱。定时器在我们平时开发中太过常用且简单了 ， 以至于我们都没有去记 ， 我当时看到这个题的时候 ， 思维就出现了混淆 ， 不知道谁是间隔执行谁是延迟执行了 ， 稀里糊涂的选了 A ， 希望读到这篇文章的同学能以为我为戒。记住 setTimeout(); 是在指定时间之后执行代码。setInterval(); 是每隔指定的时间就执行一次代码
A. 选择器
B. 动画
C. 伸缩盒
D. 阴影
答案 ：B、C、D
解题思路: CSS3 是一个规范的集合 ， 动画、伸缩盒、阴影都是 CSS3 中全新的特性 ， 而选择器原先就存在 ，CSS3 只是完善了它 ， 实其拥有更加丰富的功能
A. ready()
B. jQuery()
C. $()
D. function()
答案 ： B、C
解题思路 ： 这道题目的答案还是比较明显的 ， 学过 jQuery 的同学应该可以直接看出答案。jQuery 的工厂函数是 jQuery()， 而该函数还有一个别名 $()， 用一个美元符号来代替函数名称。
在这里提一下 ready() 这个方法 ， 当我看到这个方法的时候感觉很陌生 ， 不知道是做什么的 ， 后面查了一下文档是一个事件 ， 等待页面 Dom 树加载完成后 ， 就开始执行。通常我们实现此功能都直接使用了简写方式 $( function(){}) 很少使用这个方法。在这给小伙伴们分享一下
div{width: 100px; height: 100px; padding: 10px; margin: 10px; border: 1px solid #000;}答案 ：122px、100px
解题思路: 从题目可以看出既然题目都这么问了 ， 那么可以肯定两种盒子模型的结果肯定是不同而的 ， 我们平常使用的基本都是谷歌的调试工具 ， 很少去使用 IE， 对 IE 盒模型了解较少。接下来我们一起来了解一下 IE 盒模型。
在 IE 盒模型中内容的宽高将会包含内边距和边框 所以在 IE 盒模型中的宽度还是 100px
扩展知识 ： 什么是盒子模型 ？
盒子模型是从盒子顶部俯视而得的一张平面图 ， 用于描述元素所占用的空间。盒子模型有两种 ，W3C 盒模型和 IE 盒模型。它们的区别是元素的尺寸计算方式不同。使用 CSS 给元素添加宽高 ， 在 IE 盒模型中会将元素的内边距 （padding） 和边框 （border） 计算在内。而在 W3C 盒模型中并不会。
var x = 0, y = 0; x ++ y console.log(x, y);答案 ：0，1
解题思路 ：emmm~ 当我看到这题的时候就有点懵 ， 你说谁闲的没事会这么写代码啊。我知道这里是在考自增运算符 ， 但是问题是这个 ++ 到底加在谁身上 ， 我本着代码从上往下执行的原则将自增算在了 x 上填了 1、0， 但是结果我错了。后面我查阅资料才知道 ， 如果把 ++ 运算符单独放在一行 ， 那么他会与下面的代码合并作为一个整体被解析 ， 相当于 x ；++y； 所以结果为 0 ，1
var x = '1', y; switch (x) {case 1: y = 1 break; case 2: y = 2 break; case 3: y = 3 break; default: y = 0 break;}答案 ：0
解题思路 ： 这个题目看似在考验 switch 判断 ， 实则在考验你知不知道 switch 表达式的匹配模式 ， 不得不说这坑还挺深的。在 switch 语句中 case 中的表达式会进行全等 （===） 匹配 ，x 的 1 是字符串类型 ， 而 case 里面的是数组类型 ， 所以匹配失败走默认的匹配项 default，y=0。
答案 ： 3
解题思路 ： 这道题目考察的是对数组结解构是否了解 ， 从题目上看答案也是相对比较清晰的 ， 即使不太了解数组解构大概也能猜出来。数组结构可以有选择性的赋值 ， 只要在数组指定的位置上不提供元素 ， 就能为其省去结构赋值。数组的第 3 个元素提供了变量名 ， 而在此之前只有两个用于占位的逗号。
答案 ：THML 是超文本标记语言 ， 用于创建网页的标记语言。HTML 的格式比较松散 ， 这会导致一些问题 ， 比如兼容性差、移植性差等。为了解决这些问题 ，W3C 在 2000 发布了 XHTML， 做为 HMTL 的一个子集 ， 它完全兼容 HTML， 但格式更加严谨。
答案 ：CSS 预处理器 ， 能为 CSS 增加新的编程特性 ， 通过编译器将使用新语法的文件输出为一个普通的 CSS 文件 ， 解决了 CSS 代码难以复用 ， 代码冗余 ， 可维护性低的问题 ， 对 CSS 来说这不是锦上添花 ， 而是雪中送炭。常见的 CSS 预处理器有 less，sass，stylus 等。
答案 ：HTTP 即超文本传输协议 ， 是一种获取网络资源的应用层协议。它是互联网通信的基础 ， 由请求和响应构成。通常 首先客户端会向服务端发起请求 ， 让后用传输层的 TCP 建立连接 ， 最后服务器响应请求 ， 做出应答 ， 回传数据报文。
答案 ： 相等 （==） 运算符用于判断两个操作数是否相等 ， 操作数会进行类型转换。全等运算符 （===） 会严格判断两个操作数是否相等 ， 操作数不会进行类型转换。
答案 ： 首先两者所属的对象不同 ，split() 方法是属于 String 和 RegExp 的 ， 而 join() 方法是 Array 的 ， 其次 split() 方法能将字符串分隔为数组 ， 而 join() 方法能将数组中的元素衔接成一段字符串。
答案 ：typeof 两者之间主要有以下三个区。
typeof 运算符用于检测数据类型。而 instanceof 运算符用于检测对象之间的关联。
typeof 运算符执行完后会返回一个小写字母的类型字符串。而 instanceof 运算符 ， 执行完后会返回一个布尔值。
typeof 运算符只需一个操作数 ， 这个操作数可以是基本类型或函数。而 Instanceof 运算符需要两个操作数 ， 并且左操作数不能是基本类型。右操作数必须是函数 ， 否则运算结果将会没有意义。
答案 ： 简单的说 ， 有以下 3 点不同之处。
一 ， 不允许变量提升。
二 ， 不允许重复声明。
三 ， 不覆盖全局变量。
答案 ：ES6 为 Array 对象新增的第一个静态方法是 of(), 用于创建数组 ， 它能接收任意数量的参数。返回值是由这些参数组成的新数组。
答案 ：yield 和 return 有许多区别 ， 可简单概括其中 5 点。
yield 是一个关键词 ， 而 return 是一个运算符。
yield 只能出现在生成器中 ， 而 return 无此限制。
yield 能暂停函数的执行 ， 而 return 是直接终止。
在一个函数中可执行多次 yield 的 ， 而 return 只能执行一次。
yield 只能返回 IteratorResult 对象而 return 能返回任意值
答案 ：virtualDOM（ 虚拟 DOM） 是构建在真实 dom 之上的一层抽象 ， 它将 dom 元素映射成内存中的 javascript 对象。即通过 React.createElement() 得到的 React 元素。形成一颗 javascript 对象树。
答案 ： 有三个生命周期方法被标记为过时 ：componentWillMount、componentWillReceiveProps()、和 component.WillUpdate。虽然目前他们仍然有效 ， 但是不建议在新代码中使用。官方为他们新增的一个以“UNSAFE_”作为前缀的别名。
答案 ： 兄弟组件之间不能直接通信 ， 需要借助状态提升的方式 ， 间接实现信息的传递。把组件之间需要共享的状态提升至最近的父组件中由父组件来统一管理。
答案 ：React Router 提供的 Redirect 组件 ， 可导航到一个新地址 ， 类似于服务端的重定向。
答案 ： 加载器 （loader） 能在 webpack 加载模块时对其进行预处理。几对模块的代码进行转换 ， 下面列出加载器的几个比较经典的用途。
将浏览器无法识别的 JSX，Sass 等语言转换为可识别的 javascript。Css 等语言。
把图像转换成 data url 格式嵌入到 javascript 文件中。
用 Es6 的 Import， 关键字将 Css 文件引入到 javascript 中。
答案 ： FiddlerCore 是一个.NET 类库 ， 可以集成到.net 应用程序中提供了 Fiddler 代理功能 ， 可用来捕获 ， 过滤或修改 http 和 https 流量 ， 而不必借助 Fiddler UI， 想自动化测试这类情况就很适合用 FiddlerCore
答案 ：<keep-alive> 元素能缓存组件的状态。虽然他能包裹任意数量的元素 ， 但是只能渲染其中一个子元素。并且自身不会渲染成一个动物元素 ， 由此可知 ，<keep-alive> 元素类可包含条件指令 ， 但不能包含 v -for 指令。
答案 ：
div{width: 0; height: 0; border: 50px solid transparent; border-top-color: red;}答题思路 ： 这个题目比较简单 ， 先将元素的宽高设置 0px， 边框宽度设置为 50px， 四个边的边框可以拼成一个正方形 ， 然后将其余三个边框的颜色设置为透明 ， 剩下的部分就是一个三角形。
答案 ：
function bubbleSort(arr) {var temp; for (let i = 0; i < arr.length; i++) {for (let j = i + 1; j < arr.length; j++) {if (arr[i] > arr[j]) {// 可以利用解构赋值交换两个变量的值 // [arr[j], arr[i]] = [arr[i], arr[j]] temp = arr[i] arr[i] = arr[j] arr[j] = temp } } } return arr } console.log(bubbleSort([6, 8, 9, 3, 2, 4, 7, 5, 1]))解题思路 ： 冒泡排序是一种最基本的排序算法 ， 其核心思想是比较相邻两个位置的元素。当满足指定条件时 ， 交换两者的位置 ， 当不满足条件时保持不变。
答案 ：
for (let i = 1; i <= 100; i++) {if (i % 3 === 0 && i % 5 === 0) {console.log('all', i) } else if (i % 3 === 0) {console.log('three', i) } else if (i % 5 === 0) {console.log('five', i) } }解题思路 ： 这个题比较简单 判断一下 i 能不能被整除就可以了。在 javascript 中 ， 如果对两个整数 （ 即两个操作数 ） 进行取余运算 ， 得到的余数为零 ， 那么就确定执行了一次整除操作。
<form action="#" id="register"> <input id="txt" type="text" value="1"> </form>答案 ：
// 使用 DOM 中的查找方法 querySelector 获取文本框。var txt = document.querySelector('#txt').value // 使用 DOM 中的查找方法 getElementById 获取文本框。var txt1 = document.getElementById('txt').value // 使用 document 对象的 forms 属性 ， 先通过数字索引获取表单元素。在通过控件的 id 属性获取文本框。var txt2 = document.forms[0].txt.value // 通过 form 对象的 elements 属性来获取文本框。var txt3 = document.forms[0].elements[0].value解题思路 ： 我看到这个题的时候 emmm~ 确实我可以获取到 ， 但是题目中要求使用多种方式获取。我想了一下除了通过获取到 DOM 元素.value 获取到值之外 ， 好像确实不知道怎么通过别的方式获取到 value 值 ， 于是顺手写了两种 ，
var txt = document.querySelector('#txt').value var txt1 = document.getElementById('txt').value两种写法都可以获取到 value 值 ， 但是感觉有点违背题目的宗旨 ， 而且都是通过获取到 DOM 之后.value 得到的值。两种写法的的意思相同。
答案 ：
[x, y] = [1, 2] console.log(x, y); // 1 2 [y, x] = [1, 2] console.log(x, y); // 2 1解题思路 ： 在数组解构时 ， 解构会按顺序作用于数组的元素上 ， 也就是说 ， 变量或对象的属性要取谁的值与它所在的位置有关 ， 位置交换后 ， 变量被赋值的值也会随之改变。
原文链接：https://blog.csdn.net/qq_54527592/article/details/120504746
