JS面试题

js 基本类型？null 和 undefined 区别

• 基本类型：number、string、boolean、null、undefined、Symbol

  • Symbol 代表独一无二的值，用于定义对下对象的唯一属性名

  • Symbol 接收字符串作为参数，如果是对象则调用 toString 转为字符串

    const symbol1 = Symbol() // Symbol()
    const symbol2 = Symbol(23) // Symbol(23)
    console.log(Symbol('foo') === Symbol('foo')) // false
    

  • Symbol 不是构造函数，使用 new Symbol 会报错，是原始类型的值不是对象Symbol is not a constructor

  • 获取对象属性两种方式

    Object.getOwnPropertySymbols() // 返回只包含Symbol的属性名的数组
    Object.getOwnPropertyNames() // 返回只包含字符串类型的属性名的数组
    

  • 对象 key 两种类型：字符串和 Symbol，Symbol 属性不会出现在 for...in、for...of、也不会被 Object.keys()和 Object.getOwnPropertyNames()、JSON.stringify()返回

• 引用类型：object、Array

介绍 js 有哪些内置对象？

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

渐进增强和优雅降级

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

JS 严格模式

use strict 使得 js 代码在更严格的条件下运行，使 js 编码更加规化，消除 js 语法的一些不合理、不严谨之处，减少一些怪异行为

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

事件冒泡和事件捕获

一个事件触发时会进行事件流，而事件流有两个阶段：1、从外到里为捕获阶段；2、从里到外为冒泡阶段

• 阻止冒泡

  e.stopPropagation()
  e.cancelBubble() // IE
  

事件委托

将原本绑定在子元素的事件委托给父元素，原理就是 DOM 元素的事件冒泡，使用事件代理的好处是提高性能

可以节省内存占用，减少事件注册

实现新增子元素是无需再次对其绑定

eval 是做什么的

• 它的功能是把对应的字符串解析成JS代码并运行
• 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
• 由JSON字符串转换为 JSON 对象的时候可以用eval，var obj =eval('('+ str +')')

闭包的理解

有权访问其他函数作用域内变量的函数，定义在函数内的函数，可以访问当前函数定义的变量，而定义在函数外的函数，就无法访问函数内部的变量

由于在 js 内变量的作用域属于函数作用域，当函数执行完后作用域就被清理、内存也随之被回收，但由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域原因，即使上级函数执行完，作用域也不会随之销毁

使用场景：setTimeout、回调、函数防抖、实现封装（私有变量提供闭包访问）和缓存（设置变量，存储闭包函数执行结果）

原型链

由于__proto__是任何对象都有的属性，所以形成一条__proto__连接起来的链条，当查找对象属性时，先查找对象本身是否有此属性，如果不存在会在原型链上查找

prototype 时函数才有的属性

__proto__是每个对象都有的属性

instance.constructor.prototype === instance.__proto__

this 理解

• this总是指向函数的直接调用者（而非间接调用者）
• 如果有new关键字，this指向new出来的那个对象
• 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window

说一下什么是栈、什么是堆、什么是队列

• 基本类型保存在占内存中的简单数据段，都有固定的大小，占用的内存控件大小是确定的，并由系统自动分配和自动释放
• 引用类型是保存在堆中的对象，值大小不固定，栈内存中存放的是该对象的访问地址指向堆内存中的对象
• 队列，在队列头部进行删除操作，在队列末端进行插入操作
• 栈是先进后出，队列是先进先出

深浅拷贝

JavaScript 继承

new 操作符具体干了什么呢?

防抖节流代码实现

类型检测

数组去重

数组扁平化处理

以上 7 个知识点js 手写代码题

通用事件监听函数

