前端面试之JS

ゞ浴缸里的玫瑰 2022-06-03 10:55 213阅读 0赞

**javascript部分**

> **（1）：简要的描述JavaScript 中的作用域链**  
> 任何一段JavaScript代码都对应一个作用域链，作用域链中存放一系列对象，代码中声明的变量将作为对象的属性存放。 在JavaScript的顶层代码中，作用域链由一个全局对象组成；当定义一个函数  
> 时，它保存一个作用域链，作用域链上有两个对象，一个是函数对象，一个是全局对象。 每当一个函数被调用时，会创建一个活动对象（也叫上下文对象），函数中的局部变量将作为该对象的属性存放。 当需要使用一个变量时，将从作用域链中逐个查找对象的属性。比如：要使用变量a，将先查找作用域中的第一个对象是否有属性a，如果有就使用；如果没有就查找作用域链中 下一个对象的属性，以此类推。如果作用域链上没有任何一个对象含有属性x，则认为这段代码的作用域链上不存在x，将抛出引用错误异常。 当函数调用完成后，如果没有其他引用指向为此次调用所创建的上下文对象，该对象将被回收。

--------------------

> **（2）简述JavaScript中创建自定义对象的方式**  
> 自定义对象（user-defined object）指由用户创建对象，兼容性问题需要由编写者注意。创建自定义对象的方式有：  
> 1>对象直接量  
> 2>new Object（）  
> 3> function对象模板  
> 4> Object.create（）

--------------------

> （3）**javaScript中，this关键字的作用是什么?**  
> 笼统的说，关键字this指向当前的对象。比如，顶级代码中的this指向全局对象，在指定元素事件的时候，this指定当前发生事件的元素对象，对于嵌套函数，如果嵌套函数作为方法被调用，其this指向调用他的对象；如果作为函数调用，this是全局对象或者为undefined（严格模式下）

--------------------

> **（4）简要描述javaScript中的匿名函数**  
> 匿名函数指的是在定义时没有指定名字的函数，且定义后往往直接调用。如![这里写图片描述][SouthEast]  
> 这种方式所定义的匿名函数，往往需要直接调用  
> ![这里写图片描述][SouthEast 1]  
> 匿名函数常用于定义不需要重复使用的函数，用完即释放。另外，对于直接调用的匿名函数而言，可以看成是一个临时的命名空间，其区域内定义的所有变量，不会污染到全局命名空间

--------------------

> **（5）：什么是正则表达式？在JavaScript中，如何应用正则表达式？**  
> 正则表达式(Regular Expression) 本身就是一个字符串，由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式。 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如：词语出现频率统计、验证字符串是否符合邮箱格式、屏蔽一篇帖子中的限制性词语等。许多程序设计语言都支持利用正则表达式进行字符串操作。 在JavaScript 中，正则表达式的应用分为两种： 1、结合String 对象的replace、search和match方法，实现对字符串的替  
> 换、查找和匹配；  
> 2、定义正则表达式对象，实现对字符串的复杂匹配操作.

--------------------

> **（6）：编写函数，实现对身份证号码最后一位的验证**  
> 二代身份证号码为18位，其最后一位（第18位）的计算方法为： 将前面的身份证号码17位数分别乘以不同的系数。从第一位到第十七位的系数分别为： 7－9－10－5－8－4－2－1－6－3－7－9－10－5－8－4－2  
> 将 这17位数字和系数相乘的结果相加 3、用加出来和除以11，看余数是多少？ 4、余数只可能有0－  
> 1－2－3－4－5－6－7－8－9－10这11个数字。每个数字所对应的最后一位身份证的号码为：1－0－X－9－8－7－6－5－4－3－2。即，如果余数是2，就会在身份证的第18位数字上出现罗马数字的X。如果余数是10，身份证的最后一位号码就是2。 例如：某男性的身份证号码是34052419800101001X。验证其最后一位是否正确时，首先需要得出前17位的乘积和是189，然后用189除以11得出的结果是17+2/11，也就是说其余数是2。最后通过对应规则就可以知道余数2对应的数字是x。所以，可以判定此身份证号码的最后一位是合格的。

![这里写图片描述][SouthEast 2]

--------------------

> **（7）：编写函数，实现冒泡排序**  
> ![这里写图片描述][SouthEast 3]

--------------------

