面试Js面试题一
1.Js 基本数据类型有哪些
字符串 String 数值 Number 布尔 boolean nul undefined 对象
数组
2.Ajax 如何使用
一个完整的 AJAX 请求包括五个步骤：
创建 XMLHTPRequest 对象
使用 open 方法创建 http 请求，并设置请求地址
xhr.open（get/post，url，async，true（异步），false（同步）经常使用前三个参数
设置发送的数据，用 send 发送请求
注册事件（给 ajax 设置事件）
获取响应并更新页面
AJAX
<html>
<head>
<title>AJAX实例</title>
<script language="javascript" type="text/javascript">
var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象
//定义一个用于创建XMLHttpRequest对象的函数
function createXMLHttpRequest(){
if(window.ActiveXObject){//IE浏览器的创建方式
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//Netscape浏览器中的创建方式
xmlHttpRequest = new XMLHttpRequest();
}
}
//响应HTTP请求状态变化的函数
function httpStateChange(){
if(xmlHttpRequest.readyState == 4){//判断异步调用是否成功,若成功开始局部更新数据
if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0) {
var node = document.getElementById("myDIv");//查找节点
node.firstChild.nodeValue = xmlHttpRequest .responseText;//更新数据
} else {//如果异步调用未成功,弹出警告框,并显示出错信息
alert("error:HTTP状态码为:" xmlHttpRequest.status ",HTTP状态信息为:" xmlHttpRequest.statusText);
}
}
}
//异步调用服务器段数据
function getData(name,value){
createXMLHttpRequest();//创建XMLHttpRequest对象
if(xmlHttpRequest!=null){
xmlHttpRequest.open("get","ajax.text",true);//创建HTTP请求
xmlHttpRequest.onreadystatechange = httpStateChange;//HTTP请求状态变化的函数
xmlHttpRequest.send(null);//发送请求
}
}
</script>
</head>
<body>
<div id="myDiv">原数据</div>
<input type = "button" value = "更新数据" onclick = "getData()">
</body>
</html>
3.如何判断一个数据是 NaN
- NaN 非数字 但是用 typeof 检测是 number 类型
- 利用 NaN 的定义 用 typeof 判断是否为 number
类型并且判断是否满 足 isNaN
isNaN(NaN)--true
- 利用 NaN是唯一个不等于任何自身的特点 NaN！=NaN
- 利用 ES6 中提供的 Object.is()方法（判断两个值是否相等）
Object.is(NaN, 0/0); // true
4.Js 中 null 与 undefined 区别
相同点：用 if 判断时，两者都会被转换成 false
不同点：
- number 转换的值不同 number（null）为 0 number（undefined）为 NaN
- Null·表示一个值被定义了，但是这个值是空值 Undefined 变量声明但未赋值
5.闭包是什么？有什么特性？对页面会有什么影响
闭包可以简单理解成：定义在一个函数内部的函数。其中一个内部函数
在包含它们的外部函数之外被调用时，就会形成闭包。
特点：
1.函数嵌套函数。
2.函数内部可以引用外部的参数和变量。
3.参数和变量不会被垃圾回收机制回收。
使用：
1.读取函数内部的变量；
2.这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。
优点：
1:变量长期停留在内存中；
2:避免全局变量的污染；
3:私有成员的存在 ；
缺点：会造成内存泄露
详细
6. Js 中常见的内存泄漏：
1.意外的全局变量
2.被遗忘的计时器或回调函数
3.脱离 DOM 的引用
4.闭包
7.事件委托是什么？如何确定事件源（Event.target 谁调用谁就
是事件源）
JS 高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，
就可以管理某一类型的所有事件。
事件委托，称事件代理，是 js 中很常用的绑定事件的技巧，事件委托就
是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事
件监听的职务，事件委托的原理是 DOM 元素的事件冒泡
8、什么是事件冒泡？
一个事件触发后，会在子元素和父元素之间传播，这种传播分为三个阶
段，
捕获阶段（从 window 对象传导到目标节点（从外到里），这个阶段不会
响应任何事件），目标阶段，（在目标节点上触发），冒泡阶段（从目标节
点传导回 window 对象（从里到外），事件委托/事件代理就是利用事件
冒泡的机制把里层需要响应的事件绑定到外层
9、本地存储与 cokie 的区别
Cookie
小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限
制为 4KB 左右。它的主要用途有保存登录信息，比如你登录某个网站市
场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用
户身份的数据来实现的。
localStorage
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的
新东西。早在 IE 6 时代，就有一个叫 userDat 的东西用于本地存储，
而当时考虑到浏览器兼容性，更通用的方案是使用 Flash
sesionStorage
sesionStorage 与 localStorage 的接口类似，但保存数据的生命周期
与 localStorage 不同。它可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存
在。但当页面关闭后，sesionStorage 中的数据就会被清空
三者的异同
- 数据的生命周期
Cokie：一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默
认是关闭浏览器后失效
localStorage：除非被清除，否则永久保存
sesionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小
| 类型 | 生命周期 | 存放数据大小 | 问题 |
|---|---|---|---|
| Cokie | 一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cokie，默认是关闭浏览器后失效 | 4K 左右 | 每次都会携带在 HTP 头中，如果使用 cokie 保存过多数据会带来性能问题 |
| localStorage | 除非被清除，否则永久保存 | 一般为 5MB | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 |
| sesionStorage | 仅在当前会话下有效，关闭页面或浏览器后被清除 | - | - |
10、ES6 新特性
const 和 let、模板字符串、箭头函数、函数的参数默认值、对象和数组
解构、for.of 和 for.in、ES6 中的类
关于es6新特性的总结
11、.Let 与 var 与 const 的区别
Var 声明的变量会挂载在 window 上，而 let 和 const 声明的变量不会
Var 声明的变量存在变量提升，let 和 const 不存在变量提升
同一作用域下 var 可以声明同名变量，let 和 const、不可以
Let 和 const 声明会形成块级作用域
Let 暂存死区TDZ
Const 一旦声明必须赋值，不能用 nul 占位，声明后不能再修改，如果
声明的是复合类型数据，可以修改属性
12.数组方法有哪些请简述
push() 从后面添加元素，返回值为添加完后的数组的长度
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从 i(索引值)开始之后的那个元素。返回值是删除的元
素
arr.concat() 连接两个数组 返回值为连接后的新数组
str.plit() 将字符串转化为数组
ar.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数
字进行排序，不是按照数字大小排序的
ar.evrse() 将数组反转,返回值是反转后的数组
ar.slice(star,end) 切去索引值 star 到索引值 end 的数组，不包含 end
索引的值，返回值是切出来的数组
ar.forEach(calback) 遍历数组,无 return 即使有 return，也不会返回
任何值，并且会影响原来的数组
ar.map(calback) 映射数组(遍历数组),有 return 返回一个新数组 。
ar.filter(calback) 过滤数组，返回一个满足要求的数组
详细
13.Json 如何新增/删除键值对
var json={ "firstName":"Bill" , "lastName":"Gates"};
//给json对象添加新的属性并赋值
json.sex="man";
//也可以如下添加新的属性并赋值
json["sex"]="man";
//删除json对象的firstName属性
delete json.firstName;
//也可以如下删除firstName属性的值
delete json["firstName"];
//修改json对象的firstName属性的值
json.firstName="Thomas";
//也可以如下修改firstName属性的值
json["firstName"]="Thomas";
14.什么是面向对象请简述
面向对象是一种思想，是基于面向过程而言的，面向对象是将功
能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细
节；
Js 本身是没有 class 类型的，但是每个函数都有一个 protype 属性，
protype 指向一个对象，当函数作为构造函数时，protype 就起到
类似于 class 的作用
面向对象有三个特点：封装（隐藏对象的属性和实现细节，对外提供公
共访问方式），
继承（提高代码复用性，继承是多态的前提），多态（是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象）
15.普通函数和构造函数的区别
1.构造函数也是一个普通函数，创建方式和普通函数一样，但是构造函数
习惯上首字母大写
2.调用方式不一样，普通函数直接调用，构造函数要用关键字 new 来调
用
3.调用时，构造函数内部会创建一个新对象，就是实例，普通函数不会创
建新对象
4.构造函数内部的 this 指向实例，普通函数内部的 this 指向调用函数的
对象（如果没有对象调用，默认为 window）
5.构造函数默认的返回值是创建的对象（也就是实例），普通函数的返回
值由 return 语句决定
6.构造函数的函数名与类名相同
参考
16、请简述原型/原型链/（原型）继承
原型：
prot
任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的
内置属性_prot_指向它的构造函数的 protype 指向的对象，即任何对
象都是由一个构造函数创建的。
prototype属性，是函数所独有的，它是从一个函数指向一个对象。它的含义是函数的原型对象，也就是这个函数（其实所有函数都可以作为构造函数）所创建的实例的原型对象
function Foo() {...};
let f1 = new Foo();
f1.proto === Foo.prototype
原型链
原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
每个构造函数都有一个原型对象，每个原型对象都
有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指
针。
原型链的核心就是依赖对象的_prot_的指向，当自身不存在的属性
时，就一层的扒出创建对象的构造函数，直至到 Object 时，就没有
_prot_指向了。 Object.protype 是没有_prot_属性的，它
=nul。
constructor 属性：
对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数
函数创建的对象.proto === 该函数.prototype，该函数.prototype.constructor===该函数本身
17.Promise 的理解
一、什么是 Promise？
我们都知道，Promise 是承诺的意思，承诺它过一段时间会给你一个结
果。
Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更
强大。
从语法上讲，promise 是一个对象，从它可以获取异步操作的消息；
二、promise 有三种状态：pending 初始状态也叫等待状态，fulied
成功状态，rejcted 失败状态；状态一旦改变，就不会再变。创造 promise
实例后，它会立即执行。
三、Promise 的两个特点
1、Promise 对象的状态不受外界影响
2、Promise 的状态一旦改变，就不会再变，任何时候都可以得到这个结
果，状态不可以逆，
四、Promise 的三个缺点
1）无法取消 Promise,一旦新建它就会立即执行，无法中途取消
2）如果不设置回调函数，Promise 内部抛出的错误，不会反映到外部
3）当处于 pending（等待）状态时，无法得知目前进展到哪一个阶段，
是刚开始还是即将完成
18.用 Promise 来解决什么问题？
promise 是用来解决两个问题的：
1.回调地狱，代码难以维护， 常第一个的函数的输出是第二个函数的
输入这种现象
2.promise 可以支持多并发的请求，获取并发请求中的数据
这个 promise 可以解决异步的问题，本身不能说 promise 是异步的
19.请简述 async 的用法
Async 就是 genration 和 promise 的语法糖，async 就是将 genrator
的*换成 async，将 yiled 换成 await
函数前必须加一个 async，异步操作方法前加一个 await 关键字，意思就
是等一下，执行完了再继续走，注意：await 只能在 async 函数中运行，
否则会报错
Promise 如果返回的是一个错误的结果，如果没有做异常处理，就会报
错，所以用 try.catch 捕获一下异常就可以了
Promise和async区别
20、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么
-
当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还
是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个
请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器
获得请求对应的 IP 地址。 -
浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应
答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端
尝试建立起通信，然后服务器响应并接受客户端的请求，最后由客户端
发出该请求已经被接受的报文。 -
一旦 TCP/I P连接建立，浏览器会通过该连接向远程服务器发送
HTTP 的 GET 请求。远程服务器找到资源并使用 HTP 响应返回该资
源
21.get 请求传参长度的误区
误区：我们经常说 get 请求参数的大小存在限制，而 post 请求的
参数大小是无限制的。实际上 HTP 协议从未规定 GET/POST 的请
求长度限制是多少。对 get 请求参数的限制是来源与浏览器或 web
服务器，浏览器或 web 服务器限制了 url 的长度。为了明确这个概
念，我们必须再次强调下面几点:
HTP 协议 未规定 GET 和 POST 的长度限制
GET 的最大长度显示是因为 浏览器和 web 服务器限制了 URI 的
长度不同的浏览器和 WEB 服务器，限制的最大长度不一样要支持
IE，则最大长度为 2083byte，若只支持 Chrome，则最大长度
812byte
22.补充 get 和 post 请求区别
post/get 的请求区别
在缓存方面的区别：get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
post 不同，post 做的一般是修改和删除的工作，所以必须与数据
库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhfijabe
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
