前言
很多面试题还可以从牛客网获取的，面试的时候可以多刷刷牛客网题库
广州广燊企业管理咨询有限公司前端面试题
选择题
Linux系统中某文件的权限是d-r-xrw---x，那么一下描述正确的有（D）
A. 该文件类型为块设备文件 B. 文件的所属组成员的权限为可读，可写，可以通过cd命令进入目录 C. 文件的所有者权限为可读，可写 D. 文件的非本组成员的权限为只可执行 解析： d:表示文件类型，代表文件类型为目录。 r-:代表所有者的权限。只读。 xrw-:所有者所属组的权限。x(可执行)，r(只读)，w(可写). x:非本组成员的权限.可执行Node.js中，下列哪个选项能取得当前脚本文件的路径？（C）
A.path.filename() B.path.dirname() C.__filename D.__dirname 解析： C 当前模块文件的带有完整绝对路径的文件名 D 当前文件所在目录的完整目录名元素的alt和title有什么异同，选出正确的说法？（B）
A.不同的浏览器，表现一样 B.alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字 C.alt和title同时设置的时候，title作为图片的替代文字出现，alt是图片的解释文字 D.以上说法都不正确 解析： alt是html标签的属性，而title既是html标签，又是html属性。title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。str.replace(/\s+$/g, '')这个表达式的效果是（D）
A.去掉str的所有空格 B.去掉str开头和末尾的空格 C.去掉str开头的空格 D.去掉str末尾的空格下述有关css属性position的属性值的描述，说法错误的是？（B）
A.static：没有定位，元素出现在正常的流中 B.fixed：生成绝对定位的元素，相对于父元素进行定位 C.relative：生成相对定位的元素，相对于元素本身正常位置进行定位 D.absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位下面这个JS程序的输出是什么：（A）
function foo() { var i = 0; return function() { console.log(i++); } } var f1 = foo(), f2 = foo(); f1(); f1(); f2(); A. 0 1 0 B. 0 1 2 C. 0 0 0 D. 0 0 2请给出这段代码的运行结果（C）
<SCRIPT LANGUAGE="JavaScript"> var bb = 1; function aa(bb) { bb = 2; alert(bb); }; aa(bb); alert(bb); </SCRIPT> A. 1 1 B. 1 2 C. 2 1 D. 2 2以下代码执行的结果（C）
for(var i=0;i<3;++i){ setTimeout(function(){ console.log(i)； },100); } A. 0，1，2 B. 1，2，3 C. 3，3，3 D. 0，0，0下列说法错误的是（A）
A. 设置display:none后的元素只会导致浏览器的重排而不会重绘 B. 设置visibility后的元素只会导致浏览器重绘而不是重排 C. 设置元素opacity: 0后，也可以触发点击事件 D. visibility: hidden的元素无法触发其点击事件 解析： display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生重绘，但不可触发绑定事件 opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的数组arr = [1, 2, 3, 4, 5]，以下返回值为5的是（B）
A. arr.push() B. arr.pop() C. arr.shift() D. arr.unshift() 解析： push：在数组的末尾增加一个或多个元素，并返回数组的新长度。 pop： 删除数组的最后一个元素，并返回这个元素。 unshift: 在数组的开头增加一个或多个元素，并返回数组的新长度。 shift： 删除数组的第一个元素，并返回这个元素。下列关于HttpCode说法不正确的是（B）
A. 404：服务器找不到请求的网页 B. 302：请求的网页已永久移动到新位置 C. 500：服务器内部错误 D. 200：服务器已成功处理了请求 解析： • 200：请求被正常处理 • 204：请求被受理但没有资源可以返回 • 206：客户端只是请求资源的一部分，服务器只对请求的部分资源执行GET方法，相应报文中通过Content-Range指定范围的资源。 • 301：永久性重定向 • 302：临时重定向 • 303：与302状态码有相似功能，只是它希望客户端在请求一个URI的时候，能通过GET方法重定向到另一个URI上 • 304：发送附带条件的请求时，条件不满足时返回，与重定向无关 • 307：临时重定向，与302类似，只是强制要求使用POST方法 • 400：请求报文语法有误，服务器无法识别 • 401：请求需要认证 • 403：请求的对应资源禁止被访问 • 404：服务器无法找到对应资源 • 500：服务器内部错误 • 502：服务器挂了 • 503：服务器正忙以下javascript代码，在浏览器中运行的结果是（A）
var arrTemp = [1, 2, 3]; arrTemp.shift(); //[2, 3] arrTemp.push(1); //[2, 3, 1] arrTemp.unshift(2); //[1] var arrNew = arrTemp.concat([1,2]);//[1, 1, 2] console.log(arrNew); A. [2, 2, 3, 1, 1, 2] B. [2, 1, 2, 1, 1, 2] C. [2, 2, 3, 1, [1, 2]] D. [2, 1, 2, 1, [1, 2]]运行如下代码，请问两处console的输出结果（D）
var count = 0; var Product = { count: 1, getCount: function() { return this.count++; } } console.log(Product.getCount()); var func = Product.getCount; console.log(func()); A. 1 1 B. 2 2 C. 1 2 D. 1 0 var Product = { count: 1, getCount: function( ) { return this.count++; } }; console.log(Product.getCount()); var func = Product.getCount; console.log(func()); //输出：1 NaN在大数据量场景下，以下哪种js中字符串连接方式较为高效（C）
A. a += b B. a = a + b C. Array.join() D. Array.push() 解析： +：新建一个临时字符串，将新字符串赋值为a+b，然后返回这个临新字符串并同时销毁原始字符串，Array.join()不会新建临时字符串效率更高（{} + ‘b’ > {} + 'a'）返回值是（C）
A. a B. b C. true D. false 解析： 当一个 statement 以 {, function, async function, class, let [ 开始的时候，这些符号将不被解释成表达式的一部分。 { 将开启一个block function async function 用于函数定义 class 用于类定义 let [ 用于 let [x, y] = z; 形式的变量定义 {}+'a' 中 ，{} 不会被解释为一个空对象（这样{}+'a' 将成为一个表达式，{ 开启了一个 Expression Statement），而是一个空 block。它什么也不做。+'a' 是一个表达式，结果 NaN。 {} + 'b' > {} + 'a' 这里第一个 {} 将被解释为一个空 block （同上），但是第二个 {} 并不处在语句的起始，因而会被认为一个空对象，与'a' 相加的结果是 [object Object]a。 NaN > '[object Object]a' ，结果为 false. ({} + 'b' > {} + 'a') 这时两个 {} 均不处在起始。于是均被解释为空对象。'[obejct Object]b' > '[object Object]a' ，结果为 true 。
填空题
写出一个只匹配英文和数字并只能是英文开头的正则表达式：
/^[a-zA-Z]+\d+/JavaScript中改变this关键字指向都有哪些方式：
apply(obj, arg1, arg2, ...) call(obj, [arg1, arg2, ...]) bind(obj)Html5手机端适配，怎么实现1rem表示为50px：
let copy1 = {x: 1}，对copy1实现先拷贝
//浅拷贝： let copy2 = Object.assign({}, copy1); //深拷贝： let copy2 = function(obj) { let copy = obj instanceof Array ? [] : {}; for (let i in obj) { if (obj.hasOwnProperty(i)) { copy[i] = typeof obj[i] === 'object' ? copy2(obj[i]) : obj[i]; } } return copy; }如何准确判断一个变量是数组类型（请写出代码）
let a = [1,2,3] let test = function(arg) { if (arg instanceof Array) { return true } return false } test(a)
简答题
请描述一下cookies，sessionStorage和localStorage的区别
**相同点** > 1. 都储存在客户端 **不同点** > 1. 储存大小 > - cookie数据大小不能超过4k > - sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 > 2. 有效时间 > - cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 > - sessionStorage 数据在当前浏览器窗口关闭后自动删除 > - localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 > 3. 数据与服务器之间的交互方式 > - cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端 > - sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存简述浏览器发起一个网络请求（HTTP请求事务）后，都经历哪些步骤：
a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起HTTP请求 d. 服务器端响应http请求，浏览器得到html代码 e. 浏览器解析html代码，并请求html代码中的资源 f. 浏览器对页面进行渲染呈现给用户写一个原型链接继承的例子
function Elem(id) { this.elem = document.getElementById(id); } Elem.prototype.html = function(val) { var elem = this.elem; if (val) { elem.innerHTML = val; return this; } else { return elem.innerHTML; } } Elem.prototype.on = function(type, fn) { var elem = this.elem; elem.addEventListener(type, fn); return this; } var div = new Elem('#elem'); div.html('hello word!'); div.on('click', function() { alert('clicked'); })