目录
1、相同点
2、区别
二、说一说JS数据类型有哪些,区别是什么?
🍂 1、数据类型
🍂 2、数据类型区别
🍂 3、注意
🍂 4、总结
三、说一说你对闭包的理解?
四、说一说promise是什么与使用方法?
🤪Promise的作用
🤪Promise的使用
🤪Promise的特点
🤪Promise的其他方法:
五、说一说跨域是什么?如何解决跨域问题?
一、说一说cookie、sessionStorage和localStorage 区别?
1、相同点
🥰 Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。
2、区别
🐾 数据存储位置
- cookie是由服务器端写入的
- SessionStorage、 LocalStorage都是由前端写入的
🐾 生命周期
- cookie的生命周期是由服务器端在写入的时候就设置好的
- LocalStorage是写入就一直存在,除非手动清除
- SessionStorage是页面关闭的时候就会自动清除
🐾 存储大小
- cookie的存储空间比较小大概4KB
- SessionStorage、 LocalStorage存储空间比较大,大概5M
🐾 写入方式
- Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则
- SessionStorage还限制必须是同一个页面
🐾 发送请求时是否携带
- 在前端给后端发送请求的时候会自动携带Cookie中的数据
- SessionStorage、 LocalStorage不会
🐾 应用场景
- Cookie一般用于存储登录验证信息SessionID或者token
- LocalStorage常用于存储不易变动的数据,减轻服务器的压力
- SessionStorage可以用来检测用户是否是刷新进入页面,如音乐播放器恢复播放进度条的功能
- 总结:数据存储位置、生命周期、存储大小、写入方式、数据共享、发送请求时是否携带、应用场景
二、说一说JS数据类型有哪些,区别是什么?
🍂 1、数据类型
- 基本数据类型也叫简单数据类型,包含7种类型,分别是Number 、String、Boolean、BigInt、Symbol、Null、Undefined。
- 引用数据类型也叫复杂数据类型,通常用Object代表,普通对象,数组,正则,日期,Math数学函数都属于Object。
🍂 2、数据类型区别
- 基本数据类型和引用数据类型它们在内存中的存储方式不同。
- 基本数据类型是直接存储在栈内存中的简单数据段,占据空间小,属于被频繁使用的数据。
- 引用数据类型是存储在堆内存中,占据空间大。
- 引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址,当解释器寻找引用值时,会检索其在栈中的地址,取得地址后从堆中获得实体。
🍂 3、注意
- Symbol是ES6新出的一种数据类型,这种数据类型的特点就是没有重复的数据,可以作为object的key。
- Symbol()的构造函数不够完整,所以不能使用new Symbol()创建数据。
- Symbol()创建数据具有唯一性,所以 Symbol() !== Symbol(), 同时使用Symbol数据作为key,不能使用for获取到这个key,需要使用Object.getOwnPropertySymbols(obj)获得这个obj对象中key类型是Symbol的key值。
let key = Symbol('key');let obj = { [key]: 'symbol' };// 返回一个数组[Symbol('key')]let keyArray = Object.getOwnPropertySymbols(obj); console.log(keyArray);obj[keyArray[0]] // 'symbol'console.log(obj[keyArray[0]]);
- BigInt也是ES6新出的一种数据类型,这种数据类型的特点就是数据涵盖的范围大,能够解决超出普通数据类型范围报错的问题。
- 使用方法:整数末尾直接+n:647326483767797n; 调用BigInt()构造函数:BigInt("647326483767797")
- 注意:BigInt和Number之间不能进行混合操作
🍂 4、总结
- 基本数据类型:number、string、boolean、undefined、null、symbol、bigint
- 引用数据类型:object(包括Array,Function、Object类等)
- 区别:基本数据类型的存放在栈内存中,引用数据类型存放在堆内存中,它的地址在栈中,一般我们访问就是它的地址
- Symbol唯一性, 不可枚举,使用getOwnPropertySymbols获取
- bigint的特点是数据涵盖的范围比较大,可以用来表示数字类型不能表达的数据范围的数值。
三、说一说你对闭包的理解?
- 概念:函数内部的函数可以访问外部函数的变量称为闭包
- 一般就是一个函数A,return其内部的函数B,被return出去的B函数能够在外部访问A函数内部的变量,这时候就形成了一个B函数的变量背包,A函数执行结束后这个变量背包也不会被销毁,并且这个变量背包在A函数外部只能通过B函数访问。
- 闭包形成的原理:作用域链,当前作用域可以访问上级作用域中的变量
- 闭包解决的问题:能够让函数作用域中的变量在函数执行结束之后不被销毁,同时也能在函数外部可以访问函数内部的局部变量。
- 闭包带来的问题:由于垃圾回收器不会将闭包中变量销毁,于是就造成了内存泄露,内存泄露积累多了就容易导致内存溢出。
- 闭包的应用:能够模仿块级作用域,能够实现柯里化,在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。
🍀总结:
😇 1.函数内部的函数可以访问外部函数的变量称为闭包
😇 2.通过作用域链,当前作用域可以访问上级作用域中的变量
😇 3.解决的问题:保存变量,保护变量
😇 4.带来的问题:内存泄露
😇 5.块级作用域
- 🍀变量背包、作用域链、局部变量不销毁、函数体外访问函数的内部变量、内存泄漏、内存溢出、形成块级作用域、柯里化、构造函数中定义特权方法、Vue中数据响应式Observer
四、说一说promise是什么与使用方法?
🤪Promise的作用
- Promise是异步微任务,解决了异步多层嵌套回调的问题,让代码的可读性更高,更容易维护
🤪Promise的使用
- Promise是ES6提供的一个构造函数,可以使用Promise构造函数new一个实例
- Promise构造函数接收一个函数作为参数,这个函数有两个参数,分别是两个函数 resolve和reject
- resolve将Promise的状态由等待变为成功,将异步操作的结果作为参数传递过去
- reject则将状态由等待转变为失败,在异步操作失败时调用,将异步操作报出的错误作为参数传递过去。
- 实例创建完成后,可以使用then方法分别指定成功或失败的回调函数,也可以使用catch捕获失败,then和catch最终返回的也是一个Promise,所以可以链式调用。
🤪Promise的特点
1. 对象的状态不受外界影响(Promise对象代表一个异步操作,有三种状态)
- pending (执行中)
- resolved (成功,又称Fulfilled)
- rejected (拒绝)
- pending为初始状态,fulfilled和rejected为结束状态(结束状态表示promise的生命周期已结束)
2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果
- Promise对象的状态改变,只有两种可能(状态凝固了,就不会再变了,会一直保持这个结果)
- 从Pending变为Resolved
- 从Pending变为Rejected
3. resolve方法的参数是then中回调函数的参数,reject方法中的参数是catch中的参数
4. then方法和 catch方法只要不报错,返回的都是一个fullfilled状态的promise
🤪Promise的其他方法:
- Promise.resolve() :返回的Promise对象状态为fulfilled,并且将该value传递给对应的then方法。
- Promise.reject():返回一个状态为失败的Promise对象,并将给定的失败信息传递给对应的处理方法。
- Promise.all():返回一个新的promise对象,该promise对象在参数对象里所有的promise对象都成功的时候才会触发成功,一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。
- Promise.any():接收一个Promise对象的集合,当其中的一个 promise 成功,就返回那个成功的promise的值。
- Promise.race():当参数里的任意一个子promise被成功或失败后,父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄,并返回该promise对象。
- pendding、rejected、resolved、微任务、then、catch、Promise.resolve()、Promise.reject()、Promise.all() Promise.any()、Promise.race()
五、说一说跨域是什么?如何解决跨域问题?
😏 跨域
- 当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同,就说该接口跨域了。
😏 跨域限制的原因
- 浏览器为了保证网页的安全,出的同源协议策略。
😏 跨域报错信息
😏 跨域解决方案
1. cors
- 目前最常用的一种解决办法,通过设置后端允许跨域实现。
- res.setHeader('Access-Control-Allow-Origin', '*');
- res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");
2. node中间件、nginx反向代理
- 跨域限制的时候浏览器不能跨域访问服务器,node中间件和nginx反向代理,都是让请求发给代理服务器,静态页面面和代理服务器是同源的,然后代理服务器再向后端服务器发请求,服务器和服务器之间不存在同源限制。
3. JSONP
- 利用的原理是script标签可以跨域请求资源,将回调函数作为参数拼接在url中。后端收到请求,调用该回调函数,并将数据作为参数返回去,注意设置响应头返回文档类型,应该设置成javascript。
4. postmessage
- H5新增API,通过发送和接收API实现跨域通信。
😏跨域场景
- 前后端分离式开发、调用第三方接口
总结:同源限制、协议、域名、端口、CORS、node中间件、JSONP、postmessage