javascript题库

1. document load 和 document ready 的区别

答案：
页面加载完成有两种事件

1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的js中不包括ready()这个方法，只有load方法也就是onload事件

2. JavaScript 中如何检测一个变量是一个 String 类型？

答案：三种方法（typeof、constructor、Object. prototype. toString. call()）

3.请用 js 去除字符串空格？

答案：replace 正则匹配方法、str. trim()方法、JQ 方法：$. trim(str)方法
replace 正则匹配方法

去除字符串内所有的空格：str = str. replace(/\s*/g, “”);

去除字符串内两头的空格：str = str. replace(/^\s*|\s*$/g, “”);

去除字符串内左侧的空格：str = str. replace(/^\s*/, “”);

去除字符串内右侧的空格：str = str. replace(/(\s*$)/g, “”);

4. js 是一门怎样的语言，它有什么特点

答案：

1. 脚本语言。JavaScript 是一种解释型的脚本语言, C、C++等语言先编译后执行, 而 JavaScript 是在程序的运行过程中逐行进行解释。

2. 基于对象。JavaScript 是一种基于对象的脚本语言, 它不仅可以创建对象, 也能使用现有的对象。

3. 简单。JavaScript 语言中采用的是弱类型的变量类型, 对使用的数据类型未做出严格的要求, 是基于 Java 基本语句和控制的脚本语言, 其设计简单紧凑。

4. 动态性。JavaScript 是一种采用事件驱动的脚本语言, 它不需要经过 Web 服务器就可以对用户的输入做出响应。

5. 跨平台性。JavaScript 脚本语言不依赖于操作系统, 仅需要浏览器的支持。

5. == 和 === 的不同

答案： == 是抽象相等运算符，而 === 是严格相等运算符。 == 运算符是在进行必要的类型转换后，再比较。 === 运算符不会进行类型转换，所以如果两个值不是相同的类型，会直接返回 false 。

6. 怎样添加、移除、移动、复制、创建和查找节点？

答案：

1）创建新节点

createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入

appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的 Name 属性的值
getElementById() //通过元素 Id，唯一性

7. 事件委托是什么

答案：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

8.require 与 import 的区别

答案：两者的加载方式不同、规范不同

第一、两者的加载方式不同，require 是在运行时加载，而 import 是在编译时加载

require(’. /a’)(); // a 模块是一个函数，立即执行 a 模块函数

var data = require(’. /a’). data; // a 模块导出的是一个对象

var a = require(’. /a’)[0]; // a 模块导出的是一个数组 ======> 哪都行

import $ from ‘jquery’;

import * as _ from ‘_’;

import {a, b, c} from ‘. /a’;

import {default as alias, a as a_a, b, c} from ‘. /a’; ======>用在开头

第二、规范不同，require 是 CommonJS/AMD 规范，import 是 ESMAScript6+规范

第三、require 特点：社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。

import 特点：语言规格层面支持模块功能。支持编译时静态分析，便于 JS 引入宏和类型检验。动态绑定。

9.JavaScript 继承的方式和优缺点

答案：六种方式

一、原型链继承

缺点：
引用类型的属性被所有实例共享
在创建 Child 的实例时，不能向 Parent 传参
二、借用构造函数(经典继承)

优点：

避免了引用类型的属性被所有实例共享
可以在 Child 中向 Parent 传参
缺点：

方法都在构造函数中定义，每次创建实例都会创建一遍方法。
三、组合继承

优点：
融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。
四、原型式继承

缺点：
包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。
五、寄生式继承

缺点：
跟借用构造函数模式一样，每次创建对象都会创建一遍方法。
六、寄生组合式继承

优点：
这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent. prototype 上面创建不必要的、多余的属性。
与此同时，原型链还能保持不变；
因此，还能够正常使用 instanceof 和 isPrototypeOf。
开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式

10.什么是原型链？

答案：通过一个对象的__proto__可以找到它的原型对象，原型对象也是一个对象，就可以通过原型对象的__proto__，最后找到了我们的 Object. prototype, 从实例的原型对象开始一直到 Object. prototype 就是我们的原型链

