【前端领域高频笔试面试】——JavaScript相关（一）

目录

1.已知数组var stringArray &＃61; [“This”, “is”, “Baidu”, “Campus”]

2.已知有字符串foo&＃61;”get-element-by-id”,写function将其转化成驼峰表示法

3.已知数组var numberArray &＃61; [3,6,2,4,1,5]&＃xff1b;应用数组API进行操作

4.以YYYY-MM-DD格式输出今天的日期

5.使用正则表达式将字符串"{$id}{$name}"中的{$id}替换成10&＃xff0c;{$name}替换成Tony

6.为了保证页面输出安全&＃xff0c;我们经常需要对一些特殊的字符进行转义&＃xff0c;请写一个函数escapeHtml&＃xff0c;将<, >, &, “进行转义

7.foo &＃61; foo||bar &＃xff0c;这行代码是什么意思&＃xff1f;为什么要这样写&＃xff1f;

8.以下代码输出结果为&＃xff1f;

9.用js实现随机选取10–100之间的10个数字&＃xff0c;存入一个数组&＃xff0c;并排序

10.把两个数组合并&＃xff0c;并删除第二个元素

11.Javascript的typeof返回哪些数据类型

12.例举3种强制类型转换和2种隐式类型转换

13.常见API与数组方法

14.IE和DOM事件流的区别

15.call和apply的区别

16.b继承a的方法

17.添加 删除 替换 插入到某个节点的方法

18.Javascript的本地对象&＃xff0c;内置对象和宿主对象

19.window.onload 和document.ready的区别

20.”&＃61;&＃61;”和“&＃61;&＃61;&＃61;”的不同、Javascript的同源策略是指&＃xff1f;

21.Javascript是一门什么样的语言&＃xff0c;它有哪些特点&＃xff1f;

22.Javascript的数据类型都有什么&＃xff1f;

23.已知ID的Input输入框&＃xff0c;如何获取这个输入框的输入值&＃xff1f;

24.如何获取到页面中所有的checkbox&＃xff1f;

25.设置一个已知ID的DIV的html内容为xxxx&＃xff0c;字体颜色设置为黑色

26.当一个DOM节点被点击时候&＃xff0c;我们希望能够执行一个函数&＃xff0c;应该怎么做&＃xff1f;

27.以下代码输出结果为&＃xff1f;原因是&＃xff1f;

28.以下代码输出结果为&＃xff1f;原因是&＃xff1f;

29.以下代码输出结果为&＃xff1f;原因是&＃xff1f;

30.看代码给答案

31.怎样添加、移除、移动、复制、创建和查找节点

32.正则表达式构造函数var reg&＃61;new RegExp(“xxx”)与正则表达字面量var reg&＃61;//有什么不同&＃xff1f;正则表达式如何匹配邮箱&＃xff1f;

33.以下代码输出结果为

34.Javascript中callee和caller的作用

36.如何让页面的状态栏中显示“已经选中该文本框”&＃xff1f;

37.以下哪条语句会产生运行错误&＃xff1f;

38.以下哪个单词不属于Javascript保留字&＃xff1f;

39.以下代码输出结果为

40.补充按钮事件的函数&＃xff0c;确认用户是否退出当前页面&＃xff0c;确认之后关闭窗口

1.已知数组var stringArray &＃61; [“This”, “is”, “Baidu”, “Campus”]

Alert出”This is Baidu Campus”&＃xff1a;

alert(stringArray.join(" "))  //将数组转化为字符串并用空格隔开

2.已知有字符串foo&＃61;”get-element-by-id”,写function将其转化成驼峰表示法

