大家好，我是讯享网，很高兴认识大家。



文章目录

• 1. 三个等号和两个等号的区别
• 2.slice splice区别

• ⑴ slice
• ⑵ splice

• 3.setTimeout和setInterval区别，如何互相实现
• 4.childNodes和children的区别
• 5.var a=function(){}和function a(){}有什么区别
• 6.JS的数据类型

• ⑴ 概述
• ⑵ typeof操作符

• ⑶ 三大引用类型

• ①Object类型
• ②Array类型
• ③Function类型

• ⑶ 值类型和引用类型的区别
• 7.闭包

• ⑴ 什么是闭包
• ⑵ 立即执行函数
• ⑶ 闭包的作用

• 8.事件捕获和时间冒泡

• ⑴ 一 js时间传播过程

• ⑵ AddEventlistener
• ⑶ 阻止事件冒泡
• 9.arguments

• ⑴ 类数组
• ⑵ arguments
• ⑶ arguments操作

• ①arguments转数组
• ②修改 arguments 值
• ③将参数从一个函数传递到另一个函数
• ④扩展操作符
• ⑤默认参数

• ⑷ 注意事项

• ①JS没有重载

• ⑥不能将函数的 arguments 泄露或者传递出去

• 10.Ajax原理

• ⑴什么是Ajax
• ⑵Ajax的原理

• 11.fetch和Ajax的区别

• ⑴Ajax
• ⑵fetch
• ⑶两者区别

• 12.虚拟DOM

• ⑴概述
• ⑵主要分为下面几个步骤

• 13.宏观任务和微观任务
• 13.setTimeout
• 14.回调
• 15.Generators
• 16.Promise
• 17.Async/Await

• ⑴特点
• ⑵async/await 的优势在于处理 then 链

• 18.防抖
• 19.节流
• 20.Set、Map、WeakSet 和 WeakMap

• ⑴Set
• ⑵WeakSet
• ⑶Map
• ⑷WeakMap

• 21.parseInt(string, radix)
• 22.原型链

• ⑴proto和prototype
• ⑵普通对象和函数对象
• ⑶作用
• ⑷例子:

• 23.js继承
• 24.jsonp原理

• ⑴同源策略
• ⑵jsonp解决跨域

• ①什么是jsonp
• ②jsonp跨域的原理

• 25.call、apply和bind

• ⑴概述
• ⑵call、apply和bind

• ①call

• ②apply
• ③bind

• 26.webStorage

• ⑴概述
• ⑵相同点
• ⑶不同点

1. 三个等号和两个等号的区别

两个等号和三个等号是不同的,两个是判断值是否相等,三个是判断值及类型是否完全相等。

2.slice splice区别

⑴ slice

从已有数组中返回选定的元素，返回一个新数组(不会改变原数组)，包含从start到end（不包含该元素）的数组元素。

• start 必须，规定从何处开始选取(第一位是0)，如果为负数，规定从数组尾部算起的位置，-1是指最后一个元素。
• end 可选（如果该参数没有指定，那么切分的数组包含从start倒数组结束的所有元素，如果这个参数为负数，那么规定是从数组尾部开始算起的元素)。

⑵ splice

该方法向或者从数组中添加或者删除项目，返回被删除的项目。（该方法会改变原数组）

• index参数：必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。
• howmany参数：必须，要删除的数量，如果为0，则不删除项目。
• tem1,…itemX参数：可选，向数组添加的新项目。
  例:

3.setTimeout和setInterval区别，如何互相实现

• setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次
• setInterval(表达式,交互时间)它从载入后,每隔指定的时间就执行一次表达式

4.childNodes和children的区别

childNodes会计算上包括空格的所有节点。而children是属于非标准型，不会计算空格。·

5.var a=function(){}和function a(){}有什么区别

6.JS的数据类型

⑴ 概述

js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）。

• Number类型 包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
• String类型
• Boolean类型
• Undefined类型 只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。
• Null类型
• Object类型

⑵ typeof操作符

⑶ 三大引用类型

①Object类型

②Array类型

③Function类型

⑶ 值类型和引用类型的区别

7.闭包

⑴ 什么是闭包