> **（8）：简要描述JavaScript中定义函数的几种方式**  
> JavaScript中有3中定义函数的方式  
> 1，函数语句：即使用function关键字显示定义函数。如：  
> `function f(x){ return x+1; }`  
> 2，函数定义表达式：也称为“函数直接量”。形如：  
> `var f=function(x){ return x+1; }`  
> 3,使用Function()构造函数式定义

--------------------

> **（9）简述arguments 对象的作用**  
> 在函数代码中，使用特殊对象arguments可以访问函数的参数。即，开发者在定义函数时，无需明确的为方法声明参数，也可以在方法体中使用arguments 来访问参数。这是因为，arguments 是一种特殊对象，在函数代码中，表示函数的参数数组。 正因为arguments 表示参数组成的数组，因此，首先可以使用arguments.length检测函数的参数个数，其次，可以通过下标（arguments\[index\]）来访问某个参数。这样，可以用arguments 对象判断传递给函数的参数个数并获取参数，适用于函数参数无法确定个数的情况下。

--------------------

> **（10）：什么是“逻辑短路”？**  
> 逻辑短路是对于逻辑运算而言，是指，仅计算逻辑表达式中的一部分便能确定结果，而不对整个表达式进行计算的现象。 对于“&&”运算符，当第一个操作数为false时，将不会判断第二个操作数，因为此时无论第二个操作数为何，最后的运算结果一定是false； 对于“||”运算符，当第一个操作数为true时，将不会判断第二个操作数，因为此时无论第二个操作数为何，最后的运算结果一定是true。

--------------------

> **（11）：列举几个JavaScript中常用的全局函数，并描述其作用**  
> JavaScript 中常用的全局函数及其作用如下： parseInt：解析一个字符串并返回一个整数； 2. parseFloat：解析一个字符串并返回一个浮点数； 3. isNaN：检查某个值是否是数字，返回true 或者false； 4. encodeURI ：把字符串作为URI 进行编码； 5. decodeURI ：对encodeURI() 函数编码过的URI 进行解码； 6. eval：计算某个字符串，以得到结果，或者用于执行其中JavaScript 代码。

--------------------

> **（12）：解释一下javaScript中局部变量与全局变量的区别**  
> 全局变量拥有全局作用域，在JavaScript 代码的任何地方都可以访问；在函数内声明的变量只在函数体内有定义，即为局部变量，其作用域是局部性的。 需要注意的是，在函数体内声明局部变量时，如果不使用var 关键字，则将声明全局变量。

--------------------

> **（13）：简要描述JavaScript 的数据类型？**
> 
> JavaScript 的数据类型可以分为原始类型和对象类型。 原始类型包括string、number 和boolean 三种。其中，字符串是使用一对单引号或者一对双引号括起来的任意文本；而数值类型都采用64  
> 位浮点格式存储，不区分整数和小数；布尔（逻辑）只能有两个值：true 或false。 复杂类型指其他对象，如Array、Date、Object 等。 除此之外，JavaScript中还有两个特殊的原始值：null（空）和undefined（未定义），它们代表了各自特殊类型的唯一成员。

--------------------

> **（14）：如何动态的操作表格？**  
> 可以象普通dom一样操作，但是因为表格的dom比较复杂，所以我通常是使用table的insertRow、deleteRow及tr对象的insetCell、deleteCell操作

--------------------

> **（15）：String.match与RegExp.exec有何区别？**   
> 这2个函数都是从指定的字符串中提取符合条件的字串  
> 1、正则表达式为非全局检索时,2者是等价的  
> 返回符合条件的第一个子串以及对应的分组（如果存在存在）构成的伪数组:第一个元素是匹配的字串，余下的为匹配的分组。  
> 伪数组包含2个属性：  
> input 返回要检索的字符串  
> index 返回匹配的子串在字符串的位置，在非全局检索时始终为0  
> 2、正则表达式为全局检索时，2者的处理机制和返回结构不同  
> **exec处理机制**  
> 当正则表达式为全局检索时，exec会记录每次匹配开始、结束的位置。匹配结束位置存储在正则表达式的lastIndex中，匹配开始位置存储在结果的index中。当exec继续被调用时，正则表达式会从lastIndex进行新的匹配，并返回新的符合条件的子串及分组，并更新正则表达式的lastIndex。重复这样的操作，直到全部匹配完（exec返回null）。此时正则表达式的lastIndex为0。  
> **match处理机制**  
> match在要匹配的正则表达式为全局检索时，会直接返回字符串中符合条件的子串数组（不包含分组，即使存在  
> **总的来说**  
> match只会返回没有分组的全部匹配结果或者有分组的第一次匹配结果； 而exec可以利用循环返回全部匹配结果

