阅读 145

JavaScript常见面试题(持续更新中)

1、js有哪些数据类型,基本数据类型又有哪些

Boolean、NULL、Undefined、Number、String、Object、Symbol(ES6中新定义)
前五种为基本类型,ES6出来的Symbol也是原始数据类型,表示独一无二的值
Object为引用类型,范围挺大,也包括数组、函数
ES2020(ES11)又增加了新类型BigInt,该数据类型的目的是比Number数据类型支持的范围更大的整数值
复制代码

2、判断数据类型

(1)Typeof
    判断所有的值类型(undefined,string,number,boolean,symbol)
    判断是否是函数 // function
    判断是否是引用类型 object(null,[1,2,3],{ a : 2 })
(2)Instanceof
    用来判断A是否为B的实例,比如A instanceof B
    instance只能用来判断两个对象是否属于实例关系,而不能判断一个对象实例具体属于哪种类型
    所以一般用来判断是否是一个数组,[] instanceof Array
(3)Object.prototype.toString.call()
    toString()是Object的原型方法,调用该方法,默认返回当前对象的[Class],这是一个内部属性,
    其格式为[object Xxx],其中Xxx就是对象的类型,对于Object对象,直接调用toString()就能返回
    [object Object],而对于其他对象,则需要通过call/apply来调用才能返回正确的类型信息
(4)constructor
    constructor是原型prototype的一个属性,当函数被定义时,js引擎会为函数添加原型prototype,并且这个
    prototype中的constructor属性指向函数引用,因此重写prototype会丢失原来的constructor. 
    注意:
        1:null 和 undefined 无constructor,这种方法判断不了。
        2:还有,如果自定义对象,开发者重写prototype之后,原有的constructor会丢失,因此,为了规范
        开发,在重写对象原型时一般都需要重新给 constructor 赋值,以保证对象实例的类型不被篡改。
复制代码

3、什么是闭包

    理解闭包首先要理解,js 垃圾回收机制,也就是当一个函数被执行完后,其作用域会被收回,如果形成了
闭包,执行完后其作用域就不会被收回。 
    如果某个函数被他的父函数之外的一个变量引用,就会形成闭包。 
    闭包的作用,就是保存自己私有的变量,通过提供的接口(方法)给外部使用,但外部不能直接访问该变量。
复制代码

4、同源策略和跨域通信

    同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离
潜在恶意文件的重要安全机制。
    协议、域名、端口只要有一个不一样,就是不同的源。
跨域通信
    (1)JSONP:在页面上引入不同域上的js脚本文件不受同源策略限制。因此在js文件载入完毕之后,
触发回调,可以将需要的data作为参数传入。 
         优点:兼容性好(兼容低版本IE) 
         缺点:JSONP只支持GET请求
    (2)CORS:根据请求头的`Origin`值和响应头的`Access-Control-Request-Headers`和
Access-Control-Request-Method`的值进行比对,通过了就可以请求成功,没通过就请求失败。
    (3) postMessage (H5中新增的),window.postMessage(message,targetOrigin) 方法是html5
新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源。
    (4)node反向代理:如果我们用的是node起的前端服务,那我们可以使用node来直接进行反向代理,
引入一个处理代理的插件,然后配置一个`target`。
    (5)Nginx反向代理:主要就是用了`nginx.conf`内的`proxy_pass http://xxx.xxx.xxx`,会把所有
请求代理到那个域名
    (6)WebSocket
    (7)Hash(window.location.hash + iframe)
复制代码

5、this指向问题

(1)普通函数调用 this指向windows;
(2)对象函数调用 this指向这个对象;
(3)构造函数调用 this指向当前实例本身(新创建的对象);
(4)call和apply,bind调用 传入什么指向什么,传入的参数;(call可以传多个参数,apply可以传
    二个参数,第二个数组,不然报错TypeError)
(5)箭头函数调用 this指向上级作用域的值(当前函数上下文);
复制代码

6、原型和原型链

    创建一个函数就会为其创建一个prototype属性,指向这个函数的原型对象,原型对象会自动获得
constructor属性,指向prototype属性所在函数。
    当一个对象调用某个方法或者属性的时候,先在自身查找,如果找到就调用,如果没有就顺着__proto__到
原型对象中查找,如果还没有就继续去原型的原型中查找,一直到null,这样形成一条链叫做原型链。
    如果还没有找到就返回undefined。
复制代码

7、数组中查找指定元素

(1)includes() 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false。
(2) indexOf() 方法返回指定元素在数组中的第一个索引,如果不存在,则返回-1。
(3)lastIndexOf() 方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面
向前查找,从 fromIndex 处开始。
(4)some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个 Boolean 
类型的值。
(5)every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
(6)filter() 方法创建一个新数组, 包含通过所提供函数实现的测试的所有元素。
(7)find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
(8)findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
复制代码

8、运行结果(考验js预解析的变量提升,this的指向问题)

    <script>
      a = 1
      fun(a)
      var a = 0
      function fun(num) {
        console.log(num + this.a)
      }
    </script>
    这道题预解析之后等同于
    <script>
      var a
      function fun(num) {
        console.log(num + this.a)
      }
      a = 1
      fun(a)
      a = 0
    </script>
    其中输出结果以后才运行了a=0,输出结果之前,a的值是1,this这里指向的是windows,
    所以当函数运行,num为1,this.a同样为1,打印结果就是2
复制代码

9、get和post的区别

(1)功能不同

      Ⅰ、get是从服务器上获取数据。

      Ⅱ、post是向服务器传送数据。
复制代码

(2)过程不同

      Ⅰ、get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,
    在URL中可以看到。

      Ⅱ、post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到
    ACTION属性所指的URL地址。用户看不到这个过程。
复制代码

(3)获取值不同

      Ⅰ、对于get方式,服务器端用Request.QueryString获取变量的值。

      Ⅱ、对于post方式,服务器端用Request.Form获取提交的数据。
复制代码

(4)传送数据量不同

      Ⅰ、get传送的数据量较小,不能大于2KB。

      Ⅱ、post传送的数据量较大,一般被默认为不受限制。
复制代码

(5)安全性不同

       Ⅰ、get安全性非常低。

       Ⅱ、post安全性较高。

  - get 参数通过 url 传递,post 放在 request body 中。
  - get 请求在 url 中传递的参数是有长度限制的,而 post 没有。
  - get 比 post 更不安全,因为参数直接暴露在 url 中,所以不能用来传递敏感信息。
  - get 请求只能进行 url 编码,而 post 支持多种编码方式
  - get 请求会浏览器主动 cache,而 post 支持多种编码方式。
  - get 请求参数会被完整保留在浏览历史记录里,而 post 中的参数不会被保留。
  - GET 和 POST 本质上就是 TCP 链接,并无差别。但是由于 HTTP 的规定和浏览器/服务器 的限制,
  导致他们在应用过程中体现出一些不同。
  - GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包。
复制代码

10、Js中的定时器,区别和用法

    (1)setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
    (2)setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
        setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
        由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
        
  
  

    
复制代码
文章分类
前端
文章标签