11.复杂数据类型如何转变为字符串

答案：

首先，会调用 valueOf 方法，如果方法的返回值是一个基本数据类型，就返回这个值，
如果调用 valueOf 方法之后的返回值仍旧是一个复杂数据类型，就会调用该对象的 toString 方法，
如果 toString 方法调用之后的返回值是一个基本数据类型，就返回这个值，
如果 toString 方法调用之后的返回值是一个复杂数据类型，就报一个错误。

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

答案：7 种分别为 string、boolean、number、Object、Function、undefined、symbol(ES6)、

13.一次js请求一般情况下有哪些地方会有缓存处理？

答案：DNS缓存，CDN缓存，浏览器缓存，服务器缓存。
解析：

1、DNS缓存
DNS缓存指DNS返回了正确的IP之后，系统就会将这个结果临时储存起来。并且它会为缓存设定一个失效时间 (例如N小时)，在这N小时之内，当你再次访问这个网站时，系统就会直接从你电脑本地的DNS缓存中把结果交还给你，而不必再去询问DNS服务器，变相“加速”了网址的解析。当然，在超过N小时之后，系统会自动再次去询问DNS服务器获得新的结果。 所以，当你修改了 DNS 服务器，并且不希望电脑继续使用之前的DNS缓存时，就需要手动去清除本地的缓存了。

本地DNS迟迟不生效或者本地dns异常等问题，都会导致访问某些网站出现无法访问的情况，这个时候我们就需要手动清除本地dns缓存，而不是等待！

2、CDN缓存
和Http类似，客户端请求数据时，先从本地缓存查找，如果被请求数据没有过期，拿过来用，如果过期，就向CDN边缘节点发起请求。CDN便会检测被请求的数据是否过期，如果没有过期，就返回数据给客户端，如果过期，CDN再向源站发送请求获取新数据。和买家买货，卖家没货，卖家再进货一个道理^^。

CDN边缘节点缓存机制，一般都遵守http标准协议，通过http响应头中的Cache-Control和max-age的字段来设置CDN边缘节点的数据缓存时间。

3、浏览器缓存
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

浏览器缓存主要有两类：缓存协商：Last-modified ，Etag 和彻底缓存：cache-control，Expires。浏览器都有对应清除缓存的方法。

4、服务器缓存
服务器缓存有助于优化性能和节省宽带，它将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

14. 列举 3 种强制类型转换和 2 种隐式类型转换

答案：

强制: parseInt(), parseFloat(), Number(), Boolean(), String()

隐式: +, -

15.你对闭包的理解？优缺点？

答案：

概念：闭包就是能够读取其他函数内部变量的函数。

三大特性：

函数嵌套函数。
函数内部可以引用外部的参数和变量。
参数和变量不会被垃圾回收机制回收。
优点：

希望一个变量长期存储在内存中。
避免全局变量的污染。
私有成员的存在。
缺点：

常驻内存，增加内存使用量。
使用不当会很容易造成内存泄露。

16.如何判断 NaN

答案：isNaN()方法

解析：isNaN(NaN) // true

17. for in 和 for of的区别

答案：

1、for in

一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性，语句都会被执行。
不建议使用 for in 遍历数组，因为输出的顺序是不固定的。
如果迭代的对象的变量值是 null 或者 undefined, for in 不执行循环体，建议在使用 for in 循环之前，先检查该对象的值是不是 null 或者 undefined。
2、for of

for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

18.如何判断 JS 变量的一个类型（至少三种方式）

答案：typeof、instanceof、 constructor、 prototype

解析：

1、typeof

typeof 返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、object、undefined、function等6种数据类型。如果是判断一个基本的类型用typeof就是可以的。
2、instanceof

instanceof 是用来判断 A 是否为 B 的实例对，表达式为：A instanceof B，如果A是B的实例，则返回true, 否则返回false。 在这里需要特别注意的是：instanceof检测的是原型，
3、constractor