这里面local 变量和 bar 函数就组成了一个闭包（Closure）。
为什么要函数套函数呢?
是因为需要局部变量，所以才把 local 放在一个函数里，如果不把 local 放在一个函数里，local 就是一个全局变量了，达不到使用闭包的目的——隐藏变量（等会会讲）。函数套函数只是为了造出一个局部变量，跟闭包无关。
为什么要 return bar 呢？
所以 return bar 只是为了 bar 能被使用，也跟闭包无关。
另外一点：
这个foo()函数是立即执行的函数。

⑵ 立即执行函数

立即执行函数就是在声明函的时候立刻执行,防止变量被全局污染。

⑶ 闭包的作用

8.事件捕获和时间冒泡

⑴ 一 js时间传播过程

讯享网

• 事件捕获
  当一个DOM元素上的事件被触发的时候（如：按钮点击事件），这个元素的所有父元素 中，如果也绑定有该相同事件，则也会被触发， 触发的顺序就是先从 : … 父元素 ==> 临近父元素 ==> 当前元素的事件
• 事件冒泡
  当一个DOM元素上的事件被触发的时候（如：按钮点击事件），这个元素的所有父元素 中，如果也绑定有该相同事件，则也会被触发，一直到document

⑵ AddEventlistener

W3C为我们提供了addEventListener()函数用来为指定的dom元素动态绑定事件,语法

• event 指定事件名，不要用on做前缀
• function 执行函数
• useCapture 可选值，boolean类型，指定事件是否在捕获或冒泡阶段执行

• ture 事件句柄在捕获阶段执行
• false 默认，事件句柄在冒泡阶段执行

⑶ 阻止事件冒泡

stopPropagation可以阻止冒泡

9.arguments

⑴ 类数组

包含一组数据以及拥有一个 length 属性，但是没有任何 Array 的方法。类数组对象的 length 值无法自动改变。

⑵ arguments

arguments 是一个类数组对象。代表传给一个function的参数列表。

⑶ arguments操作

①arguments转数组

• Array.prototype.slice.call(arguments);
• [].slice.call(arguments);
• Array.from()

②修改 arguments 值

非严格模式下:

③将参数从一个函数传递到另一个函数

④扩展操作符

扩展操作符可以将 arguments 展开成独立的参数。

⑤默认参数

默认参数对 arguments 没有影响

⑷ 注意事项

①JS没有重载

⑥不能将函数的 arguments 泄露或者传递出去

我们可以这么做:

10.Ajax原理

⑴什么是Ajax

Asynchronous JavaScript and XML是一种异步请求数据，不需要重新刷新页面的web开发技术，它是由以下几个部分组成

使用CSS和XHTML来表示
使用DOM模型来交互和动态显示
使用XMLHttpRequest来和服务器进行异步通信
使用javascript来绑定和调用

⑵Ajax的原理

11.fetch和Ajax的区别

⑴Ajax

Ajax的本质是使用XMLHttpRequest对象来请求数据，下面简单贴下原生js实现：

⑵fetch

fetch 是全局量 window 的一个方法，它的主要特点有：

• 第一个参数是URL
• 第二个是可选参数，可以控制不同配置的 init 对象
• 使用了 JavaScript Promises 来处理结果/回调

⑶两者区别

• 从 fetch()返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。相反，它会正常解决 (其中ok状态设置为false), 并且仅在网络故障时或任何阻止请求完成时，它才会拒绝。
• 默认情况下, fetch在服务端不会发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头)。如果想要在同域中自动发送cookie,加上 credentials 的 same-origin 选项，对于cors请求，使用credentials的include选项允许将凭据发送到其他域。

12.虚拟DOM

⑴概述

即js模拟dom的树形结构，因为相对于dom对象，javascript对象更简单，处理速度更快。

⑵主要分为下面几个步骤

• 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
• 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
• 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了，无差异就不作为

13.宏观任务和微观任务

• 一个任务中，微观任务是先于宏观任务执行的。
• 宏观任务队列是一个事件循环，重复执行等待执行-执行任务两个任务
• 宏观任务传递的是Promise异步代码，Promise包含的所需要执行的异步代码是微观任务

13.setTimeout

14.回调

15.Generators

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。
generator和函数不同的是，generator由function定义（注意多出的号），并且，除了return语句，还可以用yield返回多次。
例子:

我们没执行一次next执行一次yield:

