《web前端陪你读书》 面试押题整理

851 阅读5分钟

音频链接:www.ximalaya.com/30018073/so…

沙翼老师一直是我比较关注和欣赏的业内大佬,他的节目深入浅出,对初学者大有裨益,对有一定基础的前端从业者建立知识体系也有一定的帮助。本文整理比较仓促,肯定也会存在许多错误,只作本人复习之用,不喜勿喷。

1,js数据类型

简单类型:布尔 字符串 数字 undifined null

复杂类型:object

2,如何判断数据类型

简单类型:用typeof判断,typeof是一元运算符,可以不跟括号

但是 null和object返回的都是object

3,如何对对象类型进行判断,尤其是数组

两种办法:constructor和isArray

正确办法:Object.protoType.tostring.call( arr )

4,数组的方法

push pop shift unshift reverse concat slice splice index filter...

对原数组有影响的:push pop shift unshift reverse sort splice

5,数组如何去重

1-空数组,循环push,indexof()判断

2-splice,从原数组上进行操作

3-根据对象属性不能重复的特性

4-对原数组进行排序,然后循环,相邻的如果重复即删除

5-最短的去重办法:[…new Set( arr )]

var arr = [1,2,2,3,4] // 需要去重的数组

var set = new Set(arr) // {1,2,3,4}
var newArr = Array.from(set) // 再把set转变成array

console.log(newArr) // [1,2,3,4]

6,伪数组

1-dom选择器选择出的节点列表

2-arguments对象

3-jq选择器选择出的jq对象

转换方式:新建数组,将伪数组依次push进去

7,字符串

charAt concat...

8,数字

如何判断是否 nan,最常见的方式 isNan

但是isNan是用来判断传进来的参数能否转化为数字的,因此首先要判断是否为数字

更好的判断方式:用===和自身进行判断,js中只有nan和自身是不全等的

9,布尔

有哪些转换成

undefine 0 -0 null false "" NAN

空对象和空数组转换成对象都是true,newBealean(false)为true

!!将数据快速转化成布尔类型

10,new做了什么

1-创建空对象

2,修改this指针,将this指针指向创建的对象

3,运行构造函数中所有的代码

4,将创建的对象作为返回值返回

11,new如果没有参数,可以不写括号;如果在构造函数中显式的返回了非对象,返回的依然是对象,如果显式地返回了其它对象,则返回其它对象(单例模式了解一下)

12,继承方式

1-原型链继承 对象a,对象b

将b继承于a,b.prototype=new a()

只能继承原型对象上的属性,这些属性都是共享的,无法实现多继承

2-构造函数式继承

在b中将a的函数全部运行一遍

可以实现多继承,但是只能继承构造函数里的属性

3-组合式继承,也就是将原型链继承和构造函数式继承都写一遍

开发中最常见的,代码执行两遍,速度较慢

4-原型式继承,

5-寄生式继承

6-组合寄生式继承(完美继承)

13,<script></script>标签

两个特殊的属性:defer async

defer延迟执行,同时并行加载多个js,然后按上下顺序依次执行

async异步加载,下载后立即执行,不一定按上下顺序

1-js中,js代码会堵塞html css代码渲染

2,-正常js下载,都是同步依次下载,但是只要写了defer或者async都会改为异步下载的方式,aynsc在外部js加载完成之后如果浏览器空闲,并发load事件触发之前执行

defer在js加载完成之后,文档解析完成之后才会执行,也就是说,只要写了defer,即使你把script标签放在head里,也类似于放在body最下面

14,promise中then和catch的返回值永远是一个新的promise实例,如果显式地返回一个非promise对象,后面的then和catch都会立即执行

15,es6新增

数组方法,from

箭头函数的变化:没有arguments对象,this指向也发生了变化

16,js中的事件实现

1-dom嵌入,标签里写onclick

2-事件绑定,获得节点onclick,从html里转移到js里,方便管理

3-事件监听

浏览器兼容性处理:ie是attachEvent和dettachEvent

17,js事件流

捕获-目标-冒泡

18,target和currentTarget的区别

target是指目标节点

currentTarget当前对象的目标节点

<ul>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
  </ul>
  <script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    $('ul').on('click','li',function(e){
 
        console.log(e.target)   //  被点击的元素
        console.log(e.currentTarget)   //  li   
        console.log(e.currentTarget === this)  // true
    })
  </script>

<ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
    <li>hello 4</li>
  </ul>
  <script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    for(let i=0;i<aLi.length;i++){  
      aLi[i].addEventListener('click',function(e){
        let oLi1 = e.target  
        let oLi2 = e.currentTarget
        console.log(oLi1)  // li
        console.log(oLi2)  // li
        console.og(oLi1===oLi2)  // true
      })
    }
  </script>

19,http的状态码

1-信息响应

2-成功了

3-服务器重定向响应,主要是为了满足特定的

4-客户端错误

5-服务端错误

20,敲下url后发生了什么

浏览器查ip地址(dns解析,路由缓存,浏览器缓存)-浏览器发出http请求-服务器重定向响应-浏览器跟踪重定向响应,取得地址-服务器接受请求,返回http响应,包括html等代码-浏览器按照自己的方式进行渲染

21,跨域

jsonp(json padding)是通过创建script标签实现的

postMessage,最好转成json字符串发过去