每一个对象实例都可以通过 constrcutor 对象来访问它的构造函数 。JS 中内置了一些构造函数：Object、Array、Function、Date、RegExp、String等。我们可以通过数据的 constrcutor 是否与其构造函数相等来判断数据的类型。
4、Object. prototype. toString

toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类型，更严格的讲，是 toString运行时this指向的对象类型, 返回的类型格式为[object, xxx], xxx是具体的数据类型，其中包括：String, Number, Boolean, Undefined, Null, Function, Date, Array, RegExp, Error, HTMLDocument, … 基本上所有对象的类型都可以通过这个方法获取到。

19.for in、Object. keys 和 Object. getOwnPropertyNames 对属性遍历有什么区别？

答案：

for in 会遍历自身及原型链上的可枚举属性
Object. keys 会将对象自身的可枚举属性的 key 输出
Object. getOwnPropertyNames会将自身所有的属性的 key 输出

20.H5 与 Native 如何交互

答案：jsBridge

21.如何判断一个对象是否为数组

答案：

第一种方法：使用 instanceof 操作符。

第二种方法：使用 ECMAScript 5 新增的 Array. isArray()方法。

第三种方法：使用使用 Object. prototype 上的原生 toString()方法判断。

22.

答案：

1、defer 和 async 的网络加载过程是一致的，都是异步执行。
2、区别在于加载完成之后什么时候执行，可以看出 defer 是文档所有元素解析完成之后才执行的。
3、如果存在多个 defer 脚本，那么它们是按照顺序执行脚本的，而 async，无论声明顺序如何，只要加载完成就立刻执行
解析：

无论

嵌入代码的解析=执行 外部文件的解析=下载+执行

script 标签存在两个属性，defer 和 async，这两个属性只对外部文件有效

23.Object. prototype. toString. call() 和 instanceOf 和 Array. isArray() 区别好坏

答案：

Object. prototype. toString. call()
优点：这种方法对于所有基本的数据类型都能进行判断，即使是 null 和 undefined 。
缺点：不能精准判断自定义对象，对于自定义对象只会返回[object Object]
instanceOf
优点：instanceof 可以弥补 Object. prototype. toString. call()不能判断自定义实例化对象的缺点。
缺点： instanceof 只能用来判断对象类型，原始类型不可以。并且所有对象类型 instanceof Object 都是 true，且不同于其他两种方法的是它不能检测出 iframes。
Array. isArray()
优点：当检测 Array 实例时，Array. isArray 优于 instanceof ，因为 Array. isArray 可以检测出 iframes
缺点：只能判别数组

24. 什么是面向对象？

答案：面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

解析：

面向对象和面向过程的异同
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。
面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

25.你对松散类型的理解

答案：

JavaScript 中的变量为松散类型，所谓松散类型就是指当一个变量被申明出来就可以保存任意类型的值，就是不像 SQL 一样申明某个键值为 int 就只能保存整型数值，申明 varchar 只能保存字符串。一个变量所保存值的类型也可以改变，这在 JavaScript 中是完全有效的，只是不推荐。相比较于将变量理解为“盒子“，《JavaScript 编程精解》中提到应该将变量理解为“触手”，它不保存值，而是抓取值。这一点在当变量保存引用类型值时更加明显。

JavaScript 中变量可能包含两种不同的数据类型的值：基本类型和引用类型。基本类型是指简单的数据段，而引用类型指那些可能包含多个值的对象。

26. JS 严格模式和正常模式

答案：严格模式使用"use strict";

作用：

消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的 Javascript 做好铺垫。
表现：

