web前端面试题目（经典）

第一部分—html、js部分

1.数据类型有哪些？

基本数据类型：Number、String、Boolean、Undefined、Null、Symbol、
复杂数据（引用数据类型）：Object

2.typeof返回类型有哪些？

number、string、boolean、undefined、symbol、function、object、

3.检测数据类型的方法有哪些？

• typeof：能检测基本类型(null除外，它返回object)和函数，对于引用类型只返回object；也可以检测ES6新增的Symbol类型。 console.log(typeof 123); //number
• instanceof：用来检测一个对象是否为某个类(构造函数)的实例,返回布尔值。语法：object instanceof constructor
  console.log([1,2,3] instanceof Array); //true
• constructor：是对象上的属性，指向构造函数
  let num = 123;
  console.log(num.constructor); //ƒ Number() { [native code] }
  console.log(‘abc’.constructor); //ƒ String() { [native code] }
• toString.call() 相当于 Object.prototype.toString.call
  console.log(toString.call(123)); //[object Number]
  console.log(toString.call(‘abc’)); //[object String]
  console.log(toString.call(true)); //[object Boolean]

4.强制类型转换和引用数据类型转换？

• 强制转换：通过String（），Number（），Boolean（）函数强制转换
• 隐式转换通常发生在运算符加减乘除，等于，还有小于，大于等。不同类型的变量比较要先转类型，叫做类型转换，类型转换也叫隐式转换。

5.break、return、continue的区别？

• break：用于完全结束一个循环，跳出循环体。不管是哪种循环，一旦在循环体中遇到break，系统将完全结束循环，开始执行循环之后的代码。 break不仅可以结束其所在的循环，还可结束其外层循环。
• continue的功能和break有点类似，区别是continue只是中止本次循环，接着开始下一次循环。而break则是完全中止循环。
• return关键字并不是专门用于跳出循环的，return的功能是结束一个方法。 一旦在循环体内执行到一个return语句，return语句将会结束该方法，循环自然也随之结束。与continue和break不同的是，return直接结束整个方法，不管这个return处于多少层循环之内。
  （return是返回函数的结果值，并终止当前函数。）

6.递归的用法？（什么时候用以及使用场景）

• 递归的概念：

（1）递归就是方法自己调用自己,每次调用时传入不同的变量。
（2）递归有助于编程者解决复杂的问题，同时可以让代码变得简洁。
（3）利用递归实现对象深拷贝。

7.数组有关的方法？（常见的数组API）

• concat()，连接两个或者更多的数组，并返回一个新的数组。
• join()，以 指定的分隔符将数组元素拼接成字符串。
• reverse()，反转数组元素的排列顺序。
• unshift()，向数组的最前面添加（一个或多个）新元素，并返回新的数组长度。
• push()，在数组后面添加（一个或多个）新元素，并返回数组新的长度。
• shift()，删除并返回数组第一个元素。
• pop()，删除数组的最后一个元素，并返回删除的元素。
• sort()，对数组进行排序，可以接收一个比较函数。
• toString()，将数组转为字符串，并返回结果。
  -** slice()**，返回指定的数组元素，第一个参数是开始的位置，第二个是结束位置（不包含结束位置的元素）。
• splice()，添加和删除数组中的元素，第一个参数是要删除的元素的开始位置，第二个参数是要删除的元素的个数。第三个以及以后的参数都是添加到数组中的新元素。

8.伪数组有哪些？（set、map）

常见的伪数组有：

• 函数内部的 arguments。
• DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）。
• jQuery 对象（比如 $(“div”) ）。
  伪数组特点：
• 具有length属性。
• 按索引方式存储数组。
• 不具有数组的方法。

9.面向对象方面的知识点（原型、原型链、继承）

(a)原型

原型就是一个对象，prototype对象，作用是来共享方法的。
①所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
②所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype

(b)原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

©继承

• 原型继承 特点：优点继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法。
• 类继承（构造函数方式继承）特点：继承了父类的模板，不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型对象
• 混合继承（原型继承和类继承）特点：既继承了父类的模板，又继承了父类的原型对象。优点方便了子类实例传参，缺点就是Boy.pertotype = new Persion() 函数又实例一次，函数内部变量又重复实例一次，大程序时候会很好性能。

10.js作用域？

• JavaScript作用域：简单的说，作用域就是变量与函数的可访问范围。
  在JavaScript中，变量的作用域有全局作用域和局部作用域两种。在Es6中，新增了块级作用域。
• 函数内部可以使用全局变量。
• 函数外部不可以使用局部变量。
• 当函数执行完毕，本作用域内的局部变量会销毁。

10.对 this的理解？

this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同。

• 普通函数this在非严格模式下指向window，严格模式下指向undefined。
• 构造函数this指向实例对象，原型对象里面的方法也指向实例对象。
• 对象方法中的this指向该方法所属的对象。
• 事件绑定方法中的this指向绑定该事件的对象。
• 定时器函数的this指向window。
• 立即执行函数中的this指向window。

11.改变this指向的方法？（即也是问：call()、apply()、bind()三者的异同）

• 共同点 : 都可以改变this指向
• 不同点:
• call 和 apply 会调用函数, 并且改变函数内部this指向。
• call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递。
• bind 不会调用函数, 可以改变函数内部this指向。
• 应用场景
• call 经常做继承。
• apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值。
• bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向。

12.闭包的理解（优点、缺点）

• 闭包的概念：闭包就是能够读取其他函数内部变量的函数。闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
• 闭包的用途：
• 读取函数内部的变量。
• 让变量的值始终保存在内存中。
• 优点：
• 1:避免全局变量的污染。
• 2:方便调用上下文的局部变量。
• 3:通过闭包实现了js私有属性和私有方法的效果；达到了保护变量安全的效果。
• 缺点（使用闭包的注意点）：
  常驻内存 会增大内存的使用量 使用不当会造成内存泄露，详解：
• 由于闭包会使函数中的变量都保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在 IE 中可能会导致内存泄漏。解决方法是，在退出函数时，将不使用的局部变量全部删除。
• 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。

13.内置对象有哪些？

• Object 是 JavaScript 中所有对象的父对象。
• 数据封装类对象：Object、Array、Boolean、Number 和 String。
• 其他对象：Function、Arguments、Math、Date、RegExp、Error。

14.ES6新特性？

ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015。

ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率。
加粗样式
　　ES6新增的一些特性：

1）let声明变量和const声明常量，两个都有块级作用域
　　ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明

2）箭头函数
　　ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义

3）模板字符串
　　模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串

4）解构赋值
　　ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值

5）for of循环
　　for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串

6）import、export导入导出
　　ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

7）set数据结构
　　Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数

8）… 展开运算符
　　可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

9）class 类的继承
　　ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

10）async、await
　　使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
　　async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

11）promise
　　Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

12）Symbol
　　Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

13）Proxy代理
　　使用代理（Proxy）监听对象的操作，然后可以做一些相应事情。

15.BOM（浏览器对象模型）？

- BOM（浏览器窗口）模型四个对象
浏览器的js引擎在解析html页面的时候，将页面主要分割成四个部分：
window对象，location对象，history对象，screen对象。
1.window对象：

• 和定时器相关的方法
• 反复执行的定时器：setInterval(“任务()”,毫秒数)
• 只执行一次的定时器：setTimeout(“任务()”,毫秒数)
  取消定时器：
• 取消一个任务id： clearInterval（iIntervalID） clrearTimeout(iTimeoutID)
• 对话框相关的方法
• alert（“消息对话框”） cofirm（“确认对话框”） prompt(“输入提示框”)
  2.location对象：
  href属性：location.href [ = sURL ]:更改href的url进行跳转
  reload方法：window.location.reload() ;——重新刷新页面
  3.history对象：
  常用方法：
  windw.history.back ()：从历史列表中装入前一个 URL
  windw.history.forward ()：从历史列表中装入下一个 URL
  windw.history.go(1/-1)： 从历史列表中装入 URL
  4.screen对象：
  window.screen.width：页面宽度
  window.screen.height：页面高度
  window.screen.availWidth：:除去任务栏的宽度
  window.screen.availHeight：除去任务栏的高度