// event(事件)工具集
markyun.Event = {
  // 页面加载完成后
  readyEvent: function (fn) {
    if (fn == null) {
      fn = document
    }
    var oldonload = window.onload
    if (typeof window.onload != 'function') {
      window.onload = fn
    } else {
      window.onload = function () {
        oldonload()
        fn()
      }
    }
  },
  // 视能力分别使用dom0||dom2||IE方式 来绑定事件
  // 参数： 操作的元素,事件名称 ,事件处理程序
  addEvent: function (element, type, handler) {
    if (element.addEventListener) {
      //事件类型、需要执行的函数、是否捕捉
      element.addEventListener(type, handler, false)
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, function () {
        handler.call(element)
      })
    } else {
      element['on' + type] = handler
    }
  },
  // 移除事件
  removeEvent: function (element, type, handler) {
    if (element.removeEnentListener) {
      element.removeEnentListener(type, handler, false)
    } else if (element.datachEvent) {
      element.detachEvent('on' + type, handler)
    } else {
      element['on' + type] = null
    }
  },
  // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
  stopPropagation: function (ev) {
    if (ev.stopPropagation) {
      ev.stopPropagation()
    } else {
      ev.cancelBubble = true
    }
  },
  // 取消事件的默认行为
  preventDefault: function (event) {
    if (event.preventDefault) {
      event.preventDefault()
    } else {
      event.returnValue = false
    }
  },
  // 获取事件目标
  getTarget: function (event) {
    return event.target || event.srcElement
  },
  // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
  getEvent: function (e) {
    var ev = e || window.event
    if (!ev) {
      var c = this.getEvent.caller
      while (c) {
        ev = c.arguments[0]
        if (ev && Event == ev.constructor) {
          break
        }
        c = c.caller
      }
    }
    return ev
  },
}

跨域问题处理

• Jsonp
  最早的解决方案，利用 script、img 和 link 标签可以跨域的原理实现（src 是链接时浏览器会请求链接获取资源，即使是跨域的也会请求） -- 只能发起 get 请求

• nginx 反向代理
  利用 nginx 反向代理，将前端访问域名和后端服务器域名映射到同源的地址下
  缺点是需要在 nginx 进行额外配置

• window.postMessage

• CORS
  规范话的跨域请求解决方案，安全可靠
  在服务端进行控制是否允许跨域，可自定义规则
  支持各种请求方式

• cors（Cross-origin resource sharing）跨域资源共享
  允许浏览器向跨域服务器发送 XMLHttpRequest 请求，克服只能同源使用的限制
  需要浏览器和服务器同时支持，浏览器都支持该功能（IE10 以上）

  分为简单请求和复杂请求

  服务端配置
  SpringMVC 已经写好 CORS 的跨域过滤器：CORSFilter

  @Configuration
  public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://manage.leyou.com");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");
  
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
  
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
  }
  

异步加载 JS 的方式有哪些？

• script 标签的 async 属性

  HTML5 新增异步支持，执行完之前会阻止 onload 事件的触发，

• script 的 defer 属性

  规定是否对脚本执行进行延迟，直到页面加载为止：只支持 IE

• onload 时的异步加载

  创建 script 标签，插入到 DOM 中，加载完毕后 callback

AMD 和 DommonJS 的理解

• CommonJS 是服务端模块规范，Node 采用这种规范，它加载模块是同步的，就是说只有加载完成才会执行后面的操作。AMD 规范则是异步加载模块，允许指定回调函数
• AMD 推荐风格通过返回一个对象作为模块对象，而 CommonJs 风格通过对 module.exports 或 export 是的属性赋值来达到暴露模块对象的目的

箭头函数和普通函数的区别

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

Promise 防止某一个 promise 失败而导致整个 promise 失败

• 使用 Promise.allSettled
  Promise.allSettled 是对 Promise.all 的一种补充，缓解了 Promise.all 碰到 reject 的痛点问题

  const delay = (n) => new Promise((resolve) => setTimeout(resolve, n))
  
  const promises = [delay(100).then(() => 1), delay(200).then(() => 2)]
  
  Promise.all(promises).then((values) => console.log(values))
  

• 每个 promise 捕获异常

async/await 捕获异常

// 抽离成公共方法
const awaitWrap = (promise) => {
  return promise.then((data) => [null, data]).catch((err) => [err, null])
}
const [err, data] = await awaitWrap(fetchData())
console.log('err', err)
console.log('data', data)

const 可以不给值吗

不可以，const 一旦声明变量，就必须立即初始化，不能留到以后赋值。
必须在声明的同一语句中指定它的值（这是有道理的，因为以后不能更改）