1.未声明和未定义有什么区别？undefined：声明了变量，但没有赋值undeclared：不声明变量直接使用vara；//未定义;//b未定义2、let&const和var的区别？var有变量提升，同一个变量可以重复声明，声明的变量可以改变。let没有变量提升，同一个变量不能重复声明，声明的变量可以改变。const没有变量提升，同一个变量不能重复声明，声明的基本数据类型不能改变，引用类型的属性可以改变，变量不能声明不赋值3.什么是获取DOM元素的方法？方法说明document.getElementById(id)getdomdocumentbyid.getElementsByTagName(tagName)getdomdocumentbytagname.getElementsByClassName(class)getdomdocument.getElementsByName(name)byclass选择器获取domdocument.querySelectorAll(selector)通过选择器获取dom4,以及操作DOM元素的方法有哪些方法说明createElement创建一个标签节点createTextNode创建一个文本节点cloneNode(deep)复制一个节点，连同属性和值，deep为真时，将与后代一起复制节点。如果不传或传false，则只复制当前节点。createDocumentFragment创建文档片段节点appendChild附加子元素insertBefore插入元素在前面removeChild删除子元素replaceChild替换子元素getAttribute获取节点属性createAttribute创建属性setAttribute设置节点属性romoveAttribute删除节点属性element.attributes生成属性到类数组对象中5、DOM有哪些类型？元素节点Node.ELEMENT_NODE(1)属性节点Node.ATTRIBUTE_NODE(2)文本节点Node.TEXT_NODE(3)CDATA节点Node.CDATA_SECTION_NODE(4)实体引用节点Node.ENTRY_REFERENCE_NODE(5)实体名称节点Node.ENTITY_NODE(6)处理指令节点Node.PROCESSING_INSTRUCTION_NODE(7)注释节点Node.COMMENT_NODE(8)文档节点Node.DOCUMENT_NODE(9)文档类型节点Node.DOCUMENT_TYPE_NODE(10)文档片段节点Node.DOCUMENT_FRAGMENT_NODE(11)DTD声明节点Node.NOTATION_NODE(12)六、JS作用域和作用域Chain作用域是什么？在Javascript中，作用域分为全局作用域和函数作用域。全局作用域：代码可以在程序的任何地方访问，window对象的内置属性属于全局作用域。函数作用域：只能在固定的代码片段中访问什么是作用域链？一般情况下，变量的值是在创建变量的函数作用域中取的，但是如果在当前作用域中没有找到该值，则会在上层作用域中查找，直到找到全局作用域，这样一个搜索过程形成的链称为作用域链varx=10;functionfn(){console.log(x);}functionshow(f){varx=20;F（）;//10}显示(fn);7.数组的拼接和切片有什么区别？方法参数splicesplice(start,num,item1,item2,...)sliceslice(start,end)8、substr和substring的区别？方法参数substrsubstr(start,length)substringsubstring(start,end)9.includes比indexOf有什么优势？包括可以检查测量NaN，indexOf检测不到NaN，includes使用Number.isNaN来匹配NaN10.下面代码输出的结果是什么？for(vari=0;i<3;i++){setTimeout(function(){console.log(i);},0);};答案：3,3,3解决方案for(leti=0;i<3;i++){setTimeout(function(){console.log(i);},0);};//012for(vari=0;i<3;i++){(function(i){setTimeout(function(){console.log(i);},0,i)})(i)};//01211.什么是异步/等待？它解决了什么问题？它是generator+Promise的语法糖。它的主要功能是以同步方式执行异步操作。await只能在异步函数中使用。异步函数的执行将返回一个promise，其值由函数的返回值决定。12.JS懒加载有哪些方法？1.：在script标签中添加async属性，则后续文档元素的加载渲染过程将与script的加载执行并行进行。js(asynchronously)2.：在script标签中添加defer属性，加载后续文档元素的过程将与script.js的加载，但是script.js的执行必须在所有元素解析完成后，在触发DOMContentLoaded事件之前完成。3、动态创建脚本标签：当DOMContentLoaded事件被触发时，会生成一个脚本标签并渲染在页面上。4.setTimeout定时器延迟代码执行。13、为什么可以创建newoperator？实例对象？分析new的整个过程：1.创建一个空对象2.继承构造函数原型3，this指向obj，并调用构造函数4，返回对象简单实现new：functionmyNew(fn,...args){//第一步：创建一个空对象constobj={}//第二步Step:继承构造函数的原型obj.__proto__=fn.prototype//Step3:this指向obj，调用构造函数fn.apply(obj,args)//Step4:返回对象returnobj}14.什么是文件碎片？它是什么：临时存放创建的dom元素的容器。使用document.createDocumentFragment()创建有什么用：先在文档片段中添加大量需要添加的元素，然后将文档片段添加到需要插入的位置。大大减少dom操作，提高性能varoFragmeng=document.createDocumentFragment();for(vari=0;i<10000;i++){varop=document.createElement("span");varoText=document.createTextNode(i);op.appendChild(oText);//先添加到文档片段oFragmeng.appendChild(op);}//一次性添加到文档document.body.appendChild(oFragmeng);15.宏任务和微任务是什么？Macrotask#BrowserNodeI/O??setTimeout??setInterval??setImmediate??requestAnimationFrame??microtask#BrowserNodePromise.prototype.thencatchfinally??process.nextTick??MutationObserver??16,Object.define,keyProperty)(目标,键属性),options可以传递哪些参数？value：设置target[key]的初始值get：调用target[key]时触发set：设置target[key]时触发writable：默认false，该属性只有为true时才能被赋值运算符修改enumerable：默认false，只有为true时才能枚举该属性configurable：默认为false，这个property可以是true描述符只能被修改或删除。17、什么是防抖？什么是节流？操作说明场景防抖频繁触发事件，但仅以最后一次为准1、电脑熄屏的时间，每次电脑移动重新计算时间。2、输入框频繁变化可以触发事件。可以加防抖。频繁点击按钮提交表单可以加防抖节流频繁触发事件，但是只能偶尔触发一次。1.滚动频繁请求列表可以添加节流。偶尔做一次18.什么是高阶函数？简单地实施一个？高阶函数：JavaScript函数实际上指向一个变量。由于变量可以指向函数，而函数的参数可以接收变量，那么一个函数可以接收另一个函数作为参数，这样的函数称为高阶函数。//简单的高阶函数functionadd(x,y,f){returnf(x)+f(y);}//用代码验证：add(-5,6,Math.abs);//11和数组map、reduce、filter一样，都是高阶函数。19.什么是函数柯里化？简单地实施一个？柯里化是将一个接受多个参数的函数转换为一个接受单个参数的函数（原函数的第一个参数）并返回一个接受其余参数并返回结果的新函数的技术。//普通加函数functionadd(x,y){returnx+y}//柯里化后functioncurryingAdd(x){returnfunction(y){returnx+y}}add(1,2)//3curryingAdd(1)(2)//3个好处1.参数复用//正常正则验证字符串reg.test(txt)//正常函数check(reg,txt){returnreg.test(txt)}check(/\d+/g,'test')//falsecheck(/[a-z]+/g,'test')//true//在柯里化函数curryingCheck(reg){returnfunction(txt){returnreg.test(txt)}}varhasNumber=curryingCheck(/\d+/g)varhasLetter=curryingCheck(/[a-z]+/g)hasNumber('test1')//truehasNumber('testtest')//falsehasLetter('21212')//false2,延迟执行Function.prototype.bind其实就是一个柯里化函数的实现例子sayKey(key){console.log(this[key])}constperson={name:'Sunshine_Lin',age:23}//callisnotcoliedsayKey.call(person,'name')//立即输出Sunshine_LinsayKey.call(person,'age')//立即输出23//bind是coliedconstsay=sayKey.bind(person)//不执行//想执行就执行say('name')//Sunshine_Linsay('age')//2320，箭头函数数字和普通函数的区别？1.箭头函数不能用作构造函数或new2。箭头函数没有自己的this3。箭头函数没有参数对象。4.箭头函数没有原型对象。21、Symbol的应用场景是什么？使用Symbols作为属性名使用Symbols作为变量使用Symbols实现私有属性22.AMD和CMD的区别？模块化代表应用特性AMDrequire.js1，AMD的api默认为一个当多个2.依赖前端，异步执行CMDsea.js1，CMD的API严格区分，尊重单一职责2.依赖就近，按需加载，以及同步执行23.Commonjs和ES6Module有什么区别？1.前者是复制输出，后者是引用输出2.前者可以修改导入值，后者是只读3.前者是运行时，后者是编译时24.为什么Commonjs不适合浏览器varmath=require('数学');数学.add(2,3);第二行math.add(2,3)在第一行require('math')之后运行，因此您必须等待math.js加载。也就是说，如果加载时间很长，那么整个应用就只是坐在那里等待。这在服务器端是没有问题的，因为所有的模块都存储在本地硬盘中，可以同步加载，等待的时间就是硬盘的读取时间。但是，对于浏览器来说，这是一个很大的问题，因为模块是放在服务器端的，等待时间取决于网速，可能需要很长时间，浏览器处于“假死”状态.因此，浏览器端的模块不能使用“同步加载”（synchronous），只能使用“异步加载”（asynchronous）。这就是AMD规范诞生的背景。25.函数的长度是多少？length是函数对象的一个??属性值，是指函数必须传入多少个参数，即形参的个数。形参的个数不包括剩余参数的个数，只包括第一个有默认值的参数之前的个数。26.深度遍历和广度遍历有什么区别？对于算法来说，无非就是time-for-spacespace-for-time1.深度优先不需要记住所有节点，所以占用空间小，而广度优先需要先记录所有节点，然后占用空间大。2.Depth-first有回溯操作（没有路要走，需要回头）所以相对来说时间会长一点3.Depth-first采用stack的形式，即first-in-last-out4.广度优先采用队列的形式，即先进先出27.在JS中有哪些设计模式？创建模式：该模式抽象了对象实例化过程。结构模式：这些模式处理不同的类和对象以提供新功能。行为模式：也称为发布-订阅模式，定义了一个被观察对象与多个观察者之间的一对多对象关系。并行设计模式：这些模式处理多线程编程范例。架构设计模式：这些模式是用来处理架构设计的28.如何在JS中将一个页面重定向到另一个页面？1.使用location.href:window.location.href="https://www.baidu.com/")2.使用location.replace:window.location.replace("https://www.baidu.com/;")29.JS中鼠标事件的坐标？属性描述兼容性offsetX以当前目标元素的左上角为原点，定位x轴坐标兼容除Mozilla以外的所有元素。窗口左上角为原点，定位的x轴坐标兼容clientY。浏览器可见窗口的左上角是原点。定位的y轴坐标兼容pageX。Doument对象的左上角是原点。定位的x轴坐标兼容除IE以外的pageY。doument对象左上角为原点，定位y轴坐标兼容screenX除IE外。原点为电脑屏幕左上角，定位x轴坐标（多屏会影响）完全兼容screenY。电脑屏幕左上角为原点，定位y轴坐标完全兼容layerX最近的绝对定位父元素（如果没有文档对象），左上角为元素，x轴坐标是最近的绝对定位的Mozilla和SafarilayerY的父元素（如果没有文档对象）左上角是元素，定位y轴坐标Mozilla和Safari30，JS中元素视图的每个尺寸？属性说明offsetLeft获取当前元素到定位父节点左侧方向的距离offsetTop获取当前元素到定位父节点顶部方向的距离offsetWidth获取当前元素宽度+左右padding+leftandrightborder-widthoffsetHeight获取当前元素高度+上下padding+上下border-widthclientWidth获取当前元素宽度+左右paddingclientHeight获取当前元素高度+上下paddingscrollWidth真实宽度当前元素内容，当内容不超过框宽时，为框的clientWidthscrollHeight，当前元素内容为real当内容不超过框的高度时，就是框的clientHeight31，Window视图的各个维度？属性说明innerWidthinnerWidth浏览器窗口可见区域的宽度（不包括浏览器控制台、菜单栏和工具栏）innerHeightinnerHeight浏览器窗口可见区域的高度（不包括浏览器控制台、菜单栏和工具栏）32.Document各种视图的尺寸？属性说明document.documentElement.clientWidth浏览器窗口可视区域的宽度（不包括浏览器控制台、菜单栏、工具栏和滚动条）document.documentElement.clientHeight浏览器可视区域的高度window（不包括浏览器控制台、菜单栏、工具栏、滚动条）document.documentElement.offsetHeight获取整个文档的高度（包括body的边距）marginofbody)document.documentElement.scrollTop返回文档向上滚动方向的距离（值随窗口滚动而变化）document.documentElement.scrollLeft返回文档向左滚动方向的距离（值变化）whenthewindowscrolls)33.监控ajax上传进度//【上传进度调用方法实现】xhr.upload.onprogress=progressFunction
