js基础面试题110道

　　1。documentload和documentready的区别
　　参考答案：文档解析过程中，ready在加载图片等外部资源前触发，load在之后触发。如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的，但是页面中有文件就不一样了，所以还是推荐大家在工作中用ready
　　解析：
　　DOM文档解析：解析html结构加载脚本和样式文件解析并执行脚本构造html的DOM模型ready加载图片等外部资源文件页面加载完毕load
　　页面加载完成有两种事件
　　1。load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
　　缺点：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
　　代码形式：documentload（document）。load（function（）｛。。。code。。。｝）
　　2。（document）。ready（）是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行
　　在原生的jS中不包括ready（）这个方法，Jquery才有，jquery中有（）。ready（function）。
　　代码形式为：documentready（document）。ready（function（）｛。。。code。。。｝）documentready简写（function（）｛。。。code。。。｝）
　　参与互动
　　2。JavaScript中如何检测一个变量是一个String类型？
　　参考答案：三种方法（typeof、constructor、Object。prototype。toString。call（））
　　解析：typeoftypeof（123）stringtruetypeof123stringtrueconstructor123。constructorStringtrueObject。prototype。toString。call（）Object。prototype。toString。call（123）〔objectString〕true
　　参与互动
　　3。请用js去除字符串空格？
　　参考答案：replace正则匹配方法、str。trim（）方法、JQ方法：。trim（str）方法
　　解析：
　　方法一：replace正则匹配方法
　　去除字符串内所有的空格：strstr。replace（sg，）；
　　去除字符串内两头的空格：strstr。replace（ssg，）；
　　去除字符串内左侧的空格：strstr。replace（s，）；
　　去除字符串内右侧的空格：strstr。replace（（s）g，）；
　　示例：varstr66；varstr1str。replace（sg，）；console。log（str1）；66varstr66；varstr1str。replace（ssg，）；console。log（str1）；66输出左右侧均无空格varstr66；varstr1str。replace（s，）；console。log（str1）；66输出右侧有空格左侧无空格varstr66；varstr1str。replace（（s）g，）；console。log（str1）；66输出左侧有空格右侧无空格
　　方法二：str。trim（）方法
　　trim（）方法是用来删除字符串两端的空白字符并返回，trim方法并不影响原来的字符串本身，它返回的是一个新的字符串。
　　缺陷：只能去除字符串两端的空格，不能去除中间的空格
　　示例：varstr66；varstr1str。trim（）；console。log（str1）；66输出左右侧均无空格
　　方法三：JQ方法：。trim（str）方法
　　。trim（）函数用于去除字符串两端的空白字符。
　　注意：。trim（）函数会移除字符串开始和末尾处的所有换行符，空格（包括连续的空格）和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。
　　示例：varstr66；varstr1。trim（str）；console。log（str1）；66输出左右侧均无空格
　　参与互动
　　4。js是一门怎样的语言，它有什么特点
　　参考答案：
　　1。脚本语言。JavaScript是一种解释型的脚本语言，C、C等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
　　2。基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
　　3。简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
　　4。动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
　　5。跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。
　　参与互动
　　5。和的不同
　　参考答案：是抽象相等运算符，而是严格相等运算符。运算符是在进行必要的类型转换后，再比较。运算符不会进行类型转换，所以如果两个值不是相同的类型，会直接返回false。使用时，可能发生一些特别的事情，例如：11；true1〔1〕；true1true0；true00；true0true
　　如果你对和的概念不是特别了解，建议大多数情况下使用
　　参与互动
　　6。怎样添加、移除、移动、复制、创建和查找节点？
　　参考答案：
　　1）创建新节点createDocumentFragment（）创建一个DOM片段createElement（）创建一个具体的元素createTextNode（）创建一个文本节点
　　2）添加、移除、替换、插入appendChild（）添加removeChild（）移除replaceChild（）替换insertBefore（）插入
　　3）查找getElementsByTagName（）通过标签名称getElementsByName（）通过元素的Name属性的值getElementById（）通过元素Id，唯一性
　　参与互动
　　7。事件委托是什么
　　参考答案：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
　　解析：
　　1、那什么样的事件可以用事件委托，什么样的事件不可以用呢？适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不用事件委托了。
　　2、为什么要用事件委托1。提高性能ulli苹果lili香蕉lili凤梨liulgooddocument。querySelector（ul）。onclick（event）｛lettargetevent。targetif（target。nodeNameLI）｛console。log（target。innerHTML）｝｝baddocument。querySelectorAll（li）。forEach（（e）｛e。onclickfunction（）｛console。log（this。innerHTML）｝｝）2。新添加的元素还会有之前的事件。
　　3、事件冒泡与事件委托的对比事件冒泡：box内部无论是什么元素，点击后都会触发box的点击事件事件委托：可以对box内部的元素进行筛选
　　4、事件委托怎么取索引？ulidulliaaaaaaaalili事件委托了点击当前，如何获取这个点击的下标liliccccccccliulwindow。onloadfunction（）｛varoUldocument。getElementById（ul）；varaLioUl。getElementsByTagName（li）；oUl。onclickfunction（ev）｛varevevwindow。vartargetev。targetev。srcEif（target。nodeName。toLowerCase（）li）｛for（vari0；iaLi。i）if（aLi〔i〕target）if（index0）alert（我的下标是第index个）；target。style。｝｝｝
　　拓展：键盘事件：keydownkeypresskeyup鼠标事件：mousedownmouseupmousemovemouseoutmouseover
　　参考
　　参与互动
　　8。require与import的区别
　　参考答案：两者的加载方式不同、规范不同
　　第一、两者的加载方式不同，require是在运行时加载，而import是在编译时加载
　　require（。a）（）；a模块是一个函数，立即执行a模块函数
　　vardatarequire（。a）。a模块导出的是一个对象
　　vararequire（。a）〔0〕；a模块导出的是一个数组哪都行
　　
　　
　　import｛a，b，c｝from。a；
　　import｛defaultasalias，aasaa，b，c｝from。a；用在开头
　　第二、规范不同，require是CommonJSAMD规范，import是ESMAScript6规范
　　第三、require特点：社区方案，提供了服务器浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入输出的变量，无法进行静态优化。
　　import特点：语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。
　　参与互动
　　9。javascript对象的几种创建方式
　　参考答案：
　　第一种：Object构造函数创建varPersonnewObject（）；Person。nameNPerson。age29；
　　这行代码创建了Object引用类型的一个新实例，然后把实例保存在变量Person中。
　　第二种：使用对象字面量表示法varPerson｛｝；相当于varPersonnewObject（）；varPerson｛name：Nage：29；｝
　　对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。也就是说，第一种和第二种方式创建对象的方法其实都是一样的，只是写法上的区别不同
　　在介绍第三种的创建方法之前，我们应该要明白为什么还要用别的方法来创建对象，也就是第一种，第二种方法的缺点所在：它们都是用了同一个接口创建很多对象，会产生大量的重复代码，就是如果你有100个对象，那你要输入100次很多相同的代码。那我们有什么方法来避免过多的重复代码呢，就是把创建对象的过程封装在函数体内，通过函数的调用直接生成对象。
　　第三种：使用工厂模式创建对象functioncreatePerson（name，age，job）｛varonewObject（）；o。o。o。o。sayNamefunction（）｛alert（this。name）；｝；｝varperson1createPerson（Nike，29，teacher）；varperson2createPerson（Arvin，20，student）；
　　在使用工厂模式创建对象的时候，我们都可以注意到，在createPerson函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第四种创建对象的模式。
　　第四种：使用构造函数创建对象functionPerson（name，age，job）｛this。this。this。this。sayNamefunction（）｛alert（this。name）；｝；｝varperson1newPerson（Nike，29，teacher）；varperson2newPerson（Arvin，20，student）；
　　对比工厂模式，我们可以发现以下区别：
　　1。没有显示地创建对象
　　2。直接将属性和方法赋给了this对象
　　3。没有return语句
　　4。终于可以识别的对象的类型。对于检测对象类型，我们应该使用instanceof操作符，我们来进行自主检测：alert（person1instanceofObject）；turealert（person1instanceofPerson）；turealert（person2instanceofObject）；turealert（person2instanceofObject）；ture
　　同时我们也应该明白，按照惯例，构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。
　　那么构造函数确实挺好用的，但是它也有它的缺点：
　　就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存。于是出现了第五种创建对象的方法
　　第五种：原型创建对象模式functionPerson（）｛｝Person。prototype。nameNPerson。prototype。age20；Person。prototype。Person。prototype。sayNamefunction（）｛alert（this。name）；｝；varperson1newPerson（）；person1。sayName（）；
　　使用原型创建对象的方式，可以让所有对象实例共享它所包含的属性和方法。
　　如果是使用原型创建对象模式，请看下面代码：functionPerson（）｛｝Person。prototype。nameNPerson。prototype。age20；Person。prototype。Person。prototype。sayNamefunction（）｛alert（this。name）；｝；varperson1newPerson（）；varperson2newPerson（）；person1。nameGalert（person1。name）；Greg来自实例alert（person2。name）；Nike来自原型
　　当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。
　　这时候我们就可以使用构造函数模式与原型模式结合的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性
　　第六种：组合使用构造函数模式和原型模式functionPerson（name，age，job）｛this。this。this。｝Person。prototype｛constructor：Person，sayName：function（）｛alert（this。name）；｝；｝varperson1newPerson（Nike，20，teacher）；
　　解析：参考
　　参与互动
　　10。JavaScript继承的方式和优缺点
　　参考答案：六种方式一、原型链继承缺点：1。引用类型的属性被所有实例共享2。在创建Child的实例时，不能向Parent传参二、借用构造函数（经典继承）优点：1。避免了引用类型的属性被所有实例共享2。可以在Child中向Parent传参缺点：1。方法都在构造函数中定义，每次创建实例都会创建一遍方法。三、组合继承优点：1。融合原型链继承和构造函数的优点，是JavaScript中最常用的继承模式。四、原型式继承缺点：1。包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。五、寄生式继承缺点：1。跟借用构造函数模式一样，每次创建对象都会创建一遍方法。六、寄生组合式继承优点：1。这种方式的高效率体现它只调用了一次Parent构造函数，并且因此避免了在Parent。prototype上面创建不必要的、多余的属性。2。与此同时，原型链还能保持不变；3。因此，还能够正常使用instanceof和isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式