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; }