前端面试总结(1)--笔试知识点汇总

写下标题时，我不禁回想起那年毕业季被找工作支配的恐惧。所谓天要下雨娘要嫁人，裸转前端势在必行，抱着天生我材必有用的丰满理想，过着“哪哪都缺人，哪哪都不缺自己”的骨感现实生活，才明白玉不琢不成器，作为璞玉的自己努力地打磨着，终于成就了自己，成为了一名合格的，杀猪刀磨刀石。

序言

本文整理总结自己在毕业季找工作时，前端笔试遇到的各种细小知识点，多为基础知识，既不全面，也不系统。因此，对于读者而言，本文适用于笔试前对前端知识点的复习，或作为前端参考知识阅读，但不适用于对前端知识系统和深入地理解，也不适用于对前端系统架构的理解。
基于这一点，本文不会对各类知识点进行细致的归纳，但会尽可能保证知识点不重复。如有任何错误，欢迎指正。

P.S. 为了更好地服务读者，本文提到的定义或方法大部分都可以点击跳转到MDN查看详细解释。

知识点汇总

JS基础

1. typeof 操作符返回一个字符串，表示未经计算的操作数的类型。
   

2. 变量声明有 var 和没 var 的区别

   • 声明变量限制在其声明位置的上下文中，而非声明变量总是全局的。
   • 声明变量在任何代码执行前创建，而非声明变量只有在执行赋值操作的时候才会被创建。
   • 声明变量是它所在上下文环境的不可配置属性，非声明变量是可配置的（如非声明变量可以被删除）。

3. undeclared 仅在严格模式中出现 ReferenceError 警告，在代码里赋值了一个未声明的变量，即在代码中有没有带着var 关键字的赋值。

4. Javascript的基本类型

   • 7 种原始类型： Boolean， Null， Undefined， Number， BigInt， String， Symbol
   • 和 Object

5. Hoisting：变量提升

6. noscript如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML

7. void运算符对给定的表达式进行求值，然后返回 undefined。

8. DNS (Domain Name System) 域名系统，将方便用户记忆的域名地址domain names转换为IP数字串IP addresses，从而在因特网Internet 或者私有网络上找到特定的机器。

String

1. substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。语法：str.substring(indexStart[, indexEnd])

2. 正则的匹配方法。^[a-z]是匹配小写的 26 个字母，[A-Z]是匹配大写的26 个字母，{n}表示匹配几位，\w 表示任意的字母、数字、下画线。

3. indexOf() 方法返回调用它的 String对象中第一次出现的指定值的索引，从 fromIndex处进行搜索。如果未找到该值，则返回 -1。语法：str.indexOf(searchValue [, fromIndex])

4. RegExp对象的方法

   • exec()方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。
   • test() 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。
   • toString()返回一个表示该正则表达式的字符串。

Array

1. reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。 语法：arr.reverse()

2. sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的，语法：arr.sort([compareFunction])

3. join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。语法：arr.join([separator])

4. splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

5. slice()方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。语法：arr.slice([begin[, end]])

6. 如何判读一个对象是Array？

   • Array.isArray(obj)
   • Object.prototype.toString.call(obj) == '[object Array]'
   • obj.constructor == Array

7. 数组的number类型强制转换：

   • console.log(+new Array(2)); //当new Array数组长度为2以上，结果都是NaN，为空，0，1时，结果是0；
   • console.log(+[]);//0
   • console.log(+[1]);//1
   • console.log(+[1,2])//NaN
   • console.log(+[undefined]);//0
   • console.log(+[undefined,undefined]);//NaN

Window

1. window.location 只读属性，返回一个 Location 对象，其中包含有关文档当前位置的信息。

   • Location.assign()加载给定URL的内容资源到这个Location对象所关联的对象上。
   • Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。
   • Location.replace()用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面

2. 弹出框

   • alert：显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。
   • confirm：方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 。
   • prompt：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

3. open()Window 接口的 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

DOM(Document Object Model)

强烈推荐书籍《DOM 启蒙》，这本书包含了基本上JavaScript中关于DOM的所有内容，清晰且系统。

