javascript数据类型划分数据类型的原因数据类型分类1. 简单数据类型(1)number数据类型(2)string数据类型常用的字符串逻辑(3)Boolean数据类型条件控制语句ifswitch(4)undefeind数据类型(5)null数据类型(6)es6新增的简单数据类型symbol基本包装对象简单数据类型的相互转化[1]数据类型的隐式转化[1]number类型的隐式转化触发点[2]string类型的触发点[3]boolean类型的触发点[2]强制数据类型转化[1]number类型的强制转换[2]string类型的强制转换[3]boolean类型的强制转换(比较常用)2.引用数据类型[1]Array[2]Set[3]Function[4]Object[5]Map3.数据存储方式引用类型深浅拷贝数据比较数据类型检测其他定义变量js中的输入输出️哪些输入输出比较全等和非全等(非全等的转换规则)mstjs中的输入输出️哪些JS的数据类型有哪些如何判断JS变量的数据类型typeof的取值是哪些数据类型的隐士转化强制转化转换规则“ i ” 和 “ i ”的区别。breakrenturncontinue三者的区别递归请讲一下JavaScript的闭包。有什么特点对页面有什么影响⭐️请讲将数组与伪数组的区别数组的常用API你知道哪些⭐️Array在ES6新增遍历的API它们每个的用法返回值参数ES5/ES6新增的哪些东西是你平时开发中常用到的⭐️请讲讲原型链请讲讲继承的方法⭐️⭐️⭐️⭐️⭐️请讲讲JavaScript作用域请讲讲变量的声明提升创建对象的方法有哪些请讲讲ECMAScript的内置对象⭐️⭐️⭐️⭐️⭐️列举浏览器对象模型BOM里常用的至少四个对象并列举window对象的常用方法至少五个⭐️⭐️⭐️⭐️⭐️事件⭐️⭐️⭐️⭐️⭐️this请讲一下JavaScript的同源策略⭐️函数Event Loop事件循环是什么Promise前端调试bug的方法数据类型划分数据类型的原因不同的数据类型具有不同的运算方式与存储方式而计算机不能够识别不同类型的数据需要人为加以划分数据类型分类数据类型分为简单数据类型与引用数据类型(复杂数据类型)两种。1. 简单数据类型[1]特点一个变量只能存储一个值[2]分类6个简单数据类型(1)number数据类型number数据类型概括(2)string数据类型string数据类型概括常用的字符串逻辑(3)Boolean数据类型布尔类型的值常用于表示现实中的矛盾态相互对应的两种状态数据truefalse注意点平时没有意义只有在和条件控制语句结合使用时才有意义条件控制语句ifif条件判断语句switchswitch条件判断语句(4)undefeind数据类型数据undefined什么时候数据为undefined[1]在定义了变量但是没有赋值时变量的值为undefiend[2]在访问对象中没有定义的属性时属性值为undefiend[3]在访问数组的超出下标的值的时候值为undefined(5)null数据类型数据null什么时候的值为null在使用prompt获取用户输入的数据用户点击取消的时候获取的数据为null(6)es6新增的简单数据类型symbolSymbol数据类型详解[1]作用用于防止属性名冲突而产生的数据类型;[2]特点(1)Symbol数据类型不能使用 new关键字原因Symbol数据类型没有基本包装对象Symbol虽然没有基本包装对象但是Symbol可以作为修改后的this指向(很奇怪哦)functioneditthis(){console.log(this)}editthis.call(Symbol(xx))// {Symbol(xx)}(2)使用Symbol方法生成数据即使是参数相同 生成的数据也不相等eg:letsySymbol(xx)letsy1Symbol(xx)console.log(sysy1)//false(3)数据类型为symbolconsole.log(typeofsy)// symbol数据类型(4)其主要作用是为了 避免对象属性名相同 而创建的eg1若是在对象中使用相同的属性名后面的属性会把前面属性的值覆盖letperson{111:111,111:222}console.log(person)//{111‘222’}eg2若是使用symbol数据类型作为属性就不用担心数据被覆盖的问题letsy2Symbol(xx)letperson2{[sy2]:111,[Symbol(xx)]:222}console.log(person2)//{Symbol(xx):111,Symbol(xx):222}(5)注意点在使用symbol数据类型的值作为对象属性的时候不要使用点语法(原因symbol没有基本包装类型)eg:letsy2Symbol(xx)letperson2{[sy2]:111,[Symbol(xx)]:222}console.log(person2)//{Symbol(xx):111,Symbol(xx):222}// 在使用Symbol数据类型时不能够使用. 符号要用 []console.log(person2[sy2])//111console.log(person2[Symbol(xx)])// 这样获取---由于symbol生成的数据各不相同所以值为undefiend基本包装对象leta111a.num222console.log(a,a.num)// a undefined.操作符是对象用来添加/访问属性值的function,array本质也是对象但是上述示例中a作为一个简单数据类型为什么使用.操作符也不会报错呢这是因为当JS通过.访问符进行访问时如果不是对象JS会将数据封装成一个对象封装成对象之后就可以使用.访问符进行访问了。JavaScript中有三种基本包装类型number简单数据类型通过Number构造函数将数据封装为对象string简单数据类型通过String构造函数将数据封装为对象boolean简单数据类型通过Boolean构造函数将数据封装为对象null和undefined js没有为其提供相应的的构造函数(也就是说null和undefined没有包装类型)基本包装类型的执行原理1)在基本数据类型进行点操作时JS会使用当前数据临时包装一个对象再在这个对象上使用点语法2当本次的点操作结束后会马上销毁临时包装的对象3看起来什么都没有改变这也就是为什么上述示例给a.num赋予了值但是打印的s时候值还是undefined的原因。[1]定义了一个变量a[2]a使用了点语法js内部使用基本包装类型将a封装为1个对象调用点语法[3]使用结束销毁基本包装类型此时 a10[4]打印a.num时又使用了点语法又封装为基本包装类型但是这个包装类型中a对象的num属性没有被赋值所以值为undefinedleta10console.log(typeofa)// numbera.num22console.log(typeofa);// numberconsole.log(a.num);//undefined我们也可以通过new关键字创建基本包装类型的对象varboolObjnewBoolean(true);console.log(boolObj);// 输出: Boolean { true }console.log(typeofboolObj);// 输出: object但在大多数情况下直接使用基本数据类型更为常见和推荐。这是因为基本包装对象作为对象类型具有对象的特性例如它们是可变的并且比较时需要考虑引用相等性。需要注意的是基本包装对象和直接用new关键字创建的对象有所不同, 使用new创建的是持久的对象而基本包装对象是临时的只在调用方法时存在。leta10console.log(typeofa)//numberletobjAnewNumber(a)console.log(typeofobjA)// Objectundefined没有基本包装类型在使用点语法会报错letaundefineda.num10console.log(a)// Cannot set properties of undefined (setting num)简单数据类型的相互转化1.定义数据类型的转化是将一种数据类型转化为另一种数据类型2.为什么要进行数据类型的转化因为在js中 只有相同数据类型才可以进行直接计算[1]数据类型的隐式转化1.定义JS在进行计算时数据类型不同自行转换[1]number类型的隐式转化触发点当进行、运算时若是存在运算数为字符串时触发string类型隐士转化否则触发string类型的隐士转换其余算术运算符都会触发number类型的隐式转换易错点1nullundefined的结果在个人看来触发隐式转化(null转化为0undefiend转化为NaN,比较不应该是false)但是实际并不是这样而是(在js规范中提到在比较相等性之前不能将null与undeined转化为其他任何值并规定undefined与null是相等的null与undefiend都代表无效的值)易错点2true10的结果true1的结果实际上在进行比较的时候会触发unmber隐式转化先将true转化为数字1—所以true等于10的结果为false而true1的结果为true[2]string类型的触发点当在进行 、进行运算–当其中一个值(只要有string类型就会触发)为string类型会触发隐式转换举例说明2结果为NaN —因为即使是运算没有string类型的参数也不会触发string的隐式转化functionadd(n1,n2){console.log(n1n2)// NaN}add(1)结果为NaN1和undefined在遇到“”运算符时会触发unmder数据类型隐士转化(没有字符串)undefined转化为NaNNaN与任何值计算结果都为NaN举例说明2 :计算 从左向右 进性计算 letres100510console.log(res);//10510[1]1005 没有字符串不会触发隐式转化值为105[2]105‘10’ (‘10’为字符串会触发隐士转化) ‘105’‘10’10510—字符串拼接[3]boolean类型的触发点当一个数据作为条件表达式时会触发boolean隐式转换例题1leti0letj0i?i:ji console.log(i)console.log(j)(1)i —先进行运算再自加(不是进性完整个式子运算而是当前这步)(2)i0 作为条件触发boolean的隐士转化为false i1(3)执行ji(4)打印 11例题2console.log(!10)10转化为boolean为true,取反为false[2]强制数据类型转化1.使用场景当隐士转换不符合我们的需求时使用强制转换—一般是 时[1]number类型的强制转换语法 Number(数据)若是不传值默认为0易错点undefiend强制转化为number类型的结果为NaN注在number类型进行强制转化时只有 非全数字字符串与undefined会转化为NaNnull在进行转化时的结果也是0转化结果 能合理转换就进行转换转换不了就转换为NaN(NaN设计的目标就是用于接收这种无法转换的情况)举例说明console.log(Number())// 0console.log(Number())// 0console.log(Number(0))// 0console.log(Number(true))//1console.log(Number(false))//0console.log(Number(undefined))//NaNconsole.log(Number(null))//0console.log(Number(a))// NaN语法parseInt(str, redix)/ parseFloat(str,radix)parseInt 与parseFloat的作用是提取字符串中以数字开头的数字parseInt()// NaNparseInt(111)// 111parseInt(aaa)// NaNparseInt(true)// 相当于 parseInt(true) NaNparseInt(false)// 相当于parseInt(false) NaNparseInt(undefined)// 相当于parseInt(‘undefined’) NaN[2]string类型的强制转换语法 String(数据)若是不传值默认为’(空字符串)转化结果 基本全部加‘’变为字符串举例说明console.log(String())// console.log(String(0))// 0console.log(String(true))//trueconsole.log(String(false))//falseconsole.log(String(undefined))//undefinedconsole.log(String(null))//null数组得1toString方法在遇到null与undefiend时会将其转化为空字符串进行拼接。[3]boolean类型的强制转换(比较常用)语法 Boolean(数据)若是不传值默认为false易错点字符串空字符串转化为false,只要不是空字符串(带空格、0、、、、都是true)‘’—false’ —true‘0’—true‘\n’—true数字除了0都是trueundefined、null都是false复杂数据类型true[]:true{}:true转化结果 有意义的转化为true没有意义的转化为false举例说明scriptconsole.log(Boolean())//falseconsole.log(Boolean(0))// falseconsole.log(Boolean(0))//trueconsole.log(Boolean())//flaseconsole.log(Boolean(NaN))//falseconsole.log(Boolean(undefined))//falseconsole.log(Boolean(null))//falseconsole.log(Boolean())console.log(Boolean( ))console.log(Boolean([]))console.log(Boolean(\n))/script2.引用数据类型[1]Arrayjs-数据类型(数组)[2]Setset是Es6新增·的数据类型js_数据类型(Set)[3]Functionjs-数据类型(函数)[4]Objectjs-数据类型(对象)[5]MapMap为Es6新增的数据类型js-数据类型(Map)3.数据存储方式引用类型深浅拷贝引用类型的深浅拷贝数据比较比较相等\全等数据类型检测数据类型检测详解其他定义变量定义变量的三种方式js中的输入输出️哪些输入在js中输入主要是有以下三种方式以弹窗框的形式给用户提供一个输入框输入信息prompt(placeholder,defaultvalue)上述函数弹出确认框形式如下点击取消返回null点击确定返回value值buttonidprompt输入/buttonscriptconstbtndocument.querySelector(#prompt)btn.onclickfunctiongetInfo(){constinfoprompt(请输入您的信息,111)console.log(info)}/scriptconfirm确认弹出框confirm(description)若是点击取消返回false点击确定返回truebuttonidprompt/buttonscriptconstbtndocument.querySelector(#prompt)btn.onclickfunctiongetInfo(){constinfoconfirm(您确定还要继续吗)console.log(info)}/scriptinput/textarea/select等表单元素inputtypetextplaceholder请输入你的信息idinfobuttonidbtn获取信息/buttonscriptconstbtndocument.querySelector(#btn)btn.onclickfunction(){console.log(document.querySelector(#info).value)}/script输出比较全等和非全等(非全等的转换规则) mstjs中的输入输出️哪些JS的数据类型有哪些如何判断JS变量的数据类型数据类型检测详解typeof的取值是哪些// [1] 判断一个数据是否是number\string\undefiend\boolean 直接使用typeof即可console.log(typeof(num)number)// trueconsole.log(typeof(str)string)// trueconsole.log(typeof(bol)boolean)// trueconsole.log(typeof(unde)undefined)// true// [2] 判断一个元素是否为nullconsole.log(typeof(nul)objectnulnull)// true// [3]判断一个元素是否为数组console.log(Array.isArray(arr))// true// [4]判断一个元素是否为函数console.log(typeof(fun)function)// true// [5]判断一个元素是否为对象console.log(typeof(obj)objectobj!Array.isArray(obj))// true数据类型的隐士转化强制转化【本章 [1]数据类型的隐士转化 [2] 强制数据类型转化】隐士转化条件判断 boolean存在一个当其中一个值(只要有string类型就会触发)为string类型 进行、 string其他运算 或、运算时没有字符串 number强制转化数字Number(). 只有不能转化的字符和numdfined转化为NaNparseInt() parseFloat()字符串 String() 全部转化为字符串转换规则“ i ” 和 “ i ”的区别。答案i是先引用i的值而后将i递增1。i是先将i的值加1而后引用它的值。breakrenturncontinue三者的区别break\continue 循环return 函数问题forEach中的return递归递归就是函数调用自身别人写的递归文章使用递归完成斐波那契数列使用递归实现x的n次幂functionpow(x,n){if(n1){returnx;}else{returnx*pow(x,n-1);}}alert(pow(2,3));//8请讲一下JavaScript的闭包。有什么特点对页面有什么影响⭐️闭包闭包获取的是对变量的引用而不是对变量的值请讲将数组与伪数组的区别伪数组数组的常用API你知道哪些⭐️数组常用的方法concat-toString\join 合成字符串push unshift shift pop splice 改变原数组slice 切割获取某些元素reverse 转换改变原数组sort 排序改变原数组forEach\every\includes\some\finedIndex es6新增Array在ES6新增遍历的API它们每个的用法返回值参数es6新增的数组遍历方法constarr[1,2,3,1,2]// 1.map 返回对数据的映射constnameArrarr.map(item({name:item}))// { {name: 1}, {name: 2}, {name: 3}, {name: 1}, {name: 2} }// 2.filter 返回符合条件的元素集合constnameArr1nameArr.filter(item(item.name1))// { {name: 1}, {name: 1}}// 3. forEach 无返回值就是循环便利// 4. every 判断是否全部符合条件 some 判断是否存在符合条件的元素// 5.includes 查询是否符合条件注意这里比较不一样 includes(查找元素 开始查询的下标) 引用元素没办法查找使用some更加灵活console.log(nameArr.every(itemitem.name1),nameArr.some(itemitem.name1))// false true// 6.findIndex lastFindIndex 判断是否存在符合条件的元素 有返回下标 没有返回-1// reducearr.reduce(function(pre, cur, index, arr){}, init) 返回最终的计算结果ES5/ES6新增的哪些东西是你平时开发中常用到的⭐️es6新特性请讲讲原型链原型链构造函数被创建 系统调用Object构造函数创建一个与之对应的原型对象空对象构造函数请讲讲继承的方法⭐️⭐️⭐️⭐️⭐️继承请讲讲JavaScript作用域作用域闭包请讲讲变量的声明提升声明变量的三种方式声明函数的2种方式函数提升与变量提升创建对象的方法有哪些创建对象的三种方式请讲讲ECMAScript的内置对象⭐️⭐️⭐️⭐️⭐️内置对象列举浏览器对象模型BOM里常用的至少四个对象并列举window对象的常用方法至少五个⭐️⭐️⭐️⭐️⭐️BOMWindow对象是最顶级的对象navigator: appVision appNamehistorylocationdocument方法console.log/alertprompt\confirmisNaNparseInt\parseFloatencodeURL\decodeURL事件⭐️⭐️⭐️⭐️⭐️事件事件绑定方式以及区别 ✅e.target与this如何阻止事件的默认行为 阻止事件冒泡/捕获JS事件流介绍事件委托是什么事件类型thisthis指向请讲一下this的指向问题全局中的this指向window普通函数 谁调用指向谁构造函数 实例化对象箭头函数 没有this指向通过作用域链寻找上一级的this指向vue实例化对象中函数的this vue实例化对象React函数的this指向window react为什么使用箭头函数的原因DOM事件函数的this 绑定在谁身指向谁 ⭐️更改this指向的方法有哪些callapplybind有什么区别请讲一下JavaScript的同源策略⭐️同源策略同源策略解决跨域的好办法访问权控制允许域名⭐️window.postMessage⭐️JSONP开发环境代理函数函数创建函数的几种方式箭头函数class构造函数Event Loop事件循环是什么事件循环PromisePromiseasync/awaitfetchwindow窗口控制方法如何中断一个请求vite前端调试bug的方法传送门