js面试题 深藏阁楼爱情的钟 2022-04-02 04:42 184阅读 0赞 > ### 1.JavaScript中如何检测一个变量是一个String类型?请写出函数实现 ### 方法①: function isString(obj){ return typeof(obj) === "string"? true: false; // returntypeof obj === "string"? true: false; } 方法② function isString(obj){ return obj.constructor === String? true: false; } 方法③ function isString(obj){ return Object.prototype.toString.call(obj) === "[object String]"?true:false; } 如: var isstring = isString('xiaoming'); console.log(isstring); // true > ### 2、请用js去除字符串空格? ### 方法一:使用replace正则匹配的方法 去除所有空格: str = str.replace(/\\s\*/g,""); 去除两头空格: str = str.replace(/^\\s\*|\\s\*$/g,""); 去除左空格: str = str.replace( /^\\s\*/, “”); 去除右空格: str = str.replace(/(\\s\*$)/g, ""); str为要去除空格的字符串,实例如下: var str = " 23 23 "; var str2 = str.replace(/\s*/g,""); console.log(str2); // 2323 方法二:使用str.trim()方法 str.trim()局限性:无法去除中间的空格,实例如下: var str = " xiao ming "; var str2 = str.trim(); console.log(str2); //xiao ming 同理,str.trimLeft(),str.trimRight()分别用于去除字符串左右空格。 方法三:使用jquery,$.trim(str)方法 $.trim(str)局限性:无法去除中间的空格,实例如下: var str = " xiao ming "; var str2 = $.trim(str) console.log(str2); // xiao ming > ### 3、你如何获取浏览器URL中查询字符串中的参数? ### function showWindowHref(){ var sHref = window.location.href; var args = sHref.split('?'); if(args[0] == sHref){ return ""; } var arr = args[1].split('&'); var obj = {}; for(var i = 0;i< arr.length;i++){ var arg = arr[i].split('='); obj[arg[0]] = arg[1]; } return obj; } var href = showWindowHref(); // obj console.log(href['name']); // xiaoming > ### 4、**js ****字符串操作函数** ### * concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。 * indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。 * charAt() – 返回指定位置的字符。 * lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 。 * match() – 检查一个字符串是否匹配一个正则表达式。 * substr() 函数 -- 返回从string的startPos位置,长度为length的字符串 * substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。 * slice() – 提取字符串的一部分,并返回一个新字符串。 * replace() – 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。 * search() – 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。 * split() – 通过将字符串划分成子串,将一个字符串做成一个字符串数组。 * length – 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。 * toLowerCase() – 将整个字符串转成小写字母。 * toUpperCase() – 将整个字符串转成大写字母。 > ### 5、写出3个使用this的典型应用 ### (1)、在html元素事件属性中使用,如: <input type=”button” οnclick=”showInfo(this);” value=”点击一下”/> (2)、构造函数 function Animal(name, color) { this.name = name; this.color = color; } (3)、input点击,获取值 <input type="button" id="text" value="点击一下" /> <script type="text/javascript"> var btn = document.getElementById("text"); btn.onclick = function() { alert(this.value); //此处的this是按钮元素 } </script> (4)、apply()/call()求数组最值 var numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(this, numbers); console.log(maxInNumbers); // 458 var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); console.log(maxInNumbers); // 458 > ### 6、如何理解闭包? ### ①定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包。 ②表现形式:使函数外部能够调用函数内部定义的变量。 ③实例如下: (1)、根据作用域链的规则,底层作用域没有声明的变量,会向上一级找,找到就返回,没找到就一直找,直到window的变量,没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。 var count=10; //全局作用域 标记为flag1 function add(){ var count=0; //函数全局作用域 标记为flag2 return function(){ count+=1; //函数的内部作用域 alert(count); } } var s = add() s();//输出1 s();//输出2 ④、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域分类:全局变量和局部变量。 特点: 1、函数内部可以读取函数外部的全局变量;在函数外部无法读取函数内的局部变量。 2、函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量! 5、使用闭包的注意点 1)滥用闭包,会造成内存泄漏:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。 2)会改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。 > ### 7、什么是跨域?跨域请求资源的方法有哪些? ### 1、什么是跨域? 由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况: * 网络协议不同,如http协议访问https协议。 * 端口不同,如80端口访问8080端口。 * 域名不同,如qianduanblog.com访问baidu.com。 * 子域名不同,如abc.qianduanblog.com访问def.qianduanblog.com。 * 域名和域名对应ip,如www.a.com访问20.205.28.90. 2、跨域请求资源的方法: **(1)、porxy代理** 定义和用法:proxy代理用于将请求发送给后台服务器,通过服务器来发送请求,然后将请求的结果传递给前端。 实现方法:通过nginx代理; 注意点:1、如果你代理的是https协议的请求,那么你的proxy首先需要信任该证书(尤其是自定义证书)或者忽略证书检查,否则你的请求无法成功。 **(2)、CORS 【Cross-Origin Resource Sharing】** 定义和用法:是现代浏览器支持跨域资源请求的一种最常用的方式。 使用方法:一般需要后端人员在处理请求数据的时候,添加允许跨域的相关操作。如下: res.writeHead(200, { "Content-Type": "text/html; charset=UTF-8", "Access-Control-Allow-Origin":'http://localhost', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type' }); **(3)、jsonp** 定义和用法:通过动态插入一个script标签。浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下)。 特点:通过情况下,通过动态创建script来读取他域的动态资源,获取的数据一般为json格式。 实例如下: <script> function testjsonp(data) { console.log(data.name); // 获取返回的结果 } </script> <script> var _script = document.createElement('script'); _script.type = "text/javascript"; _script.src = "http://localhost:8888/jsonp?callback=testjsonp"; document.head.appendChild(_script); </script> 缺点: 1、这种方式无法发送post请求(这里) 2、另外要确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定。 > ### 8、开发过程中遇到的内存泄露情况,如何解决的? ### 1、定义和用法: 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。C\#和Java等语言采用了自动垃圾回收方法管理内存,几乎不会发生内存泄露。我们知道,浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露。 2、内存泄露的几种情况: (1)、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。 实例如下: <div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ document.getElementById("myDiv").innerHTML = "Processing..."; } </script> 解决方法如下: <div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ btn.onclick = null; document.getElementById("myDiv").innerHTML = "Processing..."; } </script> (2)、由于是函数内定义函数,并且内部函数--事件回调的引用外暴了,形成了闭包。闭包可以维持函数内局部变量,使其得不到释放。 实例如下: function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } } 解决方法如下: function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } obj=null; } > ### javascript面向对象中继承实现? ### 面向对象的基本特征有:封闭、继承、多态。 在JavaScript中实现继承的方法: 1. 原型链(prototype chaining) 2. call()/apply() 3. 混合方式(prototype和call()/apply()结合) 4. 对象冒充 继承的方法如下: 1、prototype原型链方式: function teacher(name){ this.name = name; } teacher.prototype.sayName = function(){ console.log("name is "+this.name); } var teacher1 = new teacher("xiaoming"); teacher1.sayName(); function student(name){ this.name = name; } student.prototype = new teacher() var student1 = new student("xiaolan"); student1.sayName(); // name is xiaoming // name is xiaolan 2、call()/apply()方法 function teacher(name,age){ this.name = name; this.age = age; this.sayhi = function(){ alert('name:'+name+", age:"+age); } } function student(){ var args = arguments; teacher.call(this,args[0],args[1]); // teacher.apply(this,arguments); } var teacher1 = new teacher('xiaoming',23); teacher1.sayhi(); var student1 = new student('xiaolan',12); student1.sayhi(); // alert: name:xiaoming, age:23 // alert: name:xiaolan, age:12 3、混合方法【prototype,call/apply】 function teacher(name,age){ this.name = name; this.age = age; } teacher.prototype.sayName = function(){ console.log('name:'+this.name); } teacher.prototype.sayAge = function(){ console.log('age:'+this.age); } function student(){ var args = arguments; teacher.call(this,args[0],args[1]); } student.prototype = new teacher(); var student1 = new student('xiaolin',23); student1.sayName(); student1.sayAge(); // name:xiaolin // age:23 4、对象冒充 function Person(name,age){ this.name = name; this.age = age; this.show = function(){ console.log(this.name+", "+this.age); } } function Student(name,age){ this.student = Person; //将Person类的构造函数赋值给this.student this.student(name,age); //js中实际上是通过对象冒充来实现继承的 delete this.student; //移除对Person的引用 } var s = new Student("小明",17); s.show(); var p = new Person("小花",18); p.show(); // 小明, 17 // 小花, 18 > ### 判断一个字符串中出现次数最多的字符,统计这个次数 ### var str = 'asdfssaaasasasasaa'; var json = {}; for (var i = 0; i < str.length; i++) { if(!json[str.charAt(i)]){ json[str.charAt(i)] = 1; }else{ json[str.charAt(i)]++; } }; var iMax = 0; var iIndex = ''; for(var i in json){ if(json[i]>iMax){ iMax = json[i]; iIndex = i; } } console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次'); > ### **JavaScript 数组(Array)对象** ### 1.属性与方法 constructor 返回对创建此对象的数组函数的引用。 length 设置或返回数组中元素的数目。 prototype 使您有能力向对象添加属性和方法。 concat() 连接两个或更多的数组,并返回结果。 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 pop() 删除并返回数组的最后一个元素。 shift() 删除并返回数组的第一个元素 push() 向数组的末尾添加一个或更多元素,并返回新的长度。 unshift() 向数组的开头添加一个或更多元素,并返回新的长度。 reverse() 颠倒数组中元素的顺序。 slice() 从某个已有的数组返回选定的元素。原数组不变,返回为所选中的元素 sort() 对数组的元素进行排序 借助排序函数,实现数值由小到大排序 function sortNumber(a,b){ return a - b } var arr = [23,30,42,5]; var arr2 = arr.sort(sortNumber); console.log(arr2); // [5, 23, 30, 42] console.log(arr); // [5, 23, 30, 42] splice() 删除元素,并向数组添加新元素。 语法:arrayObject.splice(index,howmany,item1,.....,itemX) index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。 item1, ..., itemX:可选。向数组添加的新项目。 // 创建一个新数组,并向其添加一个元素 var arr = [1,2,3,4]; arr.splice(2,0,5); console.log(arr); // [1, 2, 5, 3, 4] // 删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素: var arr = [1,2,3,4]; arr.splice(2,1,5); console.log(arr); // [1, 2, 5, 4] toSource() 返回该对象的源代码 toString() 把数组转换为字符串,并返回结果。 toLocaleString() 把数组转换为本地数组,并返回结果。 valueOf() 返回数组对象的原始值 > ### 编写一个方法 去掉一个数组的重复元素 ### 方法一:json对象 var arr = [0,2,3,4,4,0,2]; var obj = {}; var tmp = []; for(var i = 0 ;i< arr.length;i++){ if( !obj[arr[i]] ){ obj[arr[i]] = 1; tmp.push(arr[i]); } } console.log(tmp); 方法二:indexOf() var arr = [2,3,4,4,5,2,3,6], arr2 = []; for(var i = 0;i< arr.length;i++){ if(arr2.indexOf(arr[i]) < 0){ arr2.push(arr[i]); } } console.log(arr2); 方法三: var arr = [2,3,4,4,5,2,3,6]; var arr2 = arr.filter(function(element,index,self){ return self.indexOf(element) === index; }); console.log(arr2); > ### 求数组的最值? ### 方法一:cal()/apply() var arr = \[3,43,23,45,65,90\]; var max = Math.max.apply(null,arr); 方法二:Array.max = function(arr)\{\} / Array.min = function(arr)\{\} var array = [3,43,23,45,65,90]; Array.max = function( array ){ return Math.max.apply( Math, array ); }; Array.min = function( array ){ return Math.min.apply( Math, array ); }; var max = Array.max(array); console.log(max); // 90 var min = Array.min(array); console.log(min); // 3 方法三:Array.prototype.max = function()\{\};Array.prototype.min = function()\{\}; var arr = [3,43,23,45,65,90]; Array.prototype.max = function() { var max = this[0]; var len = this.length; for (var i = 0; i < len; i++){ if (this[i] > max) { max = this[i]; } } return max; } var max = arr.max(); console.log(max); // 90 > ### 数组排序相关 ### 方法一:sort() var arr = [3,43,23,45,65,90]; function sortnum(a,b){ return a-b; } arr = arr.sort(sortnum); console.log(arr); 方法二:冒泡排序 var arr = [3, 1, 4, 6, 5, 7, 2]; function bubbleSort(arr) { var len = arr.length; for (var i = len; i >= 2; --i) { for (var j = 0; j < i - 1; j++) { if (arr[j + 1] < arr[j]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } var arr2 = bubbleSort(arr); console.log(arr2); // [1, 2, 3, 4, 5, 6, 7] var arr3 = arr2.reverse(); console.log(arr3); // [7, 6, 5, 4, 3, 2, 1] 方法三:快速排序。二分法 var arr = [3, 1, 4, 6, 5, 7, 2]; function quickSort(arr) { if(arr.length == 0) { return []; // 返回空数组 } var cIndex = Math.floor(arr.length / 2); var c = arr.splice(cIndex, 1); var l = []; var r = []; for (var i = 0; i < arr.length; i++) { if(arr[i] < c) { l.push(arr[i]); } else { r.push(arr[i]); } } return quickSort(l).concat(c, quickSort(r)); } console.log(quickSort(arr)); //[1, 2, 3, 4, 5, 6, 7]
相关 JS面试题 > JS初级开始 > 1.基本数据类型有几种?(高频) String,Boolean,Number,Null,undefiend,Symbol(es6) Symbol: 左手的ㄟ右手/ 2022年09月10日 08:18/ 0 赞/ 156 阅读
相关 js面试题 一、作用域 1、写出console.log结果(作用域) (function(){ var a = b = 2; })() con ╰半橙微兮°/ 2022年05月29日 11:48/ 0 赞/ 176 阅读
相关 js(面试题) shuffle:顾名思义,将数组随机排序,常在开发中用作实现随机功能。 我们来看看一个 shuffle 可以体现出什么代码品味。 错误举例 function 小灰灰/ 2022年05月29日 02:38/ 0 赞/ 164 阅读
相关 js面试题 > 1.JavaScript中如何检测一个变量是一个String类型?请写出函数实现 方法①: function isString(obj){ 深藏阁楼爱情的钟/ 2022年04月02日 04:42/ 0 赞/ 185 阅读
相关 js 面试题 javascript的数据类型 原始类型:null,undefined,number(数字类型),string(字符串类型),boolean(布尔值类型),symbol(e 我会带着你远行/ 2022年03月18日 11:58/ 0 赞/ 214 阅读
相关 JS面试题 1.什么是JavaScript? JavaScript是一种客户端脚本语言,可以插入到HTML页面中,并且是目前较热门的Web开发语言。同时,JavaScript是基于对象 Dear 丶/ 2022年03月08日 10:22/ 0 赞/ 202 阅读
相关 js面试题 JavaScript 的组成 JavaScript 由以下三部分组成: ECMAScript(核心):JavaScript 语言基础 DOM(文档对象模型) 客官°小女子只卖身不卖艺/ 2022年02月22日 19:00/ 0 赞/ 363 阅读
相关 js 面试题 闭包: ![复制代码][copycode.gif] function fun(n,o) { console.log(o) retur 浅浅的花香味﹌/ 2022年02月19日 01:53/ 0 赞/ 203 阅读
相关 js 面试题 1:toString function A() { this.name = "a"; this.toString = 一时失言乱红尘/ 2021年09月20日 13:26/ 0 赞/ 304 阅读
还没有评论,来说两句吧...