js问答题

index

js问答题 __小胖子

1.JS的数据类型有哪些？typeof运算符的执行结果都有哪些数据类型？ （第二阶段 1星 客观）

数据类型主要包括两部分： 基本数据类型： Undefined、Null、Boolean、Number和String 引用数据类型： Array 、Object

typeof运算符的结果类型： number,string，boolean,object,function,undefined

2.null，undefined 的区别? null 表示一个对象被定义了，值为“空值”； undefined 表示不存在这个值。

3.怎么判断一个变量没有被定义 typeof bianliang ==”undefined”

4.怎么判断一个变量arr的话是否为数组（此题用typeof不行） instanceof arr Array

5.事件委托是什么 事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。

6.描述下JSON对象的两个很重要的方法

JSON.parse() //JSON字符串转换为JSON对象 JSON.stringify() //JSON对象转化为字符串

7.写一个函数getRandomNumber(startNum,endNum),去除startNum到endNum之间的任意随机数

function getRandomNumber(startNum,endNum){ var endRand = endNum - startNum + 1; //0~1中间的16位数字 var randNum = Math.random(); //随机取出来0~9之间的任意一个数字 randNum = Math.floor(randNum * endRand); return randNum+startNum; }

8.写一个通用的去除字符串左右空格的函数？

String.prototype.strim = function(){ return this.replace(/(^s|s$)/g,””); }

9.a = [1,2,3,4];b=a;a.push(2);b.push(3);请问，最终a,b的结果分别是多少？

a为[1,2,3,4,2,3],b为[1,2,3,4,2,3]

10.检测浏览器的两种方式

功能检测 “touchstart” in document 特征检测 navigator.userAgent

11.“ ===”、“ ==”的区别？

==，当且仅当两个运算数相等时，它返回 true，即不检查数据类型 ===，只有在无需类型转换运算数就相等的情况下，才返回 true，需要检查数据类型

12.原型、原型链？

每个由构造函数new出来的实例化对象都自带一个proto属性，该属性指向创建它的构造函数的prototype对象。而prototype对象因为是实例，也有自己的proto属性，指向它的原型对象。当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype， 于是就这样一直找下去，也就是我们平时所说的原型链的概念。 关系：instance.constructor.prototype = instance.proto

13.eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');

14.["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)， 其中 radix 表示解析时用的基数。 map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。

15.简单语言测试：有数组dataarray，值为-100到100的整数，求出数组中大于0的数的和；

var x=0; for(var i=0;i<dataarray.length;i++){ if(dataarray="" style="margin: 0px; padding: 0px; -webkit-print-color-adjust: exact;">0){ x+=dataarray[i]; } }</dataarray.length;i++){>

16.简单jQuery：请写出代码，ul标签下面有1000个li，写一个性能最高的方式实现，在点击li后，输出li的内容

(“ul”).on(“click”,”li”,function(){(this).html(“hit”); })

17.用fetch方法构造一个Get请求，要求把当前页面cookie传过去，请写出代码；

fetch(url,{ method:"GET", credentials:"include", body:document.cookie })

18.简述下为何通过ajax发送的请求会出现乱码问题，如何解决？

乱码的问题就是编码格式冲突，我们需要传输中文数据前面加一个encodeURI()编码，例如：encodeURI(j$("#fk_info").val())；在接受参数的页面对传过来的编码过后的内容用后端语言进行解码

19.简述DOM，HTMLDOM的区别和联系

DOM分为三部分： （1）核心DOM：遍历DOM树、添加新节点、删除节点、修改节点 （2）HTML DOM：以一种简便的方法访问DOM树 （3）XML DOM：准用于操作XML文档 核心DOM与HTML DOM的区别： 核心DOM ： 对象：Document,Node, ElementNode,TextNode,AttributeNode，CommentNode,NodeList 核心DOM提供了统一的操作接口，如：createElement、appendChild、setAttribute等 核心DOM创建新元素：var newNode=document.createElement("img") 给元素添加属性：e.setAttribure()、e.setAttribureNode() 适用场合：核心DOM适合操作节点，如创建，删除，查找等 HTML DOM： 对象：image,Table,Form,Input,Select等等HTML标签对象化 HTML DOM提供了封装好的各种对象，如：Select、Option等等 适用场合：HTML DOM适合操作属性，如读取或修改属性的值

20.什么是事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM同时支持两种事件模型：捕获型事件和冒泡型事件

21.JavaScript原型继承是如何运作的？

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去(知道找到null为止)，也就是我们平时所说的原型链的概念。

22.CORS是什么？对于跨域请求，如何将附带凭证（HTTP Cookie 及 HTTP认证信息）的请求发送至服务器端?

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。只需要服务器端的Response header 设置下Access-Control-Allow-Origin即可。

只需把相应的cookie信息和认证信息作为post请求发送给服务器端即可。

23.DOM元素Attribute与Property的区别是什么？

1、 property是DOM中的属性，是JavaScript里的对象；而attribute是HTML标签上的特性，它的值只能够是字符串； 2、DOM对象初始化时会在创建默认的基本property；只有在HTML标签中定义的attribute才会被保存在property的attributes属性中； 3、attribute会初始化property中的同名属性，但自定义的attribute不会出现在property中； 4、propety是对象，而attribute的值都是字符串； 5、最关键的两句话： attribute（特性），是我们赋予某个事物的特质或对象。 property（属性），是早已存在的不需要外界赋予的特质。 24.Long-Polling、WebSocket、SSE(Server-Sent Events)之间有什么差异？请写出WebSocket在浏览器端如何发送及接收消息的相关代码实现（需要考虑传输一场并根据返回数据的格式做不同处理）

Long-Polling 自己主动请求数据来获知文件知否发生变化 缺点：会有很多无效请求 SSE 服务器端通知客户端数据变化 服务器端客户端保持一个长连接 缺点：保持长连接需要占用大量的服务器端只要 WebSocket 实时通信 缺点：浏览器支持情况没有上面两种方法好

25.实现以下函数： add(10,10);==>20 add(10)(10);==>20

function add(num){ if(arguments.length==1){ return function(num1){ return num+num1; } }else{ var sum = 0; for(var i=0;i<arguments.length;i++){ sum += arguments[i]; } return sum; } }

26.实现以下代码： [a,b,3,4,5].copy();==>[a,b,3,4,5, a,b,3,4,5]

var array = ['a','b',3,4,5]; Array.prototype.copy = function(){ return this.concat(this); } console.log(array.copy());

27.指出下面代码的区别 function Order(){
} var order = Order(); （1） var order = new Order();（2）

代码（1）是将函数Order()作为一个普通函数去调用的，代码（2）是将Order()作为一个构造函数去调用的；当函数Order的方法体中有this关键之的时候，作为普通函数this指的是window对象，作为构造函数存在的时候this指代的是本对象

28.var foo = "Hello"; (function (){ var bar = "World"; alert(foo+bar); })(); alert(foo+bar); 以上语句会产生什么样的结果？ （1）HelloWorld （2）undefined

29.函数call和apply的区别：

相同点:两个方法产生的作用是完全一样的 不同点:方法传递的参数不同,call是参数往后累加，apply是把所有参数合并为一个数组传给函数的第二个参数

30.语句（window.foo||(window.foo=”bar”)）;执行后，window.foo的值是多少？

Bar

31.使用jquery做一次ajax请求，请求类型为post，传入参数是json格式，url为[http://xxx.com,传入参数是{username：“abc”}，请求成功返回一个数组例如[1,2,3,4,5]然后对这个数组进行处理后得到一个新的数组，1,2,3,4,5, 1,2,3,4,5]并输出到日志

Array.prototype.copy = function(){ return this.concat(this); } $.ajax({ url:“http://xxx.com”, type:'post', dataType:“json”, data: {username：“abc”}, success:function(data){ console.log(data.copy()); } });

32．以下语句结果a，m的值

var a = "15.56"; var b = 20.23; var a = parseInt(a)+parseInt(b); var m = parseFloat(a);

a:35 m:35

33.var numberArray = [ 3,6,2,4,1,5 ]， (1)实现对该数组的倒排 ，输出[5,1,4,2,6,3]

var result = numberArray.reverse( ); alert(result);

(2)实现对该数组的降序排列，输出[6、5、4、3、2、1]

var result = numberArray.sort(function(a,b){return b-a}); alert(result);

34.$(document).ready()是个什么函数？为什么要用它。

问题一： $(document).ready()这个函数是用来取代页面中的window.onload; 不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。

问题二：Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

35.读下面代码： window.color = 'red'; var o= {color:'blue'}; function sayColor(){ alert(this.color); } 请在每行末尾写出该行的输出： sayColor();
sayColor.call(this); sayColor.call(window) sayColor.call(o)

答案： red 、red、red、blue

36.请写一个正则，匹配输入的字符：第一个必须是字母或下划线开头，后面就是字母和数字或下划线构成，长度5-20.

答案： /^[A-Za-z_]w{4,19}$/

37.JS中原型链最上层的对象是 object 的原型对象，该对象的proto指针指向 null 的原型对象。

38.JS中使用 Object 对象的 defineProperty 函数定义对象属性的访问器。

39.如何对一篇文章进行敏感词替换？假如有几千个敏感词。（写一下思路即可）

将这篇文章以字符串的形式赋给一个变量。定义一个正则表达式，以全局匹配的方式查找所有敏感词，并用replace方法替换掉

40.添加、删除、更改、插入节点的方法

appendChild removeChild replaceChild insertBefore

41.在javascript编程中，请至少说出三种异步操作的使用场景？

回调函数 事件监听 Promises对象 Nodejs的异步方法

42.请用闭包的方式写一个方法，第一次执行返回999，第二次返回1000.

function bb(){ var num = 999; return function(){ return num++; } }

var fun = bb(); fun(); fun();

43.现在有一个数组[1,4,5,8,100],请写一个方法，每秒输出数组的第一个元素，直到整个数组输出完毕

var arr = [1,4,5,8,100]; function output(){ setTimeout(function(){ console.log(arr.splice(0,1)[0]); if(arr.length>0){ output(); } },1000); } output();

44.请给Array本地对象的prototype添加一个原型方法，它的作用是剔除重复的条目，并将新数组返回

Array.prototype.unique = function(){//数组去除重复 var res = []; var json = {}; for(var i = 0; i < this.length; i++){ if(!json[this[i]]){ res.push(this[i]); json[this[i]] = 1; } } return res; }