2020-12-22 - 日理万妓 2022-12-29 14:02 77阅读 0赞 ## js面试题之第六天 ## **题1：什么是Promise？干什么用的** 答案：ES6中新出的 用途：1、可以用来将一段异步的代码封装成一个Promise对象 2、封装完之后就可以使用ES8中的async…await来使用同步的方式写代码了，不需要再写回调函数 **题2：如何将异步代码封装成一个没有返回值的Promise对象？** 答案：简易版本的封装流程（没有参数、没有返回值） 1、定义一个函数 2、在这个函数中创建一个promise对象并返回return new Promise 3、把异步的代码写在Promise中 代码示例： // 异步代码 setTimeout(function () { console.log('hello') },0) // 把上面的异步代码封装成一个Promise对象 function hello () { return new Promise(function () { setTimeout(function() { console.log('hello') },0) }) } // 使用Promise对象 //方法1：ES6中原始语法 hello ().then(function() { // 异步代码执行完之后的操作 }) //方法2：ES8 async...await高级语法 async function doHello () { await hello() // 执行异步 //后续操作 } doHello() **题3：什么是AJAX？干什么用的？** 答案：翻译过来就是 异步的JavaScript 和 XML 用途：JavaScript 这门语言用来和其他计算机进行数据通信的技术 俗称：调用服务器接口用的 **题4：JS如何实现AJAX？** 答案：至少有三种方法： 1、使用JS原生的AJAX技术 2、使用jQuery中封装好的$.ajax技术 3、使用基Promise的axios包，这个包的好处是已经将AJAX都封装成的Promise对象 **题5：什么是AJAX跨域？怎么解决？** 答案：因为同源策略引发的跨域问题，浏览器会限制AJAX不允许跨域请求服务器。什么情况是跨域？ 情况1、端口号不同 2、域名不同 解决办法： 1、jsonp 优点：没有浏览器的限制（低端的IE也支持） 缺点：只能发送GET请求 2、CORS（跨站资源共享） 优点：由后端完成，前端完全不用改代码，支持各种请求（GET POST PUT DELETE 等） 缺点：低端IE不支持 3、服务器代码 优点：没有任何限制 缺点：需要再写个代理服务器的程序 **题6：什么是DOM？** 答案：DOM（Document Object Model），文档对象模型。一个网页就是一个DOM树，通过js可以操作网页中的元素。 **题7：查找页面中的元素有几种方法？** 答案： document.getElemetnByID: 根据ID来查找某一个元素 document.getElementsByClassName: 根据class名来查找多个元素 document.getElementsByTagName: 根据标签名查找多个元素 document.querySelector: 使用CSS的选择器来查找某一个全速 document.querySelectorAll: 使用css的选择器来查找所有满足的元素 **题8：如何使用JS创建一个元素？** 答案：使用document.createElement 比如：用js向页面中添加一个h1标签 //创建标签 let h1 = document.createElement('h1') //设置标签内容 h1.innerHTML = 'hello world' //放到页面 document.body.appendChild(h1) **题9：如何向页面中添加一个元素** 答案： appendChild: 在一个标签里面追加元素 insertBefore:在一个标签的前面添加元素 insertAfter: 向一个标签的后面添加元素 **题10：Cookie、Session、LocalStorage、sessionStorage的区别** 答案： cookie 和 session： 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie和session跟服务端进行数据交互 cookie和session的区别： 1、使用方式 **cookie机制**：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件，cookie会被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期事件结束才消失。cookie是服务端发给客户的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。 **session机制**：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为，当浏览器支持cookie时，url不做任何处理；当浏览器不支持cookie的时候，将会重写URL将sessionid拼接到访问地址后。 2、保持状态 **cookie**保存在浏览器端，**seesion**保存在服务器端 3、存储的大小 单个**cookie**保存的数据不能超过4kb **session**大小没有限制 4、存储内容 **cookie**只能保存字符串类型，以文本的方式 **session**通过类似与Hashtable的数据结构来保存，能支持任何类型的对象（session中可含有多个对象） 5、安全性 **session**的安全性大于**cookie**。原因如下： 1：**sessionid**存储在cookie中，若要攻破session首先要攻破cookie 2：**sessionid**是要有人登录或者启动session\_start才会有，所以攻破cookie也不一定能得到sessionid 3：第二次启动session\_start后，前一次的sessionid就是失效了，**session**过期后，sessionid也随之失效 4：**sessionid**是加密的 综上所述，攻击者必须在短时间内攻破加密的sessionid，这很难。 6、应用场景 **cookie**： （1）判断用户是否登录过网站，以便下次登录时能够实现自动登录（或者记住密码） （2）保存上次登录的事件等信息 （3）保存上次查看的页面 （4）浏览计数 **session**： （1）网上商城中的购物车 （2）保存用户登录信息 （3）将某些数据放入session中，供同一用户的不同页面使用 （4）防止用户非法登录 7、缺点 **cookie** （1）大小受限 （2）用户可以操作（禁用）cookie，使功能受限 （3）安全性较低 （4）有些状态不可能保存在客户端 （5）每次访问都要传送cookie给服务器，浪费宽带 （6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下 **session** （1）session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大 （2）依赖于cookie（sessionid保存在cookie），如果禁用cookie，则要使用URL重写 （3）创建session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以过的使用session变量将会导致代码不可读且不利于维护 **WebStorage** **WebStorage**的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。 **WebStorage**两个主要目标 1、提供一种在cookie之外存储会话数据的路径 2、提供一种存储大量可以跨会话存在的数据的机制 HTML5的WebStorage提供了两种API：**localStorage**（本地存储）和 **sessionStorage**（会话存储） **localStorage**和**sessionStorage**的区别 1、生命周期 **localStorage**的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失 **localStorage**除非主动删除数据，否则数据永远不会消失 **sessionStorage**的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念 **sessionStorage**是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。 2、存储大小 localStorage和sessionStorage的存储数据大小一般都是：5MB 3、存储位置 localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信 4、存储内容类型 localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMASxript提供的JSON对象的stringify和parse来处理 5、获取方式 localStorage: window.localStorage sessionStorage:window.sessionStorage 6、应用场景 localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据 sessionStorage：敏感账号一次性登录 WebStorage的优点 （1）存储空间更大：cookie为4kb，而WebStorage是5MB （2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务端的交互，节省了网络流量 （3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便 （4）快速显示：有的数据存储在WebStorage上再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快 （5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说会比较高一些，不会担心截获，但是仍然存在伪造问题 （6）WebStorage提供了一些方法，数据操作比cookie方便 setItem(key,value) ----保存数据，以键值对的方式存储信息 getItem(key)---获取数据，将键值传入，即可获取到对应的value值 removeItem(key)----删除单个数据，根据键值对移出对应的信息 clear()----删除所有的数据 key(index) ----获取某个索引的key
还没有评论，来说两句吧...