js面试题

一、var、const 和 let 区别？

var声明的变量为全局作用域、而let声明的变量为块级作用域、const声明的常量为块级作用域。
var声明的变量存在变量提升，而const和let不存在变量的提升。
var可以重复声明同一个变量、let和const不能声明同一个变量，

二、说一说常见的数据类型？

  基本数据类型：String、Number、Boolean、Undefined、Null、Symbol、BigInt

 引用数据类型：object（array、function、date、math、Reg）

三、如何判断 JS 数据类型？

    typeOf：返回判断数据的类型。对于简单数据类型，
    除了null返回object,其他都可以正确判断。对于引用数据类型，
    除了function外都会返回object。
    instanceof：判断对象的原型链__proto__上是否存在构造函数的原型prototype，
    只能判断引用数据类型，不能判断基本数据类型，
     常用来判断a是否为b的实例。
 object.prototype.toString.call()：返回类型为   [object 数据类型]

四、解释一下什么是闭包 ?

    闭包：就是能够读取外层函数内部变量的函数。
    闭包需要满足三个条件：
    访问所在作用域；
     函数嵌套；
     在所在作用域外被调用 。

五、解释一下原型和原型链 ?

     原型就是一个为对象实例定义了一些公共属性和公共方法的对象模板。
     对象之间的继承关系通过构造函数的prototype指向父类对象，直到指向Object对象为止形成的指向链条。

   通俗讲： 原型链是原型对象创建过程的历史记录。

六、数组排序的方式 ?