1. nodeType属性可用来区分不同类型的节点，比如 元素, 文本 和 注释

2. 查找、添加、移除、替换、复制、创建节点

   • getElementById, querySelector 查找节点
   • appendChild, insertBefore 添加节点
   • removeChild 移除节点
   • replaceChild 替换节点
   • cloneNode 复制节点
   • createElement 创建元素

3. 事件取消

   • preventDefault()：Event 接口的 preventDefault()方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation()，才停止传播。
   • stopPropagation(): 阻止捕获和冒泡阶段中当前事件的进一步传播。
   • stopImmediatePropagation()：阻止事件冒泡并且阻止相同事件的其他侦听器被调用。

其他一些重要知识点

这些知识点可能会相对比较复杂，一些问题直接是用引用了别人的回答。这些知识点都包括在笔试范围内。

1. instanceof运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

   • 判断js中的类型：typeof / instanceof / constructor / prototype
   • js中的instanceof运算符
   • instanceof 运算符简介

2. JS的继承和原型链

3. 立即调用函数表达式(IIFE)是一个在定义时就会立即执行的JavaScript函数。

   • JavaScript中的立即执行函数表达式

4. 闭包：函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。

5. 深入理解CSS中的层叠上下文和层叠顺序

6. JavaScript 开发进阶：理解 JavaScript 作用域和作用域链

7. css盒模型和定位扫盲

8. CSS布局奇淫巧计之-强大的负边距

9. XMLHttpRequest

10. 请求头和响应头

    1. 请求(客户端->服务端[request])
       • GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)
       • Accept: /(客户端能接收的资源类型)
       • Accept-Language: en-us(客户端接收的语言类型)
       • Connection: Keep-Alive(维护客户端和服务端的连接关系)
       • Host: localhost:8080(连接的目标主机和端口号)
       • Referer: http://localhost/links.asp(告诉服务器我来自于哪里)
       • User-Agent: Mozilla/4.0(客户端版本号的名字)
       • Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)
       • If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)
       • Cookie(客户端暂存服务端的信息)
       • Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)
    2. 响应(服务端->客户端[response])
       • HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)
       • Location: http://www.baidu.com(服务端需要客户端访问的页面路径)
       • Server:apache tomcat(服务端的Web服务端名)
       • Content-Encoding: gzip(服务端能够发送压缩编码类型)
       • Content-Length: 80(服务端发送的压缩数据的长度)
       • Content-Language: zh-cn(服务端发送的语言类型)
       • Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)
       • Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)
       • Refresh: 1;url=http://www.it315.org(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)
       • Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)
       • Transfer-Encoding: chunked(分块传递数据到客户端）
       • Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)
       • Expires: -1//3种(服务端禁止客户端缓存页面数据)
       • Cache-Control: no-cache(服务端禁止客户端缓存页面数据)
       • Pragma: no-cache(服务端禁止客户端缓存页面数据)
       • Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)
       • Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)
    3. 在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法。

11. url、href、rel、src

    • url：统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，url就是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL;一般就是浏览器地址栏填写的。
    • href：Hypertext Reference的缩写。意思是超文本引用,用来建立当前元素和文档之间的链接，属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。常见的就是a标签中的。
    • rel：relationship的英文缩写,REL属性用于定义链接的文件和HTML文档之间的关系,e.g. StyleSheet，用于定义链接的文件和HTML文档之间的关系。
    • src：也可以是源文件（source）的简写，一般用作目录名称用于存放源代码，一般指的是引用外部文件的路径，像img标签中src表示图片的路径。

12. JS执行顺序

    • 在HTML body部分中的JavaScripts会在页面加载的时候被执行。
    • 在HTML head部分中的JavaScripts会在被调用的时候才执行。
    • head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
    • body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

13. 主流浏览器内核私有属性css前缀：

    • mozilla内核 (firefox,flock等) -moz
    • webkit内核(safari,chrome等) -webkit
    • opera内核(opera浏览器) -o
    • trident内核(ie浏览器) -ms

后记

这篇先整理这么多吧。
总之，谢谢阅读！