function combo(msg){var arr&＃61;msg.split("-");for(var i&＃61;1;i}

3.已知数组var numberArray &＃61; [3,6,2,4,1,5]&＃xff1b;应用数组API进行操作

&＃xff08;1&＃xff09;实现对该数组的倒排&＃xff0c;输出[5,1,4,2,6,3]&＃xff1b;

numberArray.reverse( )

&＃xff08;2&＃xff09;实现对该数组的降序排列&＃xff0c;输出[6,5,4,3,2,1]&＃xff1b;

numberArray.sort(function(a,b){return b-a})

4.以YYYY-MM-DD格式输出今天的日期

var d &＃61; new Date();
// 获取年&＃xff0c;getFullYear()返回4位的数字
var year &＃61; d.getFullYear();
// 获取月&＃xff0c;月份比较特殊&＃xff0c;0代表1月&＃xff0c;11代表12月
var month &＃61; d.getMonth() &＃43; 1;
// 变成两位
month &＃61; month <10 ? &＃39;0&＃39; &＃43; month : month;
// 获取日
var day &＃61; d.getDate();
day &＃61; day <10 ? &＃39;0&＃39; &＃43; day : day;
alert(year &＃43; &＃39;-&＃39; &＃43; month &＃43; &＃39;-&＃39; &＃43; day);

5.使用正则表达式将字符串"{$id}{$name}"中的{$id}替换成10&＃xff0c;{$name}替换成Tony

"{$id}{$id}_{$name}".replace(/{\$id}/g,&＃39;10&＃39;).replace(/{\$name} /g,&＃39;Tony&＃39;);

        在正则表带式中的直接量的形式&＃xff1a;/要匹配的字符串/&＃xff0c;/^ 严格模式 $/&＃xff0c;/g默认在全局下找到所有匹配该字符串的元素&＃xff0c;replace替换匹配到的字符串&＃xff0c;特殊符号用 \ 转义。

6.为了保证页面输出安全&＃xff0c;我们经常需要对一些特殊的字符进行转义&＃xff0c;请写一个函数escapeHtml&＃xff0c;将<, >, &, “进行转义

function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {switch (match) {case “<”:return “<”;case “>”:return “>”;case “&”:return “&”;case “\””:return “"”;}});
}

7.foo &＃61; foo||bar &＃xff0c;这行代码是什么意思&＃xff1f;为什么要这样写&＃xff1f;

        如果foo存在&＃xff0c;值为foo&＃xff0c;否则把bar的值赋给foo。

        短路表达式&＃xff1a;作为”&&”和”||”操作符的操作数表达式&＃xff0c;这些表达式在进行求值时&＃xff0c;只要最终的结果已经可以确定是真或假&＃xff0c;求值过程便告终止&＃xff0c;这称之为短路求值。

8.以下代码输出结果为&＃xff1f;

var foo &＃61; 1;
(function(){console.log(foo);var foo &＃61; 2;console.log(foo);
})()

//变量声明提升后&＃xff0c;以上代码相当于&＃xff1a;
var foo &＃61; 1;
(function(){var foo;console.log(foo); //undefinedfoo &＃61; 2;console.log(foo); // 2;   
})()

        函数声明与变量声明会被Javascript引擎隐式地提升到当前作用域的顶部&＃xff0c;但是只提升变量名不提升值。该代码输出undefined 和 2。

9.用js实现随机选取10–100之间的10个数字&＃xff0c;存入一个数组&＃xff0c;并排序

function randomNub(aArray, len, min, max) {if (len >&＃61; (max - min)) {return &＃39;超过&＃39; &＃43; min &＃43; &＃39;-&＃39; &＃43; max &＃43; &＃39;之间的个数范围&＃39; &＃43; (max - min - 1) &＃43; &＃39;个的总数&＃39;;}if (aArray.length >&＃61; len) {aArray.sort(function(a, b) {return a - b});return aArray;}var nowNub &＃61; parseInt(Math.random() * (max - min - 1)) &＃43; (min &＃43; 1);for (var j &＃61; 0; j var arr&＃61;[];
randomNub(arr,10,10,100);

10.把两个数组合并&＃xff0c;并删除第二个元素

var array1 &＃61; [&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;];
var bArray &＃61; [&＃39;d&＃39;,&＃39;e&＃39;,&＃39;f&＃39;];
var cArray &＃61; array1.concat(bArray);
cArray.splice(1,1);   //在数组的第&＃xff08;参数1&＃xff09;个索引值开始&＃xff0c;删除&＃xff08;参数2&＃xff09;个数组元素&＃xff0c;返回剩余的含有数组值的数组
slice() 

常用数组API&＃xff1a;

11.Javascript的typeof返回哪些数据类型

alert(typeof [1, 2]); //object
alert(typeof &＃39;leipeng&＃39;); //stringvar i &＃61; true; 
alert(typeof i); //booleanalert(typeof 1); //numbervar a; 
alert(typeof a); //undefined
function a(){;};
alert(typeof a) //function

12.例举3种强制类型转换和2种隐式类型转换

强制转换&＃xff1a;parseInt()、parseFloat()、Number()
隐式转换&＃xff1a;&＃61;&＃61;、!!(!!常用于判断非空)

if(!!a){//a有内容才执行的代码...  
}

13.常见API与数组方法

14.IE和DOM事件流的区别

&＃xff08;1&＃xff09;执行顺序不一样&＃xff1b;
&＃xff08;2&＃xff09;参数不一样&＃xff1b;
&＃xff08;3&＃xff09;事件加不加on&＃xff1b;
&＃xff08;4&＃xff09;this指向问题。

15.call和apply的区别

call方法&＃xff1a;

        语法&＃xff1a;call(thisObj&＃xff0c;Object1,Object2...)
        定义&＃xff1a;调用一个对象的一个方法&＃xff0c;以另一个对象替换当前对象&＃xff0c;改变当前的this指向的问题。
        说明&＃xff1a;call 方法可以用来代替另一个对象调用一个方法&＃xff0c;可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数&＃xff0c;那么 Global 对象被用作 thisObj。 

apply方法&＃xff1a; 

        语法&＃xff1a;apply(thisObj&＃xff0c;[argArray])
        定义&＃xff1a;应用某一对象的一个方法&＃xff0c;用另一个对象替换当前对象。 
        说明&＃xff1a; 如果 argArray 不是一个有效的数组或者不是 arguments 对象&＃xff0c;那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数&＃xff0c;那么 Global 对象将被用作 thisObj&＃xff0c; 并且无法被传递任何参数。

16.b继承a的方法

function A( age, name ){ this.age &＃61; age; this.name &＃61; name; 
} A.prototype.show &＃61; function(){ alert(&＃39;父级方法&＃39;); 
} function B(age,name,job){ A.apply( this, arguments ); this.job &＃61; job; 
} B.prototype &＃61; new A();
var b &＃61; new A(14,&＃39;侠客行&＃39;); 
var a &＃61; new B(15,&＃39;狼侠&＃39;,&＃39;侠客&＃39;); 

17.添加 删除 替换 插入到某个节点的方法

obj.appendChid()obj.removeChild()obj.replaceChild()obj.insertBefore()

18.Javascript的本地对象&＃xff0c;内置对象和宿主对象

本地对象为array、obj、regexp等可以new实例化&＃xff1b;

内置对象为gload、Math等不可以实例化的&＃xff1b;

宿主为浏览器自带的document、window 等。

19.window.onload 和document.ready的区别

        引入js文件的两种方式&＃xff1a;一种原生的&＃xff0c;一种是jQuery库的入口函数。

        window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法&＃xff0c;jquery中有 $(document).ready(function(){代码}),在dom文档树加载完之后执行一个函数&＃xff08;注意&＃xff0c;这里面的文档树加载完不代表全部文件加载完&＃xff09;。

        $(document).ready要比window.onload先执行&＃xff0c;执行的上下文不同&＃xff0c;window.onload只能出来一次&＃xff0c;$(document).ready可以出现多次。

20.”&＃61;&＃61;”和“&＃61;&＃61;&＃61;”的不同、Javascript的同源策略是指&＃xff1f;

        前者会自动转换类型&＃xff0c;只是比较数值&＃xff0c;不比较数据类型&＃xff0c;后者即比较数据类型也比较数值。

        一段脚本只能读取来自于同一来源的窗口和文档的属性&＃xff0c;这里的同一来源指的是主机名、协议端口号的组合。

21.Javascript是一门什么样的语言&＃xff0c;它有哪些特点&＃xff1f;

        Javascript一种直译式脚本语言&＃xff0c;是一种动态类型、弱类型、基于原型的语言&＃xff0c;内置支持类型。它的解释器被称为Javascript引擎&＃xff0c;为浏览器的一部分&＃xff0c;广泛用于客户端的脚本语言&＃xff0c;最早是在HTML网页上使用&＃xff0c;用来给HTML网页增加动态功能。Javascript兼容于ECMA标准&＃xff0c;因此也称为ECMAScript。特点如下&＃xff1a;

&＃xff08;1&＃xff09;是一种解释性脚本语言&＃xff08;代码不进行预编译&＃xff09;&＃xff1b;
&＃xff08;2&＃xff09;主要用来向HTML&＃xff08;标准通用标记语言下的一个应用&＃xff09;页面添加交互行为&＃xff1b;
&＃xff08;3&＃xff09;可以直接嵌入HTML页面&＃xff0c;但写成单独的js文件有利于结构和行为的分离&＃xff1b;
&＃xff08;4&＃xff09;跨平台特性&＃xff0c;在绝大多数浏览器的支持下&＃xff0c;可以在多种平台下运行&＃xff08;如Windows、Linux、Mac、Android、iOS等&＃xff09;。

22.Javascript的数据类型都有什么&＃xff1f;

基本数据类型&＃xff1a;String、boolean、Number、Undefined、Null&＃xff1b;

引用数据类型&＃xff1a;Object(Array、Date、RegExp、Function)&＃xff1b;

//如何判断某变量是否为数组数据类型&＃xff1f;
if(typeof Array.isArray&＃61;&＃61;&＃61;"undefined")
{Array.isArray &＃61; function(arg){return Object.prototype.toString.call(arg)&＃61;&＃61;&＃61;"[object Array]"};  
}

23.已知ID的Input输入框&＃xff0c;如何获取这个输入框的输入值&＃xff1f;

document.getElementById(“ID”).value; $(“#id”).val();

24.如何获取到页面中所有的checkbox&＃xff1f;

var domList &＃61; document.getElementsByTagName(‘input’)
var checkBoxList &＃61; [];
var len &＃61; domList.length;  //缓存到局部变量
while (len--) {  //使用while的效率会比for循环更高if (domList[len].type &＃61;&＃61; ‘checkbox’) {checkBoxList.push(domList[len]);}
}

25.设置一个已知ID的DIV的html内容为xxxx&＃xff0c;字体颜色设置为黑色

var dom &＃61; document.getElementById(“ID”);
dom.innerHTML &＃61; “xxxx”
dom.style.color &＃61; “#000” 

26.当一个DOM节点被点击时候&＃xff0c;我们希望能够执行一个函数&＃xff0c;应该怎么做&＃xff1f;

直接在DOM里绑定事件&＃xff1a;

在JS里通过onclick绑定&＃xff1a;xxx.onclick &＃61; test
通过事件添加进行绑定&＃xff1a;addEventListener(xxx, ‘click’, test)

补充&＃xff1a;Javascript的事件流模型都有什么&＃xff1f;

        “事件冒泡”&＃xff1a;事件开始由最具体的元素接受&＃xff0c;然后逐级向上传播&＃xff1b;
        “事件捕捉”&＃xff1a;事件由最不具体的节点先接收&＃xff0c;然后逐级向下&＃xff0c;一直到最具体的&＃xff1b;
        “DOM事件流”&＃xff1a;三个阶段&＃xff1a;事件捕捉&＃xff0c;目标阶段&＃xff0c;事件冒泡。

27.以下代码输出结果为&＃xff1f;原因是&＃xff1f;

var a;
alert(typeof a);  // undefined
alert(b);  // 报错

        Undefined是一个只有一个值的数据类型&＃xff0c;这个值就是“undefined”&＃xff0c;在使用var声明变量但并未对其赋值进行初始化时&＃xff0c;这个变量的值就是undefined。而b由于未声明所以会报错。注意未申明的变量&＃xff08;a is not defined&＃xff09;和声明了未赋值的是不一样的。

28.以下代码输出结果为&＃xff1f;原因是&＃xff1f;

var a &＃61; null;
alert(typeof a);  //object

        null是一个只有一个值的数据类型&＃xff0c;这个值就是null。表示一个空指针对象&＃xff0c;所以用typeof检测会返回”object”。

29.以下代码输出结果为&＃xff1f;原因是&＃xff1f;

var undefined;
undefined &＃61;&＃61; null; // true
1 &＃61;&＃61; true;   // true
2 &＃61;&＃61; true;   // false
0 &＃61;&＃61; false;  // true
0 &＃61;&＃61; &＃39;&＃39;;     // true
NaN &＃61;&＃61; NaN;  // false
[] &＃61;&＃61; false; // true
[] &＃61;&＃61; ![];   // true

数据类型的隐式转换&＃xff1a;

&＃xff08;1&＃xff09;数字&＃43;字符串   数字转换为字符串后拼接&＃xff1b;
&＃xff08;2&＃xff09;数字&＃43;布尔型   布尔型转换为数字&＃xff0c;true--1&＃xff0c;false--0&＃xff1b;
&＃xff08;3&＃xff09;布尔型&＃43;字符串   布尔型转换为字符串后拼接&＃xff1b;
&＃xff08;4&＃xff09;undefined&＃43;数字  undefined转为NaN&＃xff1b;
&＃xff08;5&＃xff09;减乘除时&＃xff0c;数据自动转为数值。

        对于0、空字符串的判断&＃xff0c;建议使用 “&＃61;&＃61;&＃61;” &＃xff0c;会先判断两边的值类型&＃xff0c;类型不匹配时为false。

var foo &＃61; "11"&＃43;2-"1";
console.log(foo);
console.log(typeof foo);

        执行完后foo的值为111&＃xff0c;foo的类型为Number。

30.看代码给答案

var a &＃61; new Object();
a.value &＃61; 1;
b &＃61; a;
b.value &＃61; 2;
alert(a.value);

答案&＃xff1a;2&＃xff08;考察引用数据类型细节&＃xff09;引用数据类型&＃xff0c;数据放在堆中&＃xff0c;指针指向这个数据。

31.怎样添加、移除、移动、复制、创建和查找节点

&＃xff08;1&＃xff09;创建新节点

createDocumentFragment()	创建一个DOM片段
createElement()	创建一个具体的元素
createTextNode()	创建一个文本节点

&＃xff08;2&＃xff09;添加、移除、替换、插入

appendChild()	添加
removeChild()	移除
replaceChild()	替换
insertBefore()	插入

&＃xff08;3&＃xff09;查找

getElementsByTagName()	通过标签名称
getElementsByName()	通过元素的Name属性的值
getElementById()	通过元素Id&＃xff0c;唯一性
getElementsByClassName()	通过元素的类名

32.正则表达式构造函数var reg&＃61;new RegExp(“xxx”)与正则表达字面量var reg&＃61;//有什么不同&＃xff1f;正则表达式如何匹配邮箱&＃xff1f;

        当使用RegExp()构造函数的时候&＃xff0c;不仅需要转义引号&＃xff08;即\”表示”&＃xff09;&＃xff0c;并且还需要双反斜杠&＃xff08;即\\表示一个\&＃xff09;&＃xff0c;使用正则表达字面量的效率更高。 

        邮箱的正则匹配&＃xff1a;

var regMail &＃61; /^([a-zA-Z0-9_-])&＃43;&＃64;([a-zA-Z0-9_-])&＃43;((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

33.以下代码输出结果为

for(var i&＃61;1;i<&＃61;3;i&＃43;&＃43;){setTimeout(function(){console.log(i);    },0);  
};//4 4 4&＃xff0c;Javascript事件处理器在线程空闲之前不会运行

34.Javascript中callee和caller的作用

caller是返回一个对函数的引用&＃xff0c;该函数调用了当前函数&＃xff1b;

callee是返回正在被执行的function函数&＃xff0c;也就是所指定的function对象的正文。

35.如何检索当前页面中的表单元素中的所有文本框&＃xff0c;并将它们全部清空&＃xff1f;

36.如何让页面的状态栏中显示“已经选中该文本框”&＃xff1f;

A. window.status&＃61;”已经选中该文本框” √
B. document.status&＃61;”已经选中该文本框”
C. window.screen&＃61;”已经选中该文本框”
D. document.screen&＃61;”已经选中该文本框”

37.以下哪条语句会产生运行错误&＃xff1f;

A.var obj &＃61; (); √
B.var obj &＃61; [];
C.var obj &＃61; {};
D.var obj &＃61; //; √

38.以下哪个单词不属于Javascript保留字&＃xff1f;

A.with
B.parent √
C.class
D.void

39.以下代码输出结果为

var arr &＃61; new Array(1 ,3 ,5);arr[4]&＃61;&＃39;z&＃39;;arr2 &＃61; arr.reverse();arr3 &＃61; arr.concat(arr2);alert(arr3);//弹出提示对话框&＃xff1a;z,,5,3,1,z,,5,3,1

40.补充按钮事件的函数&＃xff0c;确认用户是否退出当前页面&＃xff0c;确认之后关闭窗口