for(var i=0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-i-1;j++){
            if(arr[j]>arr[j+1]){
                var temp=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    if(arr[j]===arr[j-1]) i++;
    }

七、for 循环与 forEach 的区别 ?

      1.for循环可以使用break跳出循环，但forEach不能。
      2.for循环可以控制循环起点（i初始化的数字决定循环的起点），forEach只能默认从索引0开始。
      3.for循环过程中支持修改索引（修改 i），但forEach做不到（底层控制index自增，无法左右它）。

八.=== 和==的区别

      ===  三个等号称为同等符。
      当等号两边的值类型相同的时候，直接比较等号两边的值。值相同则返回true。
      若等号两边的值类型不同时直接返回false。
      就是说三个等号，既要判断值也要判断类型是否相等。
      ==：两个等号称为等值符
      当等号两边的值为相同类型时，比较值是否相同，
      类型不同时 会发生类型的自动转换，转换为相同类型后再作比较。
      总的来说就是两个等号 只要值相等 就可以

九.怎样理解作用域何作用域链

      作用域：

      变量与函数的可访问范围。 由当前环境与上层环境的一系列变量对象组成。

      作用：作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

    作用域链：

     变量到 创建该变量的函数的作用域中取值。但是如果在当前作用域中没取到。就会向上级作用域中去查，直到全局作用域。

   这样一个查找过程形成的链条就叫做作用域链。

十.js 中 this 的五种情况

   普通函数调用，this指向window

   函数作为对象的方法被调用时，this指向该对象。

   构造函数调用,this指向返回的这个对象

   显示绑定：通过使用apply()、call()或bind()方法可以显式地将this绑定到函数中的特定对象。

   箭头函数：箭头函数内部没有自己的this，而是继承了包含它的作用域的this值。

十一 iframe 是什么？有什么缺点？

           参考回答：
      定义：iframe 元素会创建包含另一个文档的内联框架
     提示：可以将提示文字放在标签之间，来提示某些不支持 iframe 的浏览器
       缺点：
       会阻塞主页面的 onload 事件
       搜索引擎无法解读这种页面，不利于 SEO
     iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

十二 addEventListener 参数

      参考回答：
   addEventListener(event, function, useCapture)
      其中，event 指定事件名；function 指定要事件触发时执行的函数；useCapture 指定
      事件是否在捕获或冒泡阶段执行。

十三， typeof null 返回值是多少为什么？

 答：object 因为null指向一个空指针对象

十四 简述 ajax 流程

  1客户端产生js的事件
  2创建XMLHttpRequest对象
  3对XMLHttpRequest进行配置
  4通过AJAX引擎发送异步请求
  5服务器端接收请求并且处理请求，返回html或者xml内容
  6XML调用一个callback()处理响应回来的内容
  7页面局部刷新。

十五，js 导致内存泄漏的情况

 大量使用全局变量
 大量使用闭包()
 清除DOM节点时，只清除节点，而没有删除事件
 定时器不清除

十六，使用箭头函数应该注意什么？（箭头函数和 function 的区别）

 （1）用了箭头函数，this就不是指向window 而是声明时的外部环境
 （2）箭头函数不可以使用arguments（参数的集合）对象
 （3）箭头函数不能使用构造函数，也就是说不能使用new命令，否则会抛出一个错误

十七，link 标签和 import 标签的区别

  参考回答：
  link 属于 html 标签，而@import 是 css 提供的
  页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加 载。
  link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
  link 方式样式的权重高于@import 的。

十八，eval 是做什么的

 参考回答：
 它的功能是将对应的字符串解析成 JS 并执行，应该避免使用 JS，因为非常消耗性能
（2 次，一次解析成 JS，一次执行）

十九，null == undefined 为什么

  参考回答：
   要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，但 null == undefined 会返回 true

二十，call 和 apply 是用来做什么？

  参考回答：
    Call 和 apply 的作用是一模一样的，只是传参的形式有区别而已
    1、改变 this 的指向
    2、借用别的对象的方法，
    3、调用函数，因为 apply，call 方法会使函数立即执行

二十一，跨域问题是怎样产生的？  解决方案有哪些？

   同源策略（协议名，域名，端口号（出于安全考虑））
   Jspon 代理 cors

二十二，闭包有什么缺陷？

 答 滥用闭包会造成内存泄漏，因为闭包中引用的的包裹函数中定义的变量永远不会被释放，所以我们在必要的时候及时释放这个闭包函数（赋值为null）

二十三， call apply bind 方法有什么区别

	答：都可以该表this指向
		Bind 返回值this指向被改变后的函数
		Apply  call 改变this指向并执行函数
		APPly  传递的参数必须是一个数组
		Call    可以一个一个传递参数

二十四， es6  箭头函数  this 指向和普通函数 this 指向的区别？

	答：	 箭头函数 this指向函数声明时的上下文环境

二十五，javascript 的本地对象，内置对象和宿主对象有哪些?

本地对象为array object regexp等可以new实例化
内置对象为gload Math等不可以实例化的
宿主为浏览器自带的documentwindow等

二十六，javascript 的两种变量范围有什么不同？

  全局变量:当前页面内有效
  局部变量:函数方法内有效
  let 块级 const块级

二十七，Promise 构造函数是同步执行还是异步执行，那么  then  方法呢？

答：promise构造函数是同步执行的，then 方法是异步执行的

二十八，事件代理在捕获阶段的实际应用

  可以在父元素层面阻止事件向子元素传播，也可代替子元素执行某些操作。

二十九 暂停死区

 在代码块内，使用 let、const 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”

三十 你知道那些事件修饰符

答：.stop阻止事件冒泡
	.once只执行一次，一次性事件
	.self阻止事件冒泡和事件捕获
	.captrue事件捕获阶段触发
	.prevent阻止浏览器默认行为
	.native 触发原生事件

三十一 XML 与 JSON 的区别？

 1) 数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。
 2) 数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
 3) 数据描述方面。JSON对数据的描述性比XML较差。
 4) 传输速度方面。JSON的速度要远远快于XML。

三十二，渐进增强与优雅降级

 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

三十三，Promise 的理解

  什么是Promise？我们用Promise来解决什么问题？
  我们都知道，Promise是承诺的意思，承诺它过一段时间会给你一个结果。
   Promise是一种解决异步操作编程的方案，相比回调函数和事件更合理和更强大。
   从语法上讲，promise是一个对象，从它可以获取异步操作的信息。

三十四，Promise 的两个特点

 Promise对象的状态不受外界影响
 Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可逆

三十五，继承有六种：

  原型继承
  借用构造函数继承
  组合继承
  原型式继承
  寄生式继承
  寄生组合式继承