严格模式下, delete 运算符后跟随非法标识符(即 delete 不存在的标识符)，会抛出语法错误； 非严格模式下，会静默失败并返回 false
严格模式中，对象直接量中定义同名属性会抛出语法错误； 非严格模式不会报错
严格模式中，函数形参存在同名的，抛出错误； 非严格模式不会
严格模式不允许八进制整数直接量（如：023）
严格模式中，arguments 对象是传入函数内实参列表的静态副本；非严格模式下，arguments 对象里的元素和对应的实参是指向同一个值的引用
严格模式中 eval 和 arguments 当做关键字，它们不能被赋值和用作变量声明
严格模式会限制对调用栈的检测能力，访问 arguments. callee. caller 会抛出异常
严格模式 变量必须先声明，直接给变量赋值，不会隐式创建全局变量，不能用 with,
严格模式中 call apply 传入 null undefined 保持原样不被转换为 window
解析：

27.移动端 click 事件、touch 事件、tap 事件的区别

答案：

1. click 事件在移动端会有 200-300ms ms 的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的 200-300ms 之后，才触发 click，如果 200-300ms 之内还有 click，就会进行放大缩小。

2. touch 事件是针对触屏手机上的触摸事件。现今大多数触屏手机 webkit 内核提供了 touch 事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。其中包括：touchstart, touchmove, touchend, touchcancel 这四个事件，touchstart touchmove touchend 事件可以类比于 mousedown mouseover mouseup 的触发

3. tap 事件在移动端，代替 click 作为点击事件，tap 事件被很多框架（如 zepto）封装，来减少这延迟问题， tap 事件不是原生的，所以是封装的

28.JS 单线程还是多线程，如何显示异步操作

答案：JS 本身是单线程的，他是依靠浏览器完成的异步操作。

解析：

具体步骤，

1、主线程 执行 js 中所有的代码。

2、主线程 在执行过程中发现了需要异步的任务任务后扔给浏览器（浏览器创建多个线程执行），并在 callback queque 中创建对应的回调函数（回调函数是一个对象，包含该函数是否执行完毕等）。

3、主线程 已经执行完毕所有同步代码。开始监听 callback queque 一旦 浏览器 中某个线程任务完成将会改变回调函数的状态。主线程查看到某个函数的状态为已完成，就会执行该函数。

29.JS 块级作用域、变量提升

答案：

1. 块级作用域

JS 中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称 ES6)中新增了块级作用域。块作用域由 { } 包括，if 语句和 for 语句里面的{ }也属于块作用域。

2. 变量提升

如果变量声明在函数里面，则将变量声明提升到函数的开头
如果变量声明是一个全局变量，则将变量声明提升到全局作用域的开头

30. null/undefined 的区别

答案：

null： Null 类型，代表“空值"，代表一个空对象指针，使用 typeof 运算得到 “object"，所以你可以认为它是一个特殊的对象值。

undefined： Undefined 类型，当一个声明了一个变量未初始化时，得到的就是 undefined。

31.jsonp 优缺点？

答案：

jsonp 优缺点
优点
1 它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制，JSONP 可以跨越同源策略；
2 它的兼容性更好，在更加古老的浏览器中都可以运行，不需要 XMLHttpRequest 或 ActiveX 的支持
3 在请求完毕后可以通过调用 callback 的方式回传结果。将回调方法的权限给了调用方。这个就相当于将 controller 层和 view 层终于分 开了。我提供的 jsonp 服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续 view 操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个 jsonp 服务。
缺点
1 它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求
2 它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题。
3 jsonp 在调用失败的时候不会返回各种 HTTP 状态码。
4 缺点是安全性。万一假如提供 jsonp 的服务存在页面注入漏洞，即它返回的 javascript 的内容被人控制的。那么结果是什么？所有调用这个 jsonp 的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用 jsonp 的时候必须要保证使用的 jsonp 服务必须是安全可信的

32. split() join()的区别

答案：

join()：用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串

split()：用于把一个字符串通过指定的分隔符进行分隔成数组

33.JavaScript 的数据类型

答案：JS 数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6 新增了 Symbol 类型。其中，Object 是引用类型，其他的都是基本类型(Primitive Type)。

34.如何判断一个对象是否属于某个类？

答案：instanceof

35.call() 和 apply() 的含义和区别？

答案：

首先说明两个方法的含义：