--------------------

> **（16）：正则的i标记与g标记各有何用途？**  
> i：不区分大小写；g：全局匹配，如果没有此标记，正则不会第二个之后的结果

--------------------

> **（17）：为String添加trim()方法**

String.prototype.trim = function() {   return this.replace(/^ +| +$/g,"");  }

--------------------

> **（18）：简述COOKIE。在JS中如何操作Cookie?**  
> **概念**  
> Cookie 可以翻译为“小甜品，小饼干” ，Cookie 在网络系统中几乎无处不在，当我们浏览以前访问过的网站时，网页中可能会出现 ：你好 XXX，这会让我们感觉很亲切，就好像吃了一个小甜品一样。这其实是通过访问主机中的一个文件来实现的，这个文件就是 Cookie。一般网络用户习惯用其复数形式 Cookies。  
> Cookie指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。  
> 在默认情况下，Cookie是临时存在的。在一个浏览器窗口打开时，可以设置Cookie，只要该浏览器窗口没有关闭，Cookie就一直有效，在其有效期内，当用户访问同一个 Web 服务器时，浏览器首先要检查本地的Cookies，并将其原样发送给 Web 服务器。这种状态信息称作“Persistent Client State HTTP Cookie” ，简称为 Cookies。  
> 而一旦浏览器窗口关闭后，Cookie也就随之消失。如果想要Cookie在浏览器窗口之后还能继续使用，就需要为Cookie设置一个生存期。所谓生存期也就是Cookie的终止日期，在这个终止日期到达之前，浏览器都可以读取该Cookie。一旦终止日期到达之后，该Cookie将会从Cookie文件中删除。  
> 一个网站可以创建多个Cookie,不同的Cookie可以拥有不同的值，例如将用户名和密码存在Cookie中，就可能用到两个Cookie，一个用来存放用户名，一个用来存放密码，使用Document的Cookie属性可以用来设置与读取Cookie。  
> **JS如何操作Cookie**  
> 使用Document的Cookie属性可以用来设置与读取Cookie。Cookie是以键值对的形式保存的，即key=value的格式。各个Cookie之间一般是以“;”分隔。  
> **添加一个cookie**

**根据指定名称的Cookie修改Cookie的值**

**删除指定名称的cookie**

--------------------

> **（19）：谈谈innerHTML outerHTML innerText之间的区别。**  
> innerHTML是w3c的html dom定义的方法，而后两者是IE独有的方法； innerHTML代表一个元素节点内由所有子节点，不包括当前节点组成的html代码；  
> outerHTML代表一个元素节点内由所有子节点和当前节点组成的html代码；  
> innerText代表一个元素节点内由所有子文本节点内容组成的文本；

--------------------

> **（20）：谈谈innerHTML、nodeValue 与textContent之间的区别**  
> innerHTML属性读取或设置节点起始和结束标签中的HTML内容；  
> nodeValue 属性读取或设置指定节点的文本内容，适用于文本类型的节点；

--------------------

> **（21）：你在js中用过array吗？如果用过，array中添加数据用什么方法**  
> 用过。  
> 在尾部添加使用push()；  
> 在头部添加使用unshift()；  
> 在任意位置添加使用splice()，但要注意把它的删除个数设置为0。

--------------------

> **（22）：简述javascript的优缺点。**  
> 优点：简单易用，与Java有类似的语法，可以使用任何文本编辑工具 编写， 只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；  
> 缺点：不适合开发大型应用程序；

--------------------

> **（23）Javascript有哪些内置对象?**  
> 只有Math和Global（在浏览器环境中，Global就是Window）

--------------------

> **（24）：列举Javascript的本地对象。**
> 
> Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError 、RangeError、ReferenceError、SyntaxError、TypeError、URIError

--------------------

> **（25）：什么是Ajax？**   
> 客户端向服务器端发送请求,而无需刷新页面的技术 Ajax包含的技术 \* HTML、CSS、JavaScript、XML和XMLHttpRequest等

--------------------

> **（26）：解释XMLHttpRequest是什么？**  
> XMLHttpRequest 对象用于在后台与服务器交换数据。  
> XMLHttpRequest 对象是开发者的梦想，因为您能够：  
> 在不重新加载页面的情况下更新网页  
> 在页面已加载后从服务器请求数据  
> 在页面已加载后从服务器接收数据  
> 在后台向服务器发送数据  
> 所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。  
> 通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象  
> 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