三十六，防抖和节流的作用

 共同点:限制函数的执行次数

 防抖：通过setTimeout的方式，在一定的时间间隔内，将多次触发只执行最后一次触发；
 节流：减少一段时间的触发频率

三十七，JS 中的宿主对象与原生对象有何不同？

宿主对象:这些是运行环境提供的对象。这意味着它们在不同的环境下是不同的。例如，浏览器包含像windows这样的对象，但是Node.js环境提供像Node List这样的对象。

原生对象:这些是JS中的内置对象。它们也被称为全局对象，因为如果 使用JS，内置对象不受是运行环境影响。

三十八，Promise 有几种状态

 有三种状态：
 pending（进行中）
 fulfilled（已成功）
 rejected（已失败）
 Promise 是es6引入的异步编程解决方案
 可以链式调用，解决回调地狱的问题

三十九，IE 事件

 IE事件只支持冒泡，所以事件流只有两个阶段：

 事件处理阶段：事件在到达目标元素时，触发监听事件。
 事件冒泡阶段：事件从目标元素冒泡到document，并且依次检查各个节点是否绑定了监听函数，如果有则执行。

四十，什么是事件传播？

当一个dom元素发生事件时，事件并不是完全发生在该元素上面，事件传播有三个阶段；

捕获阶段：事件会从window开始向下到每一个元素，直到到达目标元素；
目标阶段：事件到达目标元素；
冒泡阶段：事件从目标元素向上冒泡经过每一个元素，直到到达window；

四十一，fetch 发送 2 次请求的原因

  fetch发送post请求的时候，总是发送2次，第一次状态码是204，第二次才成功？

   原因很简单，因为你用fetch的post请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

四十二，window.onload 和 document .ready 的区别

 window.onload:
   1》不仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发window.onload事件
   2》window.onload: 只执行一次

 Document.ready：
   1》内存中加载完成就触发速度快
   2》Document.ready多 次使用

   Document.ready原生中没有这个方法，jquery 中有$(document).ready(function)可以多次执行|

四十三，form 中的 input 可以设置为 readonly 和 disable，请问 2 者有什么区别？

   readonly不可编辑，但可以选择和复制；值可以传递到后台
   disabled不能编辑，不能复制，不能选择；值不可以传递到后台

四十四，事件委托的优缺点，

 优点：
   减少事件处理的程序，
   处理动态创建的元素，
   简化代码
 缺点：
   不适用于所有请况，
   可能会导致事件冒泡，
   可能会影响性能

四十五，promise 和 setTimeout 分别是什么任务

   他们都是处理异步操作的机制，但是他们的实现方式略有不同。
   promise通常用于处理较为复杂的异步操作，而setTimeout则适用于需要延迟执行一段代码的场景

四十六，说说你对事件流的理解

   事件流分为两种：捕获事件流和冒泡事件流
   捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找到执行目标节点
   冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，知道查到根节点

四十七，什么是 cookie？

   Cookie 是存储在您计算机上的一个小数据包。

   例如，网站可以在访问者的浏览器上放置 cookie，以便在用户下次访问该页面时记住登录凭据。

四十八，谈一谈你理解的函数式编程

   简单说，“函数式编程”是一种“编程范式”，也就是如何编写程序的方法论
   它具有以下特性：闭包和高阶函数、惰性计算、递归、函数是“第一等公民”、只用“表达式”

四十九，JS 延迟加载的方式有哪些？

    JS的延迟加载有助与提高页面的加载速度。
    defer和async、动态创建DOM方式（用得最多）、按需异步载入JS
    defer：延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。
    async：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。

五十，Promise 中 reject 和 catch 处理上有什么区别（三个状态）

    reject是用来抛出异常，catch 是用来处理异常
    reject是Promise的方法，而catch 是Promise 实例的方法
    reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
    网络异常(比如断网)，会直接进入catch而不会进入then的第二个回调

五十一，请说明 JSONP 的工作原理，它为什么不是真正的 Ajax？

  JSONP（带填充的 JSON）是一种通常用于绕过 Web 浏览器中的跨域限制的方法，因为 Ajax 不允许跨域请求。

  JSONP 通过“script”标签发送跨域请求，
  通常使用callback查询参数，然后服务器将数据包装在一个名为printData的函数中并将其返回给客户端。