call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B. call(A, args1, args2); 即 A 对象调用 B 对象的方法。
apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B. apply(A, arguments); 即 A 对象应用 B 对象的方法。
call 与 apply 的相同点：

方法的含义是一样的，即方法功能是一样的；
第一个参数的作用是一样的；
call 与 apply 的不同点：两者传入的列表形式不一样

call 可以传入多个参数；
apply 只能传入两个参数，所以其第二个参数往往是作为数组形式传入

36.sort 排序原理

答案：冒泡排序法

解析：

冒泡排序法的原理：

比较相邻的元素。如果第一个比第二个大，就交换他们两个。
对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
针对所有的元素重复以上的步骤，除了最后一个。
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

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

答案：通过判断 Global 对象是否为 window，如果不为 window，当前脚本没有运行在浏览器中

38.移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？

答案：

1. 300 毫秒 2. 因为浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。 3. 推荐 fastclick. js

39.解释 JavaScript 中的作用域与变量声明提升？

答案：

我对作用域的理解是只会对某个范围产生作用，而不会对外产生影响的封闭空间。在这样的一些空间里，外部不能访问内部变量，但内部可以访问外部变量。
所有申明都会被提升到作用域的最顶上
同一个变量申明只进行一次，并且因此其他申明都会被忽略
函数声明的优先级优于变量申明，且函数声明会连带定义一起被提升

40.bind、call、apply 的区别

答案：

call 和 apply 其实是一样的，区别就在于传参时参数是一个一个传或者是以一个数组的方式来传。
call 和 apply 都是在调用时生效，改变调用者的 this 指向。
bind 也是改变 this 指向，不过不是在调用时生效，而是返回一个新函数。

41. 使用构造函数的注意点

答案：

1. 一般情况下构造函数的首字母需要大写，因为我们在看到一个函数首字母大写的情况，就认定这是一个构造函数，需要跟new关键字进行搭配使用，创建一个新的实例（对象） 2. 构造函数在被调用的时候需要跟new关键字搭配使用。 3. 在构造函数内部通过this+属性名的形式为实例添加一些属性和方法。 4. 构造函数一般不需要返回值，如果有返回值

42.字符串常用操作答案：

charAt(index): 返回指定索引处的字符串
charCodeAt(index): 返回指定索引处的字符的 Unicode 的值
concat(str1, str2, … ): 连接多个字符串，返回连接后的字符串的副本
fromCharCode(): 将 Unicode 值转换成实际的字符串
indexOf(str): 返回 str 在父串中第一次出现的位置，若没有则返回-1
lastIndexOf(str): 返回 str 在父串中最后一次出现的位置，若没有则返回-1
match(regex): 搜索字符串，并返回正则表达式的所有匹配
replace(str1, str2):str1 也可以为正则表达式，用 str2 替换 str1
search(regex): 基于正则表达式搜索字符串，并返回第一个匹配的位置
slice(start, end)：返回字符索引在 start 和 end（不含）之间的子串
split(sep，limit)：将字符串分割为字符数组，limit 为从头开始执行分割的最大数量
substr(start，length)：从字符索引 start 的位置开始，返回长度为 length 的子串
substring(from, to)：返回字符索引在 from 和 to（不含）之间的子串
toLowerCase()：将字符串转换为小写
toUpperCase()：将字符串转换为大写
valueOf()：返回原始字符串值

43.作用域的概念及作用

答案：

作用域 ： 起作用的一块区域
作用域的概念： 对变量起保护作用的一块区域
作用： 作用域外部无法获取到作用域内部声明的变量，作用域内部能够获取到作用域外界声明的变量。

44.作用域的分类

答案：块作用域、词法作用域、动态作用域

解析：

1 块作用域 花括号 {}

2 词法作用域（js 属于词法作用域） 作用域只跟在何处被创建有关系，跟在何处被调用没有关系

3 动态作用域 作用域只跟在何处被调用有关系，跟在何处被创建没有关系

45. js 属于哪种作用域

