原生JS 面试题 （基础）（概率大）

文章目录

• 1.面试题: 请描述一下 location.go(-1) 和 history.go(-1) 有什么区别
• 2.面试题：什么是 cookie? 如何回答！
• 3.面试题： 描述一下 cookie / sessionStorage / localStraoge 区别？
• 4.面试题： 面向对象 call apply bind 辅助函数 三个的区别？
• 5.面试题： 请简要描述原生 JavaScript 中有几种实现继承的方式？分别有什么优缺点？ 重点 难点
• 6. 面试题： 字符串内存分析： 请简单描述，下面的代码在内存中 创建了几个对象 | 分配了几个空间？
• 7.面试题：关于事件面试题：简单描述一下 JavaScript 中事件绑定时如何处理兼容性问题？
• 8.面试题：简述 GET 请求和 POST 请求区别？
• 9.面试题：请完成数组的深浅拷贝
• 10.面试题. (笔试) 数组中的重复数据剔重
• 11.面试题. (笔试)观察下面的字符串，统计每个字符出现的次数
• 11.面试题.选择题 set 和 map 正确语法
• 12.面试题. 简单说明箭头函数和普通函数的区别？
• 13.Javascript基本数据类型
• 14.var关键字 和 let关键字有什么区别？
• 15.什么是变量预解析
• 16.说几个数组中的操作函数
• 17.正则表达式中 （）和 【】 和 {} 分别有什么意义
• 18.什么是构造函数
• 19.原生JS中几种继承方式
• 20.GET请求和POST请求区别；超链接标签实现网页跳转发送了什么请求。
• 21.JavaScript类型转换方式？两种转换方式的区别？
• 22.隐式类型转换的场景，至少说三个
• 23.字符串操作的常见函数
• 24.Math中的操作函数
• 25.apply() 函数和call函数的区别
• 26.什么是函数递归
• 27.Array.of()函数、Array.from()函数都是做什么的？
• 28.原生JS Ajax操作步骤
• 29.null和undefined区别？
• 30.函数形式参数和实际参数有什么区别？
• 31.函数里面arguments参数 和 ···args参数区别？
• 32.什么是函数闭包？闭包用在哪里？
• 33.正则表达式里面+、*、？符号的意义？
• 34.原生JS中原型和原型链是做什么的？
• 35.ES6中两个类型之间如何实现继承？
• 36.数组和Set集合的区别
• 37.BOM模型的作品、DOM模型的作用
• 38.描述一些常见的网页事件
• 39.事件执行的三个阶段，什么是事件冒泡
• 40.什么是默认行为？怎么阻止默认行为
• 41.DOM操作样式，有什么需要考虑的问题？
• 42.全局污染？如何规避全局污染？
• 43.怎么查看一个数据的类型？NaN是什么数据类型？
• 44.BOM模型常见内置对象 （重复）
• 45.DOM模型获取标签对象的函数？
• 46.给标签绑定事件的方式有几种？
• 47.什么是事件冒泡？怎么阻止冒泡？
• 48.原生Ajax操作步骤？
• 49.Javascript和JQuery的区别？
• 50.什么是JavaScript？工作在浏览器一侧能做什么？
• 51.怎么查看一个数据的类型？
• 52.自增运算符，符号放在变量前面和后面有什么区别？
• 53.for.in循环和for.of循环有什么区别？
• 54.函数的默认值参数怎么设置？有什么作用？
• 55.什么是自执行函数？有什么用途？
• 56.Ajax的实现步骤？
• 57.JQuery中如何发送get请求?发送post请求?
• 58.函数形式参数和实际参数区别?
• 59.arguments参数 args剩余参数
• 60.什么是构造函数?
• 61.什么是原型?什么是原型链?JS中原型和原型链做什么的?
• 62.怎么判断两个数据是否相等?怎么判断类型和数据是否相等?
• 63.NaN == NaN结果是什么? 为什么?
• 65.数组中常见操作函数 怎么截取一部分数组
• 66.字符串数据转换成布尔类型有什么结果?数值类型转换成布尔有什么结果?
• 67.怎么查看一个变量的数据类型?
• 68.parseint(“10abc”)转换结果是什么?parseint(“abc10”)转换结果是什么?parseint(111,2)转换结果是什么?
• 69.DOM操作中怎么获取一个节点的父节点?
• 70.Math中常见操作函数
• 71NaN是什么意思?
• 72.原生JS继承的方式有几种?ES6继承方式如何实现?
• 73.if([0][1]){—}这里if中的条件是true还是false?为什么?
• 74.如何获取鼠标在窗口的位置?
• 75.原生JS获取文本输入框的内容?
• 76.JS代码中如何跳转页面?如何刷新当前页面?
• 77.什么是事件委托？
• 78.面试题：项目访问过程 用户输入了 https://www.baidu.com ，具体发生了哪些操作？

1.面试题: 请描述一下 location.go(-1) 和 history.go(-1) 有什么区别

首先熟悉 location 地址信息：

• href 属性：用于控制浏览器地址栏，一般用于代码中完成网页跳转或者刷新页面

• <script> // location对象 // 实现页面的点击跳转，类似超链接功能，比超链接功能强大（可以在跳转页面时 编写逻辑代码实现一些功能） var _baidu = document.getElementById("baidu") _baidu.onclick = function(){ // 跳转网页location.href = "http://www.baidu.com/s?wd=明日战记" }// 实现当前网页刷新var _refresh = document.getElementById("refresh")_refresh.onclick = function() { location.href = "#"// 一般这里写的都是当前网页网址}</script>

  and history 历史访问记录:

• back() / forward()
• go()