五十二，请解释关于 JavaScript 的同源策略。

   同源策略可防止 JavaScript 发起跨域请求。
   源被定义为 URI、主机名和端口号的组合。
   此策略可防止页面上的恶意脚本通过该页面的文档对象模型，
   访问另一个网页上的敏感数据。

五十三，什么情况下会用到静态类成员？

   静态类成员（属性或方法）不绑定到某个类的特定实例，
   不管哪个实例引用它，都具有相同的值。
   静态属性通常是配置变量，而静态方法通常是纯粹的实用函数，不依赖于实例的状态。

五十四，Set 数据结构的特点，用法？

  ES6提供了新的数据结构Set,它类似于数组，但是成员的值都是唯一的，没有重复的值。
  Set不同于Map，它没有键值对的概念，它只有一个维度，就是value。
  用法：
  Set本身是一个构造函数，用来生成Set数据结构。
  Set函数可以接受一个数组作为参数，用来初始化。

五十五，什么是 nodejs 技术？

 nodejs是基于chrome V8引擎的js运行环境（一个软件，可以运行js代码）。
 Nodejs实际上就是一种在服务器环境运行js的平台，因为它 封装了谷歌的v8引擎，使其能够运行js。

五十六，axios 是什么？

  axios是一个封装好的独立的ajax请求库, 基于Promise。支持在浏览器和Node中使用。

五十七，在什么阶段下才可以访问操作 DOM？

  调用mounted之前。
   在钩子函数mounted被调用之前，Vue已经将编译好的模板挂载到页面上，所以在mounted中可以访问操作DOM。

五十八， v-show 与 v-if 的使用场景

  v-if 与 v-show 都能控制dom元素在页面的显示。
  v-if 相比 v-show 开销更大（直接操作dom节点增加与删除），如果需要非常频繁地切换，则使用 v-show 较好。如果在运行时条件很少改变，则使用 v-if 比较好。

五十九，为什么要初始化 css 样式（优缺点）

1、因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。
2、提高代码质量。
3、如果不初始化整个页面做完很糟糕，重复的css样式很多。

六十，Set 数据结构的特点？

  ES6提供了新的数据结构Set,它类似于数组，但是成员的值都是唯一的，没有重复的值。
  Set不同于Map，它没有键值对的概念，它只有一个维度，就是value。

六十一，localStorage、sessionStorage、cookie 的作用？

   SessionStorage, LocalStorage, Cookie三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。 区别在于，前两者属于WebStorage，创建它们的目的便于客户端存储数据。 而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。

六十二，你怎么理解 vue 的单向数据流？

  单项数据流是从上到下的，但是它不能从下到上。
  Vue中单向数据流指的是父组件可以传值给子组件，子组件不能直接修改父组件传的值。
  prop也就是父组件传过来的数据，如果我们试图通过子组件的v-model去改变这个prop，也就是试图通过子组件直接去改变父组件的数据，而不是通过发送事件的方式，这是不允许的。

六十三，v-show 与 v-if 的使用场景

 v-if 与 v-show 都能控制dom元素在页面的显示。
 v-if 相比 v-show 开销更大（直接操作dom节点增加与删除），如果需要非常频繁地切换，则使用 v-show 较好。如果在运行时条件很少改变，则使用 v-if 比较好。

六十四，nextTick

  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

六十六，组件化和模块化一样吗？

  模块化是从代码逻辑角度进行划分的，保证每个模块的职能单一，比如登录页的登录功能，就是一个模块，注册功能又算是一个模块。
  组件化，是从UI界面的角度划分的；页面上每个独立的区域，都可以视为一个组件，前端组件化开发，便于UI组件的复用，减少代码量。
  区别是：划分角度不同，组件化是从UI界面角度来划分的，模块化是从代码逻辑角度来划分的。

六十七，如何让 CSS 只在当前组件中起作用?

将当前组件的<style>修改为<style scoped>

六十八，说三种刷新页面的方式？

