跳到主要内容

1-20

1.什么是eval

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。参考博客

  • 返回值:返回字符串中代码的返回值。如果返回值为空,则返回 undefined

  • 如果 eval() 的参数不是字符串,eval() 会将参数原封不动地返回

  • 放在 eval 中的字符串,应该有独自存在的意义或者可以当成语句运行,不能用来与 eval 以外的命令配合使用

  • 由JSON字符串转换为JSON对象的时候可以用eval

    const str='{"name":"阿伟","age":20}'
    console.log(eval('('+str+')'))
  • 应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。

2.什么是window对象? 什么是document对象?

  • window对象是指浏览器打开的窗口。
  • Document对象是Window对象的子对象,可通过window.document属性对其进行访问。一个网页就是一个文档。

3.undefined与null的区别

/undefinednull
含义未定义,表示变量声明了没有赋值空对象
typeof"undefined""object"
特点/是一个有效的json,Javascript从来不会将变量设为null。它是用来让程序员表明某个变量是没有值的。

4.['1', '2','3'].map(parseInt)答案是多少?

[1,NaN,NaN]

5.事件是?IE与火狐的事件机制有什么区别?如何阻止冒泡?

  • 事件就是用户和页面之间发生的交互行为 比如:点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键...
  • 事件处理机制:IE8以下是只有事件冒泡、Firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件
  • 捕获型事件,从父元素接收,传递到目标元素
  • 冒泡型事件,从目标元素接收,传递到父元素
  • event.stopPropagation() 停止事件的传导

6.js代码中的"use strict"是什么意思 ? 使用它区别是什么?

  • 严格模式,用来消除js语法的不严谨的地方。
  • 变化:
    • 不能使用未声明的变量 自动转换->报错
    • 不能删除变量或者函数 无效->报错
    • 不允许重名参数,能运行->报错
  • 参考博客

7.js中有一个函数,执行时查找对象时永远不会去查找原型,这个函数是?

  • javaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性。
  • 此方法无法检查该对象的原型链中是否具有该属性,所以该属性必须是对象本身的一个成员。
  • 使用方法:
    • object.hasOwnProperty(proName)
    • object,一个对象的实例。
    • proName,属性名
    • 如果 object 具有指定名称的属性,那么JavaScript中hasOwnProperty函数方法返回 true,反之则返回 false。

8.JSON的了解?

为了方便我们数据的存储和交换,定义的一种统一的存储数据的格式

let obj =eval('('+ str +')');

let obj = JSON.parse(str);

let last=JSON.stringify(obj);

9.js延迟加载的方式

  • 异步加载(又称为非阻塞加载):等待页面加载完成之后再加载 JavaScript 文件。在浏览器下载执行js的同时,还会继续后续页面的处理

  • 优点:js的延迟加载有助与提高页面的加载速度

  • 单文件

    • 事件

      • window.onload
      • document.DOMContentLoaded
    • script标签写到body后面

  • defer & aysnc -外部导入js文件

    • defer:在<script>元素中设置 defer 属性,等于告诉浏览器立即下载脚本,但延迟执行
    • aysnc:不让页面等待脚本下载和执行,从而异步加载页面其他内容
    • defer与async相同点:都是采用的并行下载,下载过程中不会有阻塞
    • defer与async不同点:两者的执行时机不同。async加载完成后就会自动执行代码,但是defer需要等待页面加载完成后才会执行。
    <script defer src="./a.js"></script>
    <script defer src="./b.js"></script>
    <script defer src="./c.js"></script>

    • 使用defer,加载脚本时时a->b->c,那执行肯定是按顺序执行
    • 使用aysnc,谁先加载完先执行,所以如果多个外部文件之间有依赖,那就不能使用aysnc

10.如何判断当前脚本运行在浏览器还是node环境中?

浏览器this===window,node中this===global

11.typeof返回哪些数据类型

  • 原始值:
    • Number:number
    • String:string
    • Boolean:boolean
    • undefined:undefined
    • null:object
  • 对象:
    • Function:function
    • Array:object
    • Object:object

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

