前端面试题(JS)

415 阅读6分钟
1、Set 和WeakSet 的区别 

      1、初始化 set 可以接受一个数组或者类似数组的对象作为参数,来初始化

            eg: let set = new Set([1,2,3,4,5]) 

            WeakSet : 不能接收对象初始化。

      2、成员的不同 

            set 可以的成员可以是 string number Array null Boolean function Object 

            WeakSet 的成员只能是object 

      3、属性的不同 

            set有 size 属性 WeakSet 没有size 属性 

      4、方法的不同 

           1)set 操作方法 

             .add(value)

             .delete(value) 

             .has(value) 

             .clear() 清除所有的 

         2)具有遍历的方法 

             .keys() 返回键名 

             .vlaues() 返回键值的遍历器 

             .forEach() 遍历每个成员。

        3)weakSet 操作方法:

             .add(value) 

             .delete(value)

             .has(value) 

          没有size 属性,所以不能进行遍历操作。 

 Map 和 WeakMap 的区别 WeakMap 只接受对象作为键名(null 除外),不接受其他类型的值作为键名 WeakMap 的键名所指的对象,不计入垃圾回收机制。 语法上的区别 WeakMap 没有遍历操作,没有size属性。

2、类型转换: 

 强制类型转换:parseInt() parsetFloat() number() 

 隐式类型转换:+ * == 

3、创建数组:

let arr = [] let arr2 = new Array() let arr3 = Array.of(1,2,3,4)

 4、判断是否是数组的方法 arr instanceof Array 

 该方法是在原型链上查找, 左边对象的原型是否具有右边的构造函数的prototype属性 
原理
      function instance_of(l,R){
        let o = R.prototype
        let L = l.__proto__
        while(true){
          if(L === null){
            return false
          } else if(o === L){
            return true;
          }
          L = l.__proto__;
        }
      }

  Array.isArray(arr)
 Object.prototype.toString().call() 

5、数组的操作方法 

 pop():尾部删除,返回删除的元素 

 push():尾部添加 unshift():头部添加 

 shift():头部删除 返回删除的元素 

 6、创建十个a标签,点击时弹出对应的序号 

let i;
  for( i = 0,i<10,i++){
    a = document.createElement('a')
    a.innerHtml = i + '<br>'
    a.addEventListener('click',function(e){
        alert(i)
      })
    document.body.appendChild(a)
  }

 7、split(),join() split()将字符串切割成数组,join()将数组转换成字符串

 8、IE和标准的兼容性写法 

 var ev = ev || window.event
 var clientwidth = document.documentElement.clientWidth || document.body.clientWidth
 var target = ev.srcElement || ev.target

 9、ajax get 和post 的区别 get 请求 参数是跟在 url后面,有大小限制 post 请求 放在虚拟载体里 

10、call和apply 的区别 Object.call(this,obj1,obj2) Object.apply(this,[obj1,obj2]) 

11、事件委托是什么 利用事件冒泡和事件源对象,让自己触发的事件,让父元素代替执行! 12、阻止事件冒泡,和默认行为 

 w3c: e.stopPropagation()     阻止冒泡
      e.preventDefault        阻止默认行为
 IE:  e.cancelBubble = true   阻止冒泡
      e.returnValue = false   阻止默认行为 

 13、闭包 能够访问另一个函数作用域的变量的函数 闭包就是一个函数,该函数能够访问其它函数作用域中的变量。 

 14、创建节点,删除,替换,插入 创建 createElement('a') 

创建一个a 标签
    createElement('a') 
创建一个文本节点
    createTextNode() 
删除
    removeChild()替换
    replaceChild()
插入
    insertBefore() 

 15、jsonp 的原理 

       使用script标签的src属性不受同源策略的影响 通过将前端的方法作为参数传递到服务器,然后由服务器 注入参数后再返回,实现服务器端向客户端通信 动态的创建script标签

 实现代码
      function jsonp(req){
        var script = document.createElement('script')
        var url = req.url + '?callback='+ req.callback
        script.src = url
        document.getElementsByTagName('head')[0].appendChild(script)
      }
      function hello(res){
        console.log('hello'+res.data)
      }
      jsonp({
        url:'',
        callback:hello
      }) 

16、documnet load 和 document ready 的区别 

        document.onload 是在结构和样式,外部js以及图片加载完成才执行js 

 17、 == 和 === 的不同

         == 会自动转换类型,再判断是否相等 === 不会发生类型转换。

18、函数声明和函数表达式 

       函数声明:js解析器会率先读取函数声明,在其执行代码之前可用 函数表达式:必须等到js解析器执行到他所在的代码行,才会被解析执行。 

19、Javascript 的事件流 'DOM事件流':三个阶段 :事件捕捉,目标阶段,事件冒泡 

20、null 和 undefined 

       null 表示 无 的对象,转为数值是 0;表示尚未存在的对象 undefined 表示 无 的原始值,转为数值时为 NaN ; 当声明的变量还未被初始化时 

 21、创建 new 

 function my_new(fn){
    let obj = {
      __proto__:fn.prototype
    }
    fn.call(obj,arguments)
    return obj
  } 

22、js语言实现继承机制的核心就是(原型),js解析引擎在读取一个Object的属性的值时,会沿着(原型链)向上寻找,如果没有找到,则该属性值为(undefined);如果找到该属性的值,则返回结果。 

 23、Cookie, LocalStorage 与 SessionStorage 的区别 

 数据的生命周期: 

        cookie一般是由服务器生成,可设置失效时间。如果是在浏览器端生成Cookie,默认是关闭浏览器后失效。 localStorage:除非被清除,否则永远保存 SessionStorage:仅在当前会话下有效,关闭浏览器后被清除。

存放数据大小:

       Cookie是 4kb左右 localStorage和sessionStorage 一般为5MB 

 与服务器端通信: 

        cookie 每次都会携带在HTTP头中,如果保存过多数据会带来性能问题。 SessionStorage和 localStorage 仅在客户端中保存,不参与和服务器的通信。 SessionStorage和 localStorage 只能存储字符串,可以将对象JSON.stringify()后存储。 

24、获取数组中的最大值 

 let arr = [2,3,4,5,6,7]
  Math.max.apply(Math,arr)
  Math.min.apply(Math,arr) 

25、slice 和 Splice 

       slice(start,end) 从start开始截取到end不包括end 返回值为截取出来的元素的集合 原始的数组不会发生变化 

      splice(start,deleteCount,item1,item2) start 开始的位置 deleteCount 要截取的个数//若为0 表示不删除元素,从开始位置添加后面的几个元素到原始的数组中。 items 是要添加的元素。 

26、从输入URL到页面加载发生了什么 

       1、DNS解析

       2、TCP连接 

       3、发送HTTP请求 

       4、服务器处理请求并返回报文 

       5、浏览器解析渲染页面 

       6、连接结束 

27、 防抖和节流 

        防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算时间。

function debounce(fn){
  let timeout = null
  return function(){
    clearTimeout(timeout);
    timeout = setTimeout(()=>{
      fn.apply(this,arguments)
      },500)
  }
}

       节流:高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。 

function throttle(fn){
  let canRun = false
  return function(){
    if(canRun) return;
    canRun = true
    setTimeout(()=>{
      fn.apply(this,arguments)
      canRun = false
    },500)
  }
}

28、 实现对象的深拷贝:

 function deepCopy(target,source){ 
    for(let index in source){ 
        if(typeof source[index]==="object"){
             target[index] ={} deepCopy(target[index],source[index]) 
        }else{ target[index] = source[index] }
     } 
}