首页> 前端面试 > 正文

前端面试题—JavaScript部分

  • 来源:互联网
  • 2018-06-04 18:44:56
  • 人已阅读

1. Document.write 和innerTHML区别

document.write()是在页面中出入内容;如果不指定元素的话;它会覆盖掉整个页面内容
innerHTML只是修稿Dom元素的内容包含该元素下子元素结构

注:innerHTML很多情况下都优于document.write(),其原因在于其允许更精确的控制要刷新新页面的那一个部分。
 

2. 对JSON的理解:

json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构
 
对象:对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。
2、数组:数组在js中是中括号“[]”括起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
 
格式

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。
·         数据在名称/值对中
·         数据由逗号分隔
·         花括号保存对象
·         方括号保存数组
 
例子:
{"firstName":"Brett"}
{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}
 

3. Null和undefined区别:

Undefined(没有定义,不知道是什么东西 ) 表示变量声明但未初始化时的值,
      
 null(一个盒子,是空的,里面没有放值。 )表示准备用来保存对象,还没有真正保存对象的值。从逻辑角度看,null值表示一个空对象指针。

4. javascript的typeof返回哪些数据类型

Object   number   function   boolean    undefine
 

5. 例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,number)
隐式(== - ===)
 

6. split() join() 的区别

前者是切割成数组的形式,后者是将数组转换成字符串
 

7. 数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加  shift()头部删除

8. 事件绑定和普通事件有什么区别

普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。
举例:

 

9. IE和DOM事件流的区别

1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
 

10.   IE和标准下有哪些兼容性的写法

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

11.   ajax请求的时候get 和post方式的区别

一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的,一个是类似修改密码的
 

12.   call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
 

13.   ajax请求时,如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱
 
 

14.   事件委托是什么

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
 
 

15.   如何阻止事件冒泡和默认事件

canceBubble   return false
 

16.   DOM操作 - 怎样添加、移除、移动、复制、创建和查找节点(这个问题真心是基础题,一般不会问)。

答:添加:append,prepend,after,before等等。
删除:remove,empty。
替换:replaceWith,replaceAll。
复制:clone。
创建:creatElement,createTextNode。
查找:getElmentById,getElmentsByTagName(通过标签name值),getElmentByName(通过元素name值)。
 
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
 

17.   解释jsonp的原理,以及为什么不是真正的ajax

动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作
 

18.   javascript的本地对象,内置对象和宿主对象

本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
 

19.   document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法,jquery中有 $().ready(function)
 

20.   ”==”和“===”的不同

”==”与”===”是不同的,一个是判断值是否相等,一个是判断值及类型是否完全相等。
前者会自动转换类型(如果一个值是数字,另一个值是字符串,把字符串转换为数字,再用转换后的值进行比较。)
后者不会
 

21.   javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合
 
 

22.   简述JavaScript封装。

 
  其它相关的加分项:
都使用和了解过哪些编辑器?都使用和了解过哪些日常工具?
都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?
国内外的JS牛人都知道哪些?

23.   瀑布流布局或者流式布局是否有了解

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格,像花瓣网、蘑菇街、美丽说等。
 
瀑布流布局:采用绝对定位来给每张图片或者模块定位。
流式布局:采用浮动式给模块定位。可以做出响应式布局。
 

24.   JavaScript继承有哪两种形式形式,进行描述。

构造函数借用:在子类构造方法内,通过apply/call将this作为参数传入。
优点:
  可以向父类构造方法传递参数,即给apply第二个参数:arguments;
  父类中的属性都被复制到子类实例中,属性之间无干扰,无论是引用类型还是封装类型。
缺点:
  每一个实例对象都拥有一份父类方法的拷贝,互不干扰,所以无法统一修改;
  无法拥有父类原型中定义的方法;
  子类的实例对象不能通过 instanceof 操作符判断是否是父类的实例。
原型链:指定子类的prototype为父类的一个实例对象。
优缺点和构造函数借用刚好相反。这里特别说明下属性之间相互干扰(对应构造函数借用的优点2)。
组合式继承:上面两种方式互补一下,即用构造方法借用来继承父类属性,用原型链来继承父类方法。
优点:
  封装保护了内部数据的完整性;
  封装使对象的重构更轻松;
  弱化模块间的耦合,提高对象的可重用性;
  有助于避免命名空间冲突。
缺点:
  私用方法很难测试;
  必须与复杂的作用域链打交道,使错误调度更困难;
  容易形成过度封装;
  JavaScript并不原生支持封装,所以在JavaScript中实现封装存在复杂性的问题。

 

25.   在JS中this关键字的使用场合和用法(如在构造函数中、setTimeout中等)。

 

jQuery相关                       

1.jQuery源码是否尝试去读过?说说基本的架构或者 jQuery.fn.init 中都做了哪些判断。

jQuery.fn.init 中都做了哪些判断:http://www.jb51.net/article/50813.htm

2.都知道哪些不好的jQuery书写方式。

答:定义变量时,全局变量不添加var,因为这个是删除不掉的。还有就是像写流水账一样的编程方式,将很多东西都蹂躏在一起,没有将不同的对象和功能给区分开。定义一个对象最好是以函数表达式的方式定义,尽量不要定义对象字面量,这样里面的私有属性或者方法容易被用户修改,也就是不安全。
 

文章评论

 Top