->String:xxx.toString(),String()

->Number:parseInt(),parseFloat(),Number()

->Boolean:Boolean()

隐式类型转换:!!,xx+"",+-

13.split() 、join() 的区别

  • split()是String的一个方法,用于分割字符串,返回一个字符串数组
    • 参数:传入一个字符串,根据这个字符串分割数据
  • join()是Array的一个方法,用于合并数组中的内容,返回一个字符串
    • 参数:传入一个字符串,作为连接符

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

  • pop()删除数组最后一个元素并返回
  • push()向数组末尾添加一个或多个元素,返回数组长度
  • unshift()向数组头部添加一个或多个元素,返回数组长度
  • shift()删除数组第一个元素并返回

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

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

  • addEventListener不兼容低版本IE

  • 普通事件无法取消,事件绑定可以解绑 removeEventListener(type,listener,useCapture)

  • addEventLisntener还支持事件冒泡+事件捕获

    target.addEventListener(type, listener, useCapture);
    type: 表示监听事件类型的字符串。类似于click,mouseover...
    listener: 用来监听处理的函数方法
    useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获

    参考博客

16.IE和DOM事件流的区别

  • 什么是"事件流"? 事件流描述的是从页面中接收事件的顺序
  • 事件流的种类:
    • 事件冒泡流(IE事件流):事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)
    • 事件捕获流(Netscape事件流):不太具体的节点最先接收到事件,而最具体的节点应该最后接收到事件(在事件到达预定目标之前捕获到)
    • DOM事件流:事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会;然后是实际的目标接收事件;最后是冒泡阶段,可以在这个阶段对事件做出响应。

区别:

  • IE和DOM事件侦听函数的区别:

    //IE使用: 
    [Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
    [Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定
    //DOM使用: 
    [Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
    [Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定
  • 事件参数不一样和this指向不一样

  • 如上的两个不一样的事件侦听函数:

    • attachEvent接受两个参数
    • 注意:IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素,这时的this为window对象了
    • addEventListener方法接受三个参数
    • 注意:它可以在一个DOM元素上绑定多个事件处理器,并且在处理函数内部,this关键字仍然指向被绑定的DOM元素,另外处理函数参数列表的第一个位置传递事件event对象

17.如何阻止事件冒泡和事件默认行为

  • event.stopPropagation() 停止事件的传导
  • event.preventDefault() 取消默认行为,代替return false那种法子。

18.window.onload 和document DOMContentLoaded的区别

  • 将代码编写到window.onload的回调函数中 (所有文档加载出来才执行,例如内联框架)
  • 将代码编写到document对象的DOMContentLoaded的回调函数中(执行时机更早,当前文档加载出来就执行)

19.==和===的不同

前者会做类型转换,后者不会

20.JavaScript是一门什么样的语言,它有哪些特点?

  • 运行在客户端浏览器上的脚本语言、解释性语言

  • 不用预编译,直接解析执行代码

  • 是弱类型语言,较为灵活,基于原型的语言,内置支持类型

  • 与操作系统无关,跨平台的语言 解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准,因此也称为ECMAScript。

    • ECMA — 262脚本语言的规范:规范化脚本语言,叫ECMAScript
    • 像ES5 ES6就是这样来的,但是ES5 、ES6不能单单的看成是一门语言,或者说ES*是一种规范一种标准。

  • Javascript的特点:

  • 简单性: JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。它的变量类型是采用弱类型,并未使用严格的数据类型。

  • 动态性: JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

  • 跨平台性: JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

  • 安全性: JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

    var num=10;//num是一个数字类型
    num="jim";//此时num又变成一个字符串类型
    //我们把一个变量用来保存不同数据类型的语言称之为一个动态语言,或者说是一个弱类型语言
    //静态语言:c# java c c++
    //静态语言在声明一个变量就已经确定了这个变量的数据类型,
    int c;//c就是整数类型
    //我们把这种声明一个变量就确定了它的数据类型这样的语言称之为静态语言,也称之为强类型语言
    //而且在任何时候都不可以改变静态语言的数据类型