答案：词法作用域（函数作用域）

46.自执行函数? 用于什么场景？好处?

答案：

自执行函数: 1、声明一个匿名函数 2、马上调用这个匿名函数。
作用：创建一个独立的作用域。

好处：防止变量弥散到全局，以免各种 js 库冲突。隔离作用域避免污染，或者截断作用域链，避免闭包造成引用变量无法释放。利用立即执行特性，返回需要的业务函数或对象，避免每次通过条件判断来处理

场景：一般用于框架、插件等场景

47.多个页面之间如何进行通信

答案：有如下几个方式：

cookie
web worker
localeStorage 和 sessionStorage

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

答案：

arr. pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr. push() 从后面添加元素，返回值为添加完后的数组的长度
arr. unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr. shift() 从前面删除元素，只能删除一个 返回值是删除的元素

49. 事件绑定与普通事件有什么区别

答案：

用普通事件添加相同事件，下面会覆盖上面的，而事件绑定不会
普通事件是针对非 dom 元素，事件绑定是针对 dom 元素的事件

50.变量提升

答案：

变量提升
A、js 代码执行的过程

1 变量提升
2 代码从上到下依次执行
var 关键字和 function 关键字声明的变量会进行变量提升

B、变量提升发生的环境：发生在代码所处的当前作用域。

变量提升
1 var 关键字进行的变量提升，会把变量提前声明，但是不会提前赋值 。
2 function 关键字对变量进行变量提升，既会把变量提前声明，又会把变量提前赋值，也就是把整个函数体提升到代码的顶部
3 有一些代码是不会执行的但是仍旧会发生变量提升, 规则适用于 1, 2
1 return 之后的代码依旧会发生变量提升，规则适用于 1，2
2 代码报错之后的代码依旧会发生变量提升，规则适用于 1，2
3 break 之后的代码依旧会发生变量提升，规则适用于 1, 2
4 有一些代码是不会执行但是仍旧会发生变量提升，但是规则要发生变化
1 if 判断语句 if 判断语句中 var 关键字以及 function 关键字声明的变量只会发生提前声明，不会发生提前赋值, 也就是不会吧函数体整体提升到当前作用域顶部。规则跟 1, 2 不适用
2 switch case 规则跟 1, 2 不适用
3 do while 规则跟 1, 2 不适用
4 try catch catch 中声明的变量只会发生提前声明，不会发生提前赋值。
Ps: 在条件判断语句和 try catch 中的声明的变量不管是否能够执行，都只会发生提前
声明，不会发生提前赋值。

51.如何阻止冒泡与默认行为

答案：

阻止冒泡行为：非 IE 浏览器 stopPropagation()，IE 浏览器 window. event. cancelBubble = true
阻止默认行为：非 IE 浏览器 preventDefault()，IE 浏览器 window. event. returnValue = false

52.js 中 this 闭包 作用域

答案：

this：指向调用上下文

闭包：定义一个函数就开辟了一个局部作用域，整个 js 执行环境有一个全局作用域

作用域：一个函数可以访问其他函数中的变量（闭包是一个受保护的变量空间）

53.javascript 的本地对象，内置对象和宿主对象

答案：

1. 本地对象

ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象"。简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

2. 内置对象

JS中内置了17个对象，常用的是Array对象、Date对象、正则表达式对象、string对象、Global对象

3. 宿主对象

由ECMAScript实现的宿主环境提供的对象，可以理解为：浏览器提供的对象。所有的BOM和DOM都是宿主对象。

54.javascript 的同源策略

答案：一段脚本只能读取来自于同一来源的窗口和文档的属性

解析：

同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自 MDN 官方的解释）

简单来说就是：一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合 具体解释：

（1）源包括三个部分：协议、域名、端口（http 协议的默认端口是 80）。如果有任何一个部分不同，则源不同，那就是跨域了。

（2）限制：这个源的文档没有权利去操作另一个源的文档。这个限制体现在：（要记住）

Cookie、LocalStorage 和 IndexDB 无法获取。

