JS面试题2

  1. return,break,continue

    • break用于完全结束一个循环,跳出循环体。不管是哪种循环,一旦在循环体中遇到break,系统将完全结束循环,开始执行循环之后的代码。 break不仅可以结束其所在的循环,还可结束其外层循环。
    • continue的功能和break有点类似,区别是continue只是中止本次循环,接着开始下一次循环。而break则是完全中止循环。
    • return关键字并不是专门用于跳出循环的,return的功能是结束一个方法。 一旦在循环体内执行到一个return语句,return语句将会结束该方法,循环自然也随之结束。与continue和break不同的是,return直接结束整个方法,不管这个return处于多少层循环之内。
  2. addEventListener attachEvent οnclick=fn 比较

    • attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on",可以添加多个事件处理程序,按照添加顺序相反的顺序触发;

    • addEventListener是给非ie添加事件处理程序,接收三个参数,第一个是事件名,不需要加“on”,

      第二个是绑定的函数,第三个参数是一个布尔值,是事件的方式,意思是是否使用useCatch方式,

      如果是false,就使用传统的冒泡方式,如果为true,就在捕获阶段调用事件处理程序。addEventListener可以添加多个事件处理程序,按照添加顺序触发

    • attachEvent的事件处理程序会在全局作用域中运行,this等于window对象,

      而addEventLinstener添加的事件处理程序是在其依附的元素的作用域中运行的,this等于绑定元素对象。

    • addEventListener可以为一个元素绑定多个事件,即它允许给一个事件注册多个监听器,而onclik只能给元素注册一个,如果存在多个,则后面的事件会覆盖前面的

    • 取消事件:el.onclick:el.οnclick=null;这样就可以取消绑定在el上的事件处理程序了。

      通过addEventListener()添加的事件处理程序只能通过**removeEventListener()**来移除,并且移除时传入的参数与添加

      处理程序时使用的参数相同。通过addEventListener()添加的匿名函数将无法移除。

      通过attachEvent()添加的事件处理程序要通过**detachEvent()**来移除,其他的情况和addEventListener()一样。

  3. 判断JS数据类型的几种方法

    • typeof

      • typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。
      • 对于基本类型,除 null 以外,均可以返回正确的结果。
      • 对于引用类型,除 function 以外,一律返回 object 类型。
      • 对于 null ,返回 object 类型。
      • 对于 function 返回 function 类型。
    • instanceof

      • instanceof 是用来判断 A 是否为 B 的实例,表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。 在这里需要特别注意的是:instanceof 检测的是原型
    • Array.isArray():判断是不是数组

    • constructor

      • 当一个函数 F被定义时,JS引擎会为F添加 prototype 原型,然后再在 prototype上添加一个 constructor 属性,并让其指向 F 的引用。
      • null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。
      • 函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object
    • tostring

      • toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。
  4. 深拷贝和浅拷贝的区别

    • 深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。
    • 假设B复制了A,修改A的时候,看B是否发生变化:
      • 如果B跟着也变了,说明是浅拷贝
      • 如果B没有改变,说明是深拷贝
    • 浅拷贝(shallowCopy)只是增加了一个指针指向已存在的内存地址
    • 深拷贝(deepCopy)是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存
    • 使用深拷贝的情况下,释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。
    • 浅复制:仅仅是指向被复制的内存地址,如果原地址发生改变,那么浅复制出来的对象也会相应的改变。
    • 深复制:在计算机中开辟一块新的内存地址用于存放复制的对象。
  5. ajax的兼容写法

    • req = new XMLHttpRequest();
    • req = new ActiveXObject(“Microsoft.XMLHTTP”);
  6. jsonp的工作原理以及它为什么不是真正的ajax

    • JSONP 是一种非正式传输协议,允许用户传递一个callback给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。当GET请求从后台页面返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用后台页面中的一个callback函数。

    • 实质不同

      ajax的核心是通过xmlHttpRequest获取非本页内容
      jsonp的核心是动态添加script标签调用服务器提供的js脚本
      jsonp只支持get请求,ajax支持get和post请求

  7. 判断数组的方法

    • 构造函数
    • instance of
    • type of
    • array is Array
  8. BFC

    • 首先BFC是—个名词,是—个独立的布局环境,我们可以理解为—个箱子(实际上是看不见 摸不着的),箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是:BFC中的 元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元 素和其子元素带来的影响。)并且在—个BFC中,块盒与行盒(行盒由—行中所有的内联元 素所组成)都会垂直的沿着其父元素的边框排列。
  9. 谈谈对html5的了解

    • 1.良好的移动性,以移动设备为主。
      2.响应式设计,以适应自动变化的屏幕尺寸
      3.支持离线缓存技术,webStorage本地缓存
      4.新增canvas,video,audio等新标签元素。新增特殊内容元素:article,footer,header,nav,section等,新增表单控件:calendar,date,time,email,url,search。
      5.地理定位…
      6.新增webSocket/webWork技术
  10. 如何对网站的文件和资源进行优化

    • 1.文件合并(目的是减少http请求)
      2.文件压缩 (目的是直接减少文件下载的体积)
      3.使用cdn托管资源
      4.使用缓存
      5.gizp压缩需要的js和css文件
      6.meta标签优化(title,description,keywords),heading标签的优化,alt优化
      7.反向链接,网站外链接优化
  11. 关系型数据库和非关系型数据库的优缺点

    • 关系型数据库:
      优点: 容易理解
      使用方便,都使用sql语句,sql语句非常的成熟
      数据一致性高,冗余低,数据完整性好,便于操作
      技术成熟,功能强大,支持很多复杂操作
      缺点: *每次操作都要进行sql语句的解析,消耗较大
      *不能很好的满足并发需求,特别是海量数据爆发,关系型
      数据库读写能力会显得不足
      *关系型数据库往往每一步都要进行加锁的操作,也造成了
      数据库的负担
      *数据一致性高,有时也会使数据的存储不灵活
      非关系型数据库:
      优点: 高并发,读写能力强
      弱化数据结构一致性,使用更加灵活
      有良好的可扩展性
      缺点: 通用性差,没有sql语句那样通用的语句
      操作灵活导致容易出错和混乱
      没有外键关联等复杂的操作
  12. 正则表达式的方法

    • test()
    • exec()
  13. 什么是网络OSI模型

    • 物理层
    • 数据链路层
    • 网络层
    • 传输层
    • 会话层
    • 表示层
    • 应用层
  14. 什么是代理,基本实现方式

    • 代理:“—对—”,对同—个协议,—个对象只能设置—个代理delegate
      六个步骤:
      1.声明—个协议,定义代理方法
      2.遵循协议
      3.设置—个代理对象
      4.调用代理方法
      5.给代理赋值
      6.实现代理方法
  15. 谈谈你对mvc和mvvm的理解

    • mvc:
      View 传送指令到 Controller
      Controller 完成业务逻辑后,要求 Model 改变状态
      Model 将新的数据发送到 View,用户得到反馈
      所有通信都是单向的。
  16. px和em的区别

    • px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

    • em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

    • 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

  17. 三种垂直居中的方法

    • 多个块级元素垂直居中,利用绝对定位以及transform,适用于不知道元素的宽度和高度。

      .parent{ position:relative; }
      .child{
          position:relative;
          top: 50%;
          transform: translateY(-50%);    /*CSS3的新属性*/
      }
      
    • 使用diplay:table-cell,其实这个就是把其变成表格样式,再利用表格的样式来进行居中,适用于未知元素高度的情况,也很方便。

      .parent{
          display: table-cell;
          vertical-align: middle;
      }
      
    • 使用flex布局,现在主流浏览器已经都支持flex布局了,只不过需要给所要垂直居中的元素添加一个父div,给父div使用样式即可,挺方便的,这个兼容性也最好。

      .parent{
          display: flex;
          align-items: center;    /*指定垂直居中*/
      }
      
  18. Web攻击技术

    • XSS
    • SQL注入
    • CSRF
    • DDOS
  19. 什么是UA?

    • UA 是“UserAgent”(用户代理)的简写,一般用来区分不同的浏览器。UA 形如:Mozilla/3.0 (Win95; U)。
  20. 如何中断ajax请求?

    • 一种是设置超时时间让ajax自动断开
    • 另一种是手动停止ajax请求,其核心是调用XML对象的abort方法,ajax.abort()
  21. web上传漏洞原理?如何进行?防御手段?

    • 如何进行:用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力。
    • 主要原理:当文件上传时没有对文件的格式和上传用户做验证,导致任意用户可以上传任意文件,那么这就是一个上传漏洞。
    • 防御手段:
        1. 最有效的,将文件上传目录直接设置为不可执行,对于Linux而言,撤销其目录的’x’权限;实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理,一是方便使用缓存加速降低能耗,二是杜绝了脚本执行的可能性;
        2. 文件类型检查:强烈推荐白名单方式,结合MIME Type、后缀检查等方式;此外对于图片的处理可以使用压缩函数或resize函数,处理图片的同时破坏其包含的HTML代码;
        3. 使用随机数改写文件名和文件路径,使得用户不能轻易访问自己上传的文件;
        4. 单独设置文件服务器的域名;
  22. websocket和轮询及长轮询区别

    • 轮询如下:客户端:啦啦啦,有没有新信息(Request)服务端:没有(Response)客户端:啦啦啦,有没有新信息(Request)服务端:没有。。(Response)客户端:啦啦啦,有没有新信息(Request)服务端:你好烦啊,没有啊。。(Response)客户端:啦啦啦,有没有新消息(Request)服务端:好啦好啦,有啦给你。(Response)客户端:啦啦啦,有没有新消息(Request)服务端:。。。。。没。。。。没。。。没有(Response)
    • 长轮询如下:客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request)服务端:额。。 等待到有消息的时候。。来 给你(Response)客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request)
    • websocket如下:websocket解决了HTTP的这几个难题。 首先,被动性,当服务器完成协议升级后(HTTP->Websocket),服务端就可以主动推送信息给客户端啦。
  23. Math.min()比Math.max()哪个大(或者输出什么)

    • infinity
  24. Math.floor(),Math.sqrt()(输出什么)

    • (NaN)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值