--------------------

> **（27）：谈谈你对Ajax的理解。你在项目中如何使用Ajax？**  
> Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA（Rich Internet Application，富互联网应用系统）【技术允许我们在因特网上以一种像使用Web一样简单的方式来部署富客户端程序。这是一个用户接口，它比用HTML能实现的接口更加健壮、反应更加灵敏和更具有令人感兴趣的可视化特性。无论将来RIA是否能够如人们所猜测的那样完全代替HTML应用系统，对于那些采用胖客户端技术运行复杂应用系统的机构来说，RIA确实提供了一种廉价的选择。】的一种基础技术。 因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。

--------------------

> **（28）：谈谈你对JSON的理解**  
> JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于 人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C\#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。 所以它往往在AJAX中替代XML，交换数据。

--------------------

> **（29）：你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？**  
> 有。 一个网站，主要是使用其它网站提供的javascrip api如QQ。使用script的src可以直接读取跨域资源。 当然跨域还有其它处理方式：如代理服务器、改变domain、JSONP等。

--------------------

> **（30）：你在项目中有使用到网页到服务器的即时通信吗？说说你都采用什么手段处理以及你所知道的处理办法？**  
> 没有用到，但我知道html的websockets、flash的socket、ajax长轮询等都可以实现。

--------------------

> **（31）：你在AJAX中有遇到乱码吗？如果遇到，你是如何解决的？**  
> 遇到过。 一般我首先统一页面和服务器编码，对请求和响应的Content-Type设置正确编码；对请求参数进行编码处理。

--------------------

> **（32）：你使用过jQuery吗？如果有，你为什么要使用jQuery呢？**   
> 用过。 如果使用原生javascript开发的话，会面临很多问题，如浏览器兼容、Ajax数据解析、Dom、事件注册操作等都非常烦锁，而jQuery正好解决了这些问题。  
> 当然jQuery还有非常有用的其它特性，如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展，在它的基础上开发非常灵活，也有众多的插件可用，如jQueryUI、easyUI等

--------------------

> **（33）：在jQuery中如何注册事件？**  
> 使用bind()方法注册事件，但通常我们使用与事件同名的方法注册更方便，

如：click()、hover()等。

--------------------

> **（34）：如何获取Html内容？如何获取文本内容？如何获取属性值？如何获取input值？如何创建新的节点？**  
> 可以使用html()获取html内容。 使用text()获取文本内容。 使用attr()可以获取属性值，使用css()可以获取样式属性值。 通过val()便可以获取input的值  
> 把节点元素名加上<、>作为参数调用jQuery方法便可创建新节点,如：jQuery(“`<div>`”)。

--------------------

> **（35）：ajax、get、post、ajaxSetup、getJSON各有何用途？**   
> ajax：jQuery对ajax执行的核心方法。其它ajax方法都是使用该方法实现。  
> get：专门用于发送get请求的便捷方法。  
> post：专门用于发送post请求的便捷方法。  
> ajaxSetup：设置调用ajax方法时的黑认值。  
> getJSON：专门用于向服务器请求json格式数据的便捷方法。

--------------------

> **（36）：如何使用从服务器获取一个复杂数据（对象）？**  
> 通常会把这个数据转换为通用的数据交换格式，如xml或json。由于xml解析比较麻烦，所以使用json比较多。  
> 在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为javascript对象

--------------------

> **（37）：DOM操作中，如何获取元素的属性值？**  
> 对于元素节点，获取其某属性的值有多种方式，如下所示：  
> 1、element.attributes\[下标\].value  
> 2、element.attributes\[‘属性名’\].value  
> 3、element.getAttributeNode(‘属性名’).value  
> 4、element.getAttribute(‘属性名’)

--------------------

> **（38）：简要描述DOM操作中查找元素的方式**   
> 通过HTML 中的信息选取元素，比如：  
> a) getElementById()方法：根据元素的id 属性值查询单个节点；  
> b) getElementsByTagName()方法：根据元素标签的名称查询点；  
> c) getElementsByName()方法：根据元素name 属性的值查询点。  
> 2、通过CSS 类选取元素  
> a) getElementsByClassName(‘className’)方法：根据class名称选取元素；  
> b) querySelector(‘selector’)和querySelectorAll(‘selector’)方法：根据CSS 选择器选取元素。  
> 3、通过document 对象选取，如document.all、document.body等；  
> 4、通过节点遍历选取节点，如parentNode、firstChild等。