• <script>// history对象var _b = document.getElementById("b")var _f = document.getElementById("f")var _back = document.getElementById("back")_b.onclick = function() { // 访问上一条记录history.back()}_f.onclick = function() { // 访问下一条记录 history.foeward()}_back.onclick = function() { // 访问上一条记录history.go(-1)}</script>

  面试题: 请描述一下 location.go(-1) 和 history.go(-1) 有什么区别？

  • 两个函数都可以用于页面回到上一页， location.go() 需要插件支持*
  • location.go(-1)回到上一页并且刷新页面
  • history.go(-1) ，回到上一页

  2.面试题：什么是 cookie? 如何回答！

  cookie 是网站应用开发中，服务器给浏览器客户端记录文本数据的一个对象；记录数据的时候有如下特点：

  • 数据格式： key=value ，保存的数据只能是文本数据
  • 有过期时间： expires=xxxx
  • 不设置过期时间，称为临时 cookie ，会话结束数据删除
  • 设置过期时间，称为永久 cookie ，过期时间一到立即删除
  • 可以包含路径，给不同的路径保存不同的 cookie
  • 一个网站，大部分浏览器限制最多保存50个 key=value 键值对
  • 一个网站，大部分浏览器限制最多保存 4K 数据

  • 缺点 存储量太小，只有4KB
  • 缺点 每次HTTP请求都会发送到服务端，影响获取资源的效率
  • 缺点 需要自己封装获取、设置、删除cookie的方法
  • 缺点 当超过单个域名限制之后，再设置cookie，浏览器就会清除以前设置的cookie。IE和Opera 会清理近期最少使用的cookie，FF会随机清理cookie

  回答：

  1. cookie是以小的文本文件形式（即纯文本），完全存在于客户端；cookie保存了登录的凭证，有了它，只需要在下次请求时带着cookie发送，就不必再重新输入用户名、密码等重新登录了。

  2. 是设计用来在 **服务端** 和 **客户端 **进行 **信息传递** 的；

  3.面试题： 描述一下 cookie / sessionStorage / localStraoge 区别？

  cookie / sessionStorage / localStorage 都属于浏览器缓存数据的操作对象

  cookie 是服务器存储在浏览器客户端的一段 key=value 格式的文本内容，包含过期时间、每个网站最多存储 4k 数据或者 50 个键值对数据；操作时如果需要删除数据可以选择清除浏览器缓存或者设置过期时间

  sessionStorage 属于 H5 提供的会话缓存数据，在用户访问网站网页时建
  立会话就可以存储数据，存储的数据在本次会话中可以访问，一旦会话结束存
  储的数据就立即销毁；一般用于存储会话状态数据，如用户登录状态

  localStorage 属于 H5 提供的本地缓存数据，可以在任意访问情况下进行
  数据存储，不受到会话限制，除非用户主动删除否则永久保存在用户本地；一
  般用于存储一些提高用户体验的、没有保密性的数据，如用户视频播放进度等

  sessionStorage 和 localStorage 也受到浏览器的限制，最多存储 5M 的数据

  4.面试题： 面向对象 call apply bind 辅助函数 三个的区别？

  回答思路：先说联系/共同点，然后说区别，最后说项目中的应用场景

  call / apply / bind 都是辅助函数，可以用来修改正在执行的函数内部 this 指向

  call 修改 this 指向，通过 数据序列 传递给函数实际参数，如tom.eat.call(jerry, ‘数据a’, ‘数据b’)

  apply 修改 this 指向，通过 数组方式 传递个函数实际参数，如tom.eat.apply(jerry, [‘数据a’, ‘数据b’])

  bind 修改 this 指向，通过 数据序列方式 传递给函数实际参数，同时返回函数的声明，让开发人员可以延迟或者立即调用，扩展了使用范围，如：tom.eat.bind(jerry, ‘数据a’, ‘数据b’)()

  项目开发中这三个函数的作用一致，根据实际传递数据的情况确定使用哪种方式，

  • 如项目中传递给函数的数据都是零散数据，就可以使用 call 进行函数的调用；
  • 如果传递给函数的数据包含在一个数组中，就可以使用 apply 完成函数的调用；
  • 如果将参数数据交给函数之后，需要做一些其他工作才能执行目标函数，可以使用 bind 交付参数，并且延迟执行函数

  5.面试题： 请简要描述原生 JavaScript 中有几种实现继承的方式？分别有什么优缺点？ 重点 难点

  原生 JavaScript 中通过函数的方式模拟面向对象语法，主要的继承的实现方式有4种，分别是 原型继承、 冒充继承、组合继承、寄生组合继承

  原型继承，基于原型对象的继承，子类和父类在原型链上就存在继承关系；存在的问题是子类在创建对象时无法直接修改父类的属性数据，必须在创建的对象上通过访问属性的方式进行修改，让编码变得复杂；开发中一般很少独立使用

   <script>function Person() { }function Student() { }//原型继承Student.prototype = new Person()</script>``

  冒充继承，基于 call() 辅助函数修改 this 指向的功能，在子类中通过调用父类构造函数的 call() 方法，完成子类可以使用父类构造函数内部属性和方法的使用；存在的问题是首先在原型链上没有真实继承关系，所以子类无法继承父类在原型对象上的数据和函数

   <script> function Person(name) { }function Student(name, age) {  // 冒充继承，可以直接修改父类属性 Person.call(this, name) this.age = age}</script>

  组合继承，结合了原型继承和冒充继承，通过原型继承让子类可以使用父类原型对象上的属性和函数，通过冒充继承可以让子类直接访问父类属性，优化操作语法；存在的问题是两种继承方式都访问了父类的构造函数，继承过程中造成父类构造函数的多次调用存在一定的性能问题；如果性能没有太高要求的情况下，可以通过组合继承的方式进行实现

   <script>function Person(name) { } function Student(name, age)