2018初、中级前端面试题

2018年web前端经典⾯试题及答案阅读⽬录本篇收录了⼀些⾯试中经常会遇到的经典⾯试题以及⾃⼰⾯试过程中遇到的⼀些问题，并且都给出了我在⽹上收集的答案。

马上就要过春节了，开年就是崭新的⼀年，相信很多的前端开发者会有⼀些跳槽的悸动，通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端⾯试者。

（如有错误或更好的答案，欢迎指正，⽔平有限，望各位不吝指教。

:）另外，宣传⼀下⾃⼰发布不久的⼀个前端vue的项⽬：。

希望有兴趣的同学，可以⼀起共同学习。

- 【】【】javascript:JavaScript中如何检测⼀个变量是⼀个String类型？请写出函数实现⽅法1、function isString(obj){return typeof(obj) === "string"? true: false;// returntypeof obj === "string"? true: false;}⽅法2、function isString(obj){return obj.constructor === String? true: false;}⽅法3.function isString(obj){return Object.prototype.toString.call(obj) === "[object String]"?true:false;}如：var isstring = isString('xiaoming');console.log(isstring); // true请⽤js去除字符串空格？⽅法⼀：使⽤replace正则匹配的⽅法去除所有空格: str = str.replace(/\s*/g,"");去除两头空格: str = str.replace(/^\s*|\s*$/g,"");去除左空格： str = str.replace( /^\s*/, “”);去除右空格： str = str.replace(/(\s*$)/g, "");str为要去除空格的字符串，实例如下：var str = " 23 23 ";var str2 = str.replace(/\s*/g,"");console.log(str2); // 2323⽅法⼆：使⽤str.trim()⽅法str.trim()局限性：⽆法去除中间的空格，实例如下：var str = " xiao ming ";var str2 = str.trim();console.log(str2); //xiao ming同理，str.trimLeft()，str.trimRight()分别⽤于去除字符串左右空格。

前端开发工程师面试题及答案在前端开发领域，面试是选拔优秀人才的重要环节。

以下是一些常见的前端开发工程师面试题以及对应的参考答案。

一、HTML 和 CSS 相关问题1、解释一下盒模型以及它在布局中的作用。

答案：盒模型是 CSS 中用于布局的基本概念，它由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

在布局中，理解盒模型对于准确计算元素的尺寸和间距非常重要，能够帮助我们实现各种复杂的页面布局。

2、如何实现一个两栏布局，左边固定宽度，右边自适应？答案：可以使用多种方法实现。

一种常见的方式是使用浮动（float），将左边栏设置为固定宽度并向左浮动，右边栏不浮动，并设置其左边的外边距（marginleft）为左边栏的宽度。

也可以使用 flex 布局，将父容器设置为 display: flex; ，左边栏设置固定宽度，右边栏设置flex: 1; 以实现自适应。

3、说一说 CSS 选择器的种类和优先级。

答案：CSS 选择器包括元素选择器、类选择器、id 选择器、属性选择器、伪类选择器、伪元素选择器等。

选择器的优先级从高到低依次为：内联样式（通过 style 属性设置）＞ id 选择器＞类选择器、属性选择器、伪类选择器＞元素选择器、伪元素选择器。

二、JavaScript 相关问题1、谈谈你对 JavaScript 中作用域和闭包的理解。

答案：作用域决定了变量的可见性和可访问性。

在 JavaScript 中有全局作用域和函数作用域。

闭包是指有权访问另一个函数作用域中的变量的函数。

闭包可以让函数记住其创建时的环境，即使外部函数已经执行完毕，闭包仍能访问外部函数中的变量。

2、如何实现 JavaScript 的继承？答案：常见的实现方式有原型链继承、借用构造函数继承、组合继承、寄生组合继承等。

原型链继承通过将子类型的原型指向父类型的实例来实现继承；借用构造函数继承通过在子类型的构造函数中调用父类型的构造函数来继承属性；组合继承结合了原型链继承和借用构造函数继承的优点；寄生组合继承是一种优化的组合继承方式，避免了不必要的父类实例属性的重复创建。

web前端中级面试题Web前端中级面试题HTML基础•HTML是什么？它是一种什么样的语言？•HTML5相比于HTML4有哪些改进和新增的特性？•什么是语义化标签？为什么要使用语义化标签？•请解释什么是DOCTYPE及其作用。

CSS基础•什么是盒模型？请描述标准盒模型和IE盒模型的区别。

•请解释什么是CSS选择器及其优先级。

•CSS中position属性有哪些取值？请分别描述它们的特点和使用场景。

•请解释CSS的浮动及清除浮动的方法。

JavaScript基础•JavaScript的数据类型有哪些？请描述他们之间的转换规则。

•什么是原型链？请解释JavaScript中的继承原理。

•请描述闭包的概念和优缺点。

•什么是事件冒泡和事件捕获？请描述它们的区别和用法。

前端框架和工具•请列举几个比较流行的JavaScript前端框架，描述它们的特点和适用场景。

•什么是模块化开发？请列举几个常用的JavaScript模块化开发工具。

•请解释什么是异步编程，并举例说明异步编程的用途和常用的处理方式。

•请描述一下的生命周期钩子函数及其执行顺序。

前端性能优化•什么是前端性能优化？请列举一些常见的性能优化方案。

•请解释什么是延迟加载，如何实现延迟加载的效果？•什么是雪碧图？请解释它的原理和优势。

•请列举几个前端性能监控指标，并描述它们的作用。

通信和安全•请解释同源策略及其限制，以及如何实现跨域通信。

•请描述一下HTTP和HTTPS的区别和安全机制。

•什么是XSS攻击？如何防止XSS攻击？•请解释CSRF攻击，以及如何防范CSRF攻击。

代码质量和调试•请解释什么是代码规范，以及为什么要遵守代码规范？•请列举几个常用的前端代码规范工具，并简单描述它们的使用方法。

•请解释什么是调试，以及在开发过程中常用的调试方法。

•请列举个别在开发过程中常见的错误，以及如何进行调试和修复。

面试技巧•在面试过程中，你如何展示你的个人项目和作品集？•你在前端领域中遇到过的最具挑战性的问题是什么？你是如何解决它的？•请解释一下你在团队合作中的角色和贡献。

Web前端中级面试题一、不定项选择1. flex属性是下列哪三个属性的缩写？( )A.flex-growB.flex-wrapC.flex-shrinkD.flex-basis2. 下列哪些选项是JavaScript中的假值（Falsy value）？( )A. 0B. ""C. nullD. undefinedE. NaNF. "false"3. 下列选项中，不是window对象的属性的是( )A. pageXB. locationC. historyD. navigator4. 下面程序输出的结果是什么？( )function sayHi() {console.log(name);console.log(age);var name = "Lydia";let age = 21;}sayHi();A: Lydia 和undefinedB: Lydia 和ReferenceErrorC: ReferenceError 和21D: undefined 和ReferenceError5. 下列关于原型的说法错误的是( )A. 原型可以节省内存空间B. 构造函数中的prototype属性，它是一个对象，我们称之为原型C. 原型有constructor属性，原型的constructor属性指向构造函数D. 任何一个对象都有__proto__属性，实例的对象的__proto__属性指向构造函数二、填空题1. JavaScript是由哪几部分组成。

2. 表达式“123abc”-“123”的计算结果是。

3. 写出三种获取DOM元素的方法。

4. [ 1 , 2 , 3 ].map(parseInt) 输出结果为。

5. 请写出以下代码的执行顺序。

console.log(1)const p = new Promise((resolve) => {console.log(2)resolve()})console.log(3)setTimeout(() => {console.log(4)}, 0)p.then(() => console.log(5))setTimeout(() => {console.log(6)}, 0)console.log(7)三、简答题1. 请写出10个数组实例可以调用的方法。

2018前端面试题及答案汇总1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。

这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。

4个部分一起构成了css中元素的盒模型。

2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素：a、b、span、img、input、strong、select、label、em、button、textar ea块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img3、CSS实现垂直水平居中一道经典的问题，实现方法有很多种，以下是其中一种实现：HTML结构：<div class="wrapper"><div class="content"></div></div>CSS：.wrapper{position:relative;}.content{background-color:#6699FF;width:200px;height:200px;position: absolute; //父元素需要相对定位top: 50%;left: 50%;margin-top:-100px ; //二分之一的height，widthmargin-left: -100px;}4、简述一下src与href的区别href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src 资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

第1篇1. 请解释HTML文档类型声明（DOCTYPE）的作用。

2. 简述HTML与XHTML的区别。

3. 列举常用的HTML5语义化标签。

4. 请说明HTML中行内元素和块级元素的区别。

5. 解释HTML中内联样式和外部样式的区别。

6. 如何在HTML中设置一个链接（a标签）的新窗口打开？7. 如何在HTML中设置图片的alt属性？8. 请解释HTML中的meta标签的作用。

9. 如何在HTML中实现表格的合并和拆分？10. 请说明HTML中的iframe标签的作用。

二、CSS部分1. 请解释CSS盒模型的概念。

2. 简述CSS选择器的优先级排序规则。

3. 列举CSS中常用的选择器类型。

4. 如何设置CSS的继承？5. 请解释CSS的边距重叠现象。

6. 如何实现CSS的响应式布局？7. 请说明CSS中的px、em、rem、vw、vh等单位的区别。

8. 如何使用CSS实现水平垂直居中？9. 请解释CSS的伪类和伪元素的概念。

10. 如何实现CSS的动画效果？三、JavaScript部分1. 请解释JavaScript中的数据类型。

2. 如何判断一个变量是否为null？3. 如何实现JavaScript中的深拷贝和浅拷贝？4. 请解释JavaScript中的闭包的概念。

5. 如何实现JavaScript中的原型链？6. 请解释JavaScript中的事件冒泡和事件捕获。

7. 如何实现JavaScript中的异步编程？8. 请解释JavaScript中的模块化编程。

9. 如何使用JavaScript中的正则表达式？10. 请解释JavaScript中的原型继承和类继承的区别。

四、jQuery部分1. 请解释jQuery的概念和作用。

2. 如何使用jQuery选择器选择元素？3. 请说明jQuery中的事件委托和事件绑定。

4. 如何使用jQuery实现元素的添加和删除？5. 请解释jQuery中的animate()函数的作用。

前端面试题及答案中高级# 前端面试题及答案中高级1. HTML5 新增了哪些表单元素？HTML5 引入了多个新的表单元素，包括但不限于：- `email`：用于输入电子邮件地址。

- `url`：用于输入URL。

- `number`：用于输入数字。

- `range`：用于输入一定范围内的数字。

- `date`：用于输入日期。

- `month`：用于输入月份和年份。

- `week`：用于输入周和年份。

- `time`：用于输入时间。

- `datetime`：用于输入日期和时间。

- `datetime-local`：用于输入日期和时间（不包含时区）。

- `search`：用于搜索框。

- `tel`：用于输入电话号码。

- `color`：用于选择颜色。

2. CSS选择器有哪些类型？CSS选择器主要分为以下几类：- 标签选择器：根据HTML标签选择元素，如`div`, `p`。

- 类选择器：使用点号`.`后跟类名选择元素，如`.example`。

- ID选择器：使用井号`#`后跟ID名选择元素，如`#unique`。

- 属性选择器：根据属性选择元素，如`[type="text"]`。

- 伪类选择器：用于选择元素的特殊状态，如`:hover`, `:first-child`。

- 伪元素选择器：用于选择元素的特定部分，如`::before`,`::after`。

- 组合器：用于组合选择器，如后代选择器` `, 子选择器`>`, 相邻兄弟选择器`+`, 通用兄弟选择器`~`。

3. JavaScript中闭包是什么？闭包是一个函数和声明该函数的词法环境的组合。

闭包让你可以从内部函数访问外部函数作用域中的变量。

即使外部函数已经执行完毕，闭包仍然可以访问外部函数的变量。

4. 解释JavaScript中的原型继承。

JavaScript中的原型继承是一种基于原型链的继承方式。

每个JavaScript对象都有一个原型对象，对象的属性和方法可以通过原型链向上查找。

本文部分内容来自网络整理，本司不为其真实性负责，如有异议或侵权请及时联系，本司将立即删除！== 本文为word格式，下载后可方便编辑和修改！ ==BAT及各大互联网公司前端笔试面试题：JavaScript篇很多面试题是我自己面试BAT亲身经历碰到的。

整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习前端基础更是大有裨益。

而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。

前面几题是会很基础，越下越有深度。

初级Javascript：1.JavaScript是一门什么样的语言，它有哪些特点?没有标准答案。

2.JavaScript的数据类型都有什么?基本数据类型：String,boolean,Number,Undefined, Null引用数据类型：Object(Array,Date,RegExp,Function)那么问题来了，如何判断某变量是否为数组数据类型?方法一.判断其是否具有“数组性质”，如slice()方法。

可自己给该变量定义slice方法，故有时会失效方法二.obj instanceof Array 在某些IE版本中不正确方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：if(typeof Array.isArray==="undefined"){Array.isArray = function(arg){return Object.prototype.toString.call(arg)==="[object Array]"};}3.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做?(不使用第三方框架)document.getElementById(“ID”).value4.希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)var domList = document.getElementsByTagName(‘input’)var checkBoxList = [];var len = domList.length; //缓存到局部变量while (len--) { //使用while的效率会比for循环更高if (domList[len].type == ‘checkbox’) {checkBoxList.push(domList[len]);}}5.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)var dom = document.getElementById(“ID”);dom.innerHTML = “xxxx”dom.style.color = “#000”6.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做?直接在DOM里绑定事件：在JS里通过onclick绑定：xxx.onclick = test通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)那么问题来了，Javascript的事件流模型都有什么?“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡7.什么是Ajax和JSON，它们的优缺点。

前端中级面试题前言前端工程师是当今互联网行业中备受青睐的岗位之一。

随着互联网技术的发展和应用的普及，对于前端开发的需求也越来越高。

作为一个前端中级工程师，你需要具备扎实的基础知识和一定的实践经验。

本文将为大家提供一些前端中级面试题，希望对大家在面试中有所帮助。

一、HTML/CSS基础1. 请简要说明HTML5的新特性有哪些？HTML5引入了许多新的特性，如语义化标签（<header>、<nav>、<section>等）、视频音频标签（<video>、<audio>等）、画布标签（<canvas>）等。

2. 如何实现垂直居中一个元素？可以通过使用flex布局、绝对定位配合transform属性或者使用表格布局等方式实现垂直居中。

3. 请解释一下盒模型是什么？盒模型是指HTML元素在页面中所占据的空间。

它由内容区、内边距、边框和外边距组成。

二、JavaScript基础1. 请解释一下JavaScript的事件委托是什么？JavaScript事件委托是一种通过将事件处理程序添加到父元素上，利用事件的冒泡机制，来处理子元素上的事件。

2. 请解释一下闭包是什么？闭包是指函数可以访问并操作其外部函数作用域中的变量，即使外部函数已经执行结束。

3. 请简要说明什么是异步编程？如何实现？异步编程是指在执行某个任务时，不需要等待上一个任务执行完成，而是继续执行下一个任务。

实现异步编程的方式有回调函数、Promise对象和async/await等。

三、框架与库1. 请简要说明React的特点和优势。

React是一个用于构建用户界面的JavaScript库，具有如下特点：虚拟DOM、组件化、单向数据流、高性能等优势。

2. 请简要说明Vue的特点和优势。

Vue是一套用于构建用户界面的渐进式框架，具有如下特点：轻量、简单易用、双向数据绑定等优势。

3. 请简要说明Angular的特点和优势。