--------------------

> **（39）：例举3种强制类型转换和2种隐式类型转换？**  
> 强制（parseInt,parseFloat,number）  
> 隐式（== - ===）

--------------------

> **（40）：IE和DOM事件流的区别**  
> 1.执行顺序不一样、  
> 2.参数不一样  
> 3.事件加不加on  
> 4.this指向问题

--------------------

> **（41）：IE和标准下有哪些兼容性的写法**

Var ev = ev || window.event 
     document.documentElement.clientWidth || document.body.clientWidth  Var target = ev.srcElement||ev.target

--------------------

> **（42）：JavaScript原型，原型链 ? 有什么特点？**  
> 原型(prototype)：保存所有子对象共有成员的对象  
> 原型链：由各级对象的**proto**逐级向上引用形成的多级继承关系  
> 特点：1.原型和原型链是JS实现继承的一种模型。  
> 2.原型链的形成是真正是靠**proto** 而非prototype

--------------------

> **（43）：null，undefined 的区别？**  
> Null: 这是一个对象，但是为空。因为是对象，所以 typeof null 返回 ‘object’ 。  
> Undefined: undefined是全局对象（window）的一个特殊属性，其值是未定义的。

--------------------

> **（44）：Node.js的适用场景?**  
> 高并发、聊天、实时消息推送

--------------------

> **（45）：\[“1”, “2”, “3”\].map(parseInt) 答案是多少？**  
> \[1,NaN,NaN\]  
> \[“1”,”2”,”3”\].map(function ()\{ console.log(arguments) \})  
> \[“1”, 0, Array\[3\]\]  
> \[“2”, 1, Array\[3\]\]  
> \[“3”, 2, Array\[3\]\]  
> 然后看 parseInt  
> parseInt(string, radix);  
> parseInt() 函数将给定的字符串以指定基数（radix/base）解析成为整数。就是 你想把string当成radix进制数解析成10进制  
> [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/parseInt][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_parseInt]  
> radix传入0时会把1当成是10进制数，所以“1”成功了。  
> radix传入1时…没有1进制数，所以不可能转换成功，返回NaN  
> radix传入2时，”3”不能当作2进制数处理所以也返回NaN

--------------------

> **（46）：事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？**  
> 1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
> 2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；  
> 3. ev.stopPropagation();

--------------------

> **（47）：Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？**  
> hasOwnProperty

--------------------

> **（48）：jquery 中如何将数组转化为json字符串，然后再转化回来？**

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：     $.fn.stringifyArray = function(array) {         
      return JSON.stringify(array)   
       }  
        $.fn.parseArray = function(array) {  
            return JSON.parse(array)     }        然后调用：      $("").stringifyArray(array)

> **（49）：如何编写高性能的Javascript？**   
> 1使用 DocumentFragment 优化多次 append  
> 2通过模板元素 clone ，替代 createElement  
> 3使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素  
> 4使用三目运算符替代条件分支  
> 5需要不断执行的时候，优先考虑使用 setInterval …….

--------------------

> **（50）：什么是web worker?为什么我们需要他们？**  
> Web worker帮助我们用异步执行javascript文件；  
> **Web worker线程的限制是什么？**  
> Web worker线程不能修改HTML元素，你可以自由使用javascript数据类型。  
> **如何在javascript中创建一个worker线程？**  
> `var worker=new Worker(... .js);`  
> **如何终止web worker?**  
> W.terminate(); //terminate(终止)；

--------------------

> **（51）：.body中的onload()函数和jQuery中的$(document).ready()有什么区别**  
> onload（）和document.ready（）的区别如下： 可以在页面中使用多个document.ready()，但只能使用一次onload()； document.ready()函数在页面DOM元素加载完成以后就会被调用，而onload()函数则要在所有的关联资源（包括图像，音频）加载完毕才会调用。

[SouthEast]: /images/20220603/97d8eddc80f84d3d96fd205a28fc9385.png
[SouthEast 1]: /images/20220603/bb09c5d0953543649acdd7401527c04a.png
[SouthEast 2]: /images/20220603/919f874e5bb54e6c99db4dd90fe96fad.png
[SouthEast 3]: /images/20220603/4d32734b508545338eaf9673a058457f.png
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_parseInt]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt