分享一些值得收藏的精选Web前端面试题（附答案）

本篇文章给大家总结一些值得收藏的精选Web前端面试题（附答案）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

js面试题

• 1、js数据类型

  • 基本数据类型
    Number、String、Boolean、Null、Undefined、Symbol、bigInt
  • 引用数据类型
    object、Array、Date、Function、RegExp

• 2、js变量和函数声明的提升

  • 在js中变量和函数的声明会提升到最顶部执行
  • 函数的提升高于变量的提升
  • 函数内部如果用 var 声明了相同名称的外部变量，函数将不再向上寻找。
  • 匿名函数不会提升。

• 3、闭包

  • 闭包就是能够读取其他函数内部变量的函数
  • 闭包基本上就是一个函数内部返回一个函数
  • 好处
    • 可以读取函数内部的变量
    • 将变量始终保持在内存中
    • 可以封装对象的私有属性和私有方法
  • 坏处
    • 比较耗费内存、使用不当会造成内存溢出的问题

• 4、== 和 ===的区别

  • ==是非严格意义上的相等
    • 值相等就相等
  • ===是严格意义上的相等，会比较两边的数据类型和值大小
    • 值和引用地址都相等才相等

• 5、this

  • this总是指向函数的直接调用者
  • 如果有new关键字，this指向new出来的对象
  • 在事件中，this指向触发这个事件的对象

• 6、js数组和对象的遍历方式

  • for in
  • for
  • forEach
  • for-of

• 7、map与forEach的区别

  • forEach 方法，是最基本的方法，就是遍历与循环，默认有 3 个传参：分别是遍历的数组内
    容 item、数组索引 index、和当前遍历数组 Array
  • map 方法，基本用法与 forEach 一致，但是不同的，它会返回一个新的数组，所以 callback
    需要有 return 值，如果没有，会返回 undefined

• 8、箭头函数与普通函数的区别?

  • 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象
  • 不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误
  • 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 Rest 参数代替
  • 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数

• 9、同源策略

  • 同源指的是域名、协议、端口号相同

• 10、如何解决跨域

  • jsonp跨域
  • document.domain + iframe 跨域
  • nodejs中间件代理跨域
  • 后端在头部信息里面设置安全域名

• 11、严格模式的限制

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，否则报错
  • 不能使用 with 语句
  • 禁止 this 指向全局对象

• 12、es6新增

  • 新增模板字符串
  • 箭头函数
  • for-of（用来遍历数据—例如数组中的值。）
  • ES6 将 Promise 对象纳入规范，提供了原生的 Promise 对象。
  • 增加了 let 和 const 命令，用来声明变量。
  • 还有就是引入 module 模块的概念

• 13、attribute 和 property 的区别是什么?

  • attribute 是 dom 元素在文档中作为 html 标签拥有的属性
  • property 就是 dom 元素在 js 中作为对象拥有的属性。
  • 对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的
  • 但是对于自定义的属性来说，他们是不同步的

• 14、let和const 的区别是什么?

  • let 命令不存在变量提升，如果在 let 前使用，会导致报错
  • 如果块区中存在 let 和 const 命令，就会形成封闭作用域
  • 不允许重复声明
  • const定义的是常量，不能修改，但是如果定义的是对象，可以修改对象内部的数据

• 15、内存泄漏

  • 定义：程序中己动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题。
  • js中可能出现的内存泄漏情况：结果：变慢，崩溃，延迟大等
  • js中可能出现的内存泄漏原因
    • 全局变量
    • dom 清空时，还存在引用
    • 定时器未清除
    • 子元素存在引起的内存泄露

• 16、script 引入方式?

  • html 静态