原生js方式：location.reload()，我们只需要在需要刷新的地方加这么一行代码即可做到刷新。
   借助Vue中的路由跳转方式：如果需要刷新，则写入 this.$router.go(0)，跳转路由，需要跳转的页面就是本页面，所以是go(0)，这样就可以做到页面的重新加载。
   provide / inject 组合方式。前两种方法都是强制刷新，页面会出现短暂空白，而provide/iniect 是普通刷新，不会使页面出现空白，不论组件层次有多深，子组件都可以通过inject来注入，接收这个数据。

六十九，Vue 的双向数据绑定原理是什么？

       答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

七十，说出至少 4 种 vue 当中的指令和它的用法？

       答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

七十一，v-show和v-if指令的共同点和不同点?

        v-show 指令是通过修改元素的 display CSS 属性让其显示或者隐藏
        v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果

七十二，自定义指令（directive）

        全局定义指令：在 vue 对象的 directive 方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

七十三，v-if 和 v-for 为什么不建议混合使用

         被渲染的 dom 会重复一个创建销毁的过程 v-for 的优先级比 v-if 高，
         哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表会影响性能

七十四，计算属性和实例方法有什么区别？

         答：计算属性有缓存，实例方法没有缓存
         计算属性调用时 total 不可以传参 实例方法调用时 total（）可以传参
         computed/methods

七十五，你用过那些 v-model 修饰符？

         答：.lazy 文本框失去焦点后在更新数据
         .trim 清除前后空格的
         .number 从字符中获取数字

七十六，数据渲染   有几种方式    有什么区别？

             答：{{}}
	             v-html:只有v-html可以渲染HTML代码
	             v-text

七十七，你知道那些事件修饰符

         答：.stop 阻止事件冒泡
         .once 只执行一次，一次性事件
         .self 阻止事件冒泡和事件捕获
         .captrue 事件捕获阶段触发
         .prevent 阻止浏览器默认行为
         .native 触发原生事件

七十八，怎样声明全局组件，怎样使用全局组件

         答：Vue.component（‘myHeader’,{
         Template:` <div>全局组件</div>`
         }）
         <my-header></my-header>

七十九，怎样声明局部组件，怎样使用局部组件

         答：声明成 \*\*\*.vue 文件中模板在<template></template>中。
         Js 模块化导出<script></script>
         css<style scoped></style>
         定义 import 引入 注册 components 调用

八十，父子组件怎样实现通讯？

         答：父传子：父组件：<mydiv :list='list'> </mydiv>
         子组件：props[‘list’]
         子传父：子组件：this.$emit(‘子组件事件名’，参数)//打电话
         父组件：<mydiv @子组件事件名=‘父组件事件名’></mydiv>

八十一，怎样使用 props 限定传递的数据，有哪些属性？

         答：type //限定传递的数据类型
         Required:true false //是否必传
         Default:false //指定默认值
         // 自定义验证函数
         validator: function (value) {
         // 这个值必须匹配下列字符串中的一个
         return ['success', 'warning', 'danger'].indexOf(value) !== -1
         }

八十二，v-if 和 v-show 有什么区别，切换时组件触发那些生命周期钩子函数？

         答：v-if 控制的是 dom 的销毁和创建 v-show 只是控制 dom 的 css 中 display 属性
         触发的生命周期 v-if 显示：创建 挂载 隐藏：销毁
         v-show 显示隐藏不触发生命周期钩子函数

八十三，非props属性有什么特点

      答：①会显示在解析之后的标签上
	    ②子组件不能使用该属性

八十四，什么是插槽，怎么使用，什么是具名插槽，如何使用

        答：能够接受组件外部传给组件大段的HTML代码 <slot></slot>
        具名插槽 具有name属性的插槽 可以结合template标签的slot属性，定向给插槽传递内容

八十五，什么是作用域插槽？

	     答：插槽获取子组件的数据 需要属性传递 结合作用域插槽语法代码如下
		Slot-scope=‘props’

八十六，vue中怎样实现组件之间的嵌套

	   答：组件之间的嵌套使用，可以借助插槽，让插槽接受子组件中的内容