无法获取和操作 DOM。

不能发送 Ajax 请求。我们要注意，Ajax 只适合同源的通信。

同源策略带来的麻烦：ajax 在不同域名下的请求无法实现，需要进行跨域操作

55.事件冒泡与事件捕获

答案：

事件冒泡：由最具体的元素（目标元素）向外传播到最不具体的元素

事件捕获：由最不确定的元素到目标元素

56.复杂数据类型如何转变为字符串

答案：

首先，会调用 valueOf 方法，如果方法的返回值是一个基本数据类型，就返回这个值
如果调用 valueOf 方法之后的返回值仍旧是一个复杂数据类型，就会调用该对象的 toString 方法
如果 toString 方法调用之后的返回值是一个基本数据类型，就返回这个值，
如果 toString 方法调用之后的返回值是一个复杂数据类型，就报一个错误。

57. javascript 中 this 的指向问题

答案：

全局环境、普通函数（非严格模式）指向 window
普通函数（严格模式）指向 undefined
函数作为对象方法及原型链指向的就是上一级的对象
构造函数指向构造的对象
DOM 事件中指向触发事件的元素
箭头函数…

58.call 与 apply 区别

答案：第二个参数的类型不同

解析：

call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。

call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。

apply 接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）

59.js 中 callee 与 caller 的作用

答案：

1. caller 返回一个调用当前函数的引用 如果是由顶层调用的话 则返回 null
2. callee 返回一个正在被执行函数的引用 （这里常用来递归匿名函数本身 但是在严格模式下不可行）

callee 是 arguments 对象的一个成员 表示对函数对象本身的引用 它有个 length 属性（代表形参的长度）

60.异步加载 js 的方法

答案：

方案一：

点评：HTML5 中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8 不支持）。此外，这种方法不能保证脚本按顺序执行。

方案二：

点评：兼容所有浏览器。此外，这种方法可以确保所有设置 defer 属性的脚本按顺序执行。

方案三：动态创建

61.分别阐述 split(), slice(), splice(), join()？

答案：

join()用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔符，默认是以逗号分开。归属于 Array
split()即把字符串分离开，以数组方式存储。归属于 Stringstring
slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array. splice()
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。返回的是含有被删除的元素的数组。

62.内置函数(原生函数)

答案：

String
Number
Boolean
Object
Function
Array
Date
RegExp
Error
Symbol

63.对象浅拷贝和深拷贝有什么区别

答案：在 JS 中，除了基本数据类型，还存在对象、数组这种引用类型。 基本数据类型，拷贝是直接拷贝变量的值，而引用类型拷贝的其实是变量的地址。
浅拷贝和深拷贝就是在这个基础之上做的区分，如果在拷贝这个对象的时候，只对基本数据类型进行了拷贝，而对引用数据类型只是进行了引用的传递，而没有重新创建一个新的对象，则认为是浅拷贝。反之，在对引用数据类型进行拷贝的时候，创建了一个新的对象，并且复制其内的成员变量，则认为是深拷贝。

64.如何编写高性能的 Javascript？

答案：

使用 DocumentFragment 优化多次 append
通过模板元素 clone ，替代 createElement
使用一次 innerHTML 赋值代替构建 dom 元素
使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
使用 Array 做为 StringBuffer ，代替字符串拼接的操作
将循环控制量保存到局部变量
顺序无关的遍历时，用 while 替代 for
将条件分支，按可能性顺序从高到低排列
在同一条件子的多（ >2 ）条件分支时，使用 switch 优于 if
使用三目运算符替代条件分支
需要不断执行的时候，优先考虑使用 setInterval

65.数组和对象有哪些原生方法，列举一下？

答案：

Array. concat( ) 连接数组

Array. join( ) 将数组元素连接起来以构建一个字符串

Array. length 数组的大小

Array. pop( ) 删除并返回数组的最后一个元素

Array. push( ) 给数组添加元素

Array. reverse( ) 颠倒数组中元素的顺序

Array. shift( ) 将元素移出数组