16.Promise

• Promise().then().then…catch() 多任务串行执行,有错误catch
• Promise.all([p1,p2,…]) 多任务并行执行,都要成功才进入then
• Promise.race([p1,p2,…]) 多任务赛跑,then()和catch(),谁先调用算谁的,其它任务中断

17.Async/Await

⑴特点

ES7出现，是 Generator 函数的语法糖

• async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
• await 只能出现在 async 函数中
• async 函数返回的是一个 Promise 对象,所以在最外层不能用 await 获取其返回值的情况下，我们当然应该用原来的方式：then() 链来处理这个 Promise 对象

⑵async/await 的优势在于处理 then 链

用async/await 来实现:

18.防抖

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

19.节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数,比如射击游戏，一秒钟点N次鼠标他就开一枪。数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

20.Set、Map、WeakSet 和 WeakMap

⑴Set

• 成员不能重复
• 只有健值，没有健名，有点类似数组。
• 可以遍历，方法有add, delete,has

⑵WeakSet

• 成员都是对象
• 成员都是弱引用，随时可以消失。 可以用来保存DOM节点，不容易造成内存泄漏
• 不能遍历，方法有add, delete,has

⑶Map

• 本质上是键值对的集合，类似集合
• 可以遍历，方法很多，可以干跟各种数据格式转换

⑷WeakMap

• 直接受对象作为健名（null除外），不接受其他类型的值作为健名
• 键名所指向的对象，不计入垃圾回收机制
• 不能遍历，方法同get,set,has,delete

21.parseInt(string, radix)

是用来解析字符串的，使字符串成为指定基数的整数

22.原型链

⑴proto和prototype

• prototype 指向一块内存，这个内存里面有共用属性
• proto 指向同一块内存
• prototype 和 proto 的不同点在于prototype 是构造函数的属性，而 proto 是对象的属性

⑵普通对象和函数对象

函数对象:

• 普通对象有属性proto,指向该对象的构造函数的原型对象。
• 函数对象除了有属性proto,还有属性prototype，prototype指向该方法的原型对象。

⑶作用

一个对象并没有toString方法，就会往上找直到null，我感觉就是实现了继承

⑷例子:

23.js继承

ES6之前js没有类的概念。

• ⑴原型链继承
• ⑵类式继承
• ⑶组合式继承：前两种方式的结合
• ⑷寄生组合式继承
• ⑸ES6通过extends继承(推荐)

24.jsonp原理

⑴同源策略

同源策略，它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
当一个浏览器的两个tab页中分别打开百度和谷歌的页面
当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的
即检查是否同源，只有和百度同源的脚本才会被执行。

⑵jsonp解决跨域

①什么是jsonp

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）

②jsonp跨域的原理

由于同源策略，XMLHttpRequest()对象无法跨域，但是在页面上js脚本，css样式文件，图片是可以跨域的

jsonp是将请求通过动态创建一个

25.call、apply和bind

⑴概述

call、apply、bind的作用是改变函数运行时this的指向。

⑵call、apply和bind

①call

• thisArg 指定的this值,并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
• arg1, arg2, … 指定的参数列表

②apply

• thisArg 指定的this值,并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
• 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

③bind

• thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。
• arg1, arg2, … 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。

26.webStorage

⑴概述

⑵相同点

• 它们都可以用于存储用户数据
• 它们存储数据的格式都是字符串形式
• 它们存储的数据都有大小限制

⑶不同点

它们的生命周期不同。sessionStorage 的生命周期是一个会话，localStorage的生命周期是永久，cookie 的生命周期可以自定义，cookie 可以设置过期时间，数据在过期时间之前可以访问。
它们的存储大小限制不同。大部分现代浏览器 Storage 的存储限制大小为 5M，cookie 的存储大小限制 为 4K。
浏览器支持不同，API 调用方式不同。
相比 cookie ，Web Storage 的优点主要表现在存储空间更大，可存储的内容更大。cookie每次都随请求数据发送到服务器端，Web Storage不会和请求数据一同发送到服务器端，占用带宽更少。缺点主要表现在，现在所有浏览器都支持 cookie 操作，而只有现在浏览器才支持 Web Storage 操作，如果需要兼容老旧浏览器，就不能使用 Web Storage。