Array. slice( ) 返回数组的一部分

Array. sort( ) 对数组元素进行排序

Array. splice( ) 插入、删除或替换数组的元素

Array. toLocaleString( ) 把数组转换成局部字符串

Array. toString( ) 将数组转换成一个字符串

Array. unshift( ) 在数组头部插入一个元素

Object. hasOwnProperty( ) 检查属性是否被继承

Object. isPrototypeOf( ) 一个对象是否是另一个对象的原型

Object. propertyIsEnumerable( ) 是否可以通过 for/in 循环看到属性

Object. toLocaleString( ) 返回对象的本地字符串表示

Object. toString( ) 定义一个对象的字符串表示

Object. valueOf( ) 指定对象的原始值

66.documen. write 和 innerHTML 的区别?

答案：

1. document. write 是重写整个 document, 写入内容是字符串的 html 2. innerHTML 是 HTMLElement 的属性，是一个元素的内部 html 内容

67.什么是三元表达式？“三元”表示什么意思？

答案：三元如名字表示的三元运算符需要三个操作数。

语法是 条件 ? 结果1 : 结果2; . 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

68.我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获

答案：所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。

69.事件循环

答案：事件循环是一个单线程循环，用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数，则将回调函数出队并推送到调用堆栈中执行。

70.target 和 currentTarget 区别

答案：

event. target

返回触发事件的元素

event. currentTarget

返回绑定事件的元素

71.使用 let、var 和 const 创建变量有什么区别

答案：

用 var 声明的变量的作用域是它当前的执行上下文，它可以是嵌套的函数，也可以是声明在任何函数外的变量。let 和 const 是块级作用域，意味着它们只能在最近的一组花括号（function、if-else 代码块或 for 循环中）中访问。
var 会使变量提升，这意味着变量可以在声明之前使用。let 和 const 不会使变量提升，提前使用会报错。
用 var 重复声明不会报错，但 let 和 const 会。
let 和 const 的区别在于：let 允许多次赋值，而 const 只允许一次。

72.JSON 的了解

答案：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于 JavaScript 的一个子集。数据格式简单, 易于读写, 占用带宽小。

73.script 引入方式

答案：

html 静态 <script> 引入

js 动态插入 <script>

<script defer> : 延迟加载，元素解析完成后执行

<script async> : 异步加载，但执行时会阻塞元素渲染

74.数组中的forEach和map的区别

答案：

相同点
都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项），index（索引值），arr（原数组）
匿名函数中的this都是指向window
只能遍历数组
都不会改变原数组
区别
map方法
1.map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
2.map方法不会对空数组进行检测，map方法不会改变原始数组。
3.浏览器支持：chrome、Safari1.5+、opera都支持，IE9+,
若arr为空数组，则map方法返回的也是一个空数组。

forEach方法

1. forEach方法用来调用数组的每个元素，将元素传给回调函数 2. forEach对于空数组是不会调用回调函数的。
   无论arr是不是空数组，forEach返回的都是undefined。这个方法只是将数组中的每一项作为callback的参数执行一次。

75. for in和for of的区别

答案：
简单总结就是，for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

for-in总是得到对象的key或数组、字符串的下标。

for-of总是得到对象的value或数组、字符串的值，另外还可以用于遍历Map和Set。

76.typeof 与 instanceof 区别

答案：
1、typeof返回结果是该类型的字符串形式表示【6】（number、string、undefined、boolean、function、object）
2、instanceof是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。 在这里需要特别注意的是：instanceof 检测的是原型。

77.如何删除一个cookie

答案：

1.将时间设为当前时间往前一点。

var date = newDate();

date.setDate(date.getDate() - 1);//真正的删除

setDate()方法用于设置一个月的某一天。

2.expires的设置

document.cookie= ‘user=’+ encodeURIComponent(‘name’) + ';expires = ’ + newDate(0)

78.怎么判断两个json对象的内容相等？

JSON.stringify(obj) == JSON.stringify(obj2); //true