原生JS的面试题（31-60），关注收藏，持续更新

燕穗子博客

已于 2022-06-01 21:42:03 修改

阅读量3.8k

点赞数 3

分类专栏： IT面试文章标签：面试 javascript 开发语言 java vscode

于 2022-04-19 09:00:03 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124259738

版权

IT面试专栏收录该内容

96 篇文章 35 订阅

订阅专栏

31. 用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。

方法一

function randomNub(aArray, len, min, max) {

    if (len >= max - min) {

//用于限制所取的随机数小于所有的数字

        return "超过" + min + "-" + max + "之间的个数范围" + (max - min - 1) + "个的总数";
    
    }

//排序

    if (aArray.length >= len) {

        aArray.sort(function (a, b) {

        return a - b;

    });

    return aArray;

}

//随即取数

var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);

    for (var j = 0; j < aArray.length; j++) {

    //判断去除重复的数字

    if (nowNub == aArray[j]) {

        randomNub(aArray, len, min, max);

        return;
    
    }

}

//将取到的数字放入到数组里

    aArray.push(nowNub);
    
//再次调用

    randomNub(aArray, len, min, max);

    return aArray;

}

var arr = [];

// console.log(randomNub(arr, 10, 10, 100))

//方法二

function randomNub(aArray, len, min, max) {

if (len >= max - min) {

//用于限制所取的随机数小于所有的数字

return "超过" + min + "-" + max + "之间的个数范围" + (max - min - 1) + "个的总数";

}

//随即取10个数字

var nowNub;

while (len) {

nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);

if (aArray.indexOf(nowNub) === -1) {

aArray.push(nowNub);

len--

}

}



//排序

if (aArray.length >= len) {

aArray.sort(function (a, b) {

return a - b;

});

return aArray;

}

}

var arr = [];

console.log(randomNub(arr, 10, 10, 100));

32. 把两个数组合并，并删除第二个元素。

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1.concat(bArray);

cArray.splice(1,1);

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

1）创建新节点

createDocumentFragment() //创建一个 DOM 片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的 Name 属性的值

getElementById() //通过元素 Id，唯一性

33. 正则表达式构造函数 var reg=new RegExp(“xxx”)与正则表达字面量 var reg=//有什么不同？匹配邮箱的正则表达式？

答案：当使用 RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需

要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。

邮箱的正则匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

34. 看下面代码，给出输出结果。

for(var i=1;i<=3;i++){

setTimeout(function(){

console.log(i); //4,4,4

},0 );

};

for(var i=1;i<=3;i++){

setTimeout((function(a){ //改成立即执行函数

console.log(a); //1,2,3

})(i),0);

};

35. 写一个 function，清除字符串前后的空格。（兼容所有浏览器）

使用自带接口 trim()，考虑兼容性：

/* 清除字符串前后的空格。（兼容所有浏览器） */

//使用自带接口trim()，考虑兼容性：

if (!String.prototype.trim) {

    String.prototype.trim = function () {

        return this.replace(/^\s+/, "").replace(/\s+$/, "")

    };

}
var str = "   test string ".trim()

console.log(str)

符号含义：

\s： space，空格

+：一个或多个

^：开始，^\s，以空格开始

$：结束，\s$，以空格结束

42. Javascript 中, 以下哪条语句一定会产生运行错误？答案( B C )

var _变量=NaN;

B、var 0bj = []; //0在不能在前面

C、var obj = //;//undefined

D、var obj = {};

36. 以下两个变量 a 和 b，a+b 的哪个结果是 NaN？答案( AC )

A、var a=undefined; b=NaN

B、var a= ‘123’; b=NaN

C、var a =undefined , b =NaN

D、var a=NaN , b='undefined'

37. var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的？答案 ( B )

A. 34 B、35 C、36 D、37

理解： a++和++a 都属于自增运算符，区别是对变量a的值进行自增的时机不同。

++a：先进行自增，后进行取值，在操作期间的a值为原值+1。

a++：先进行取值，后进行自增，在操作期间的a值为原值。

38. JavaScript 语句中，实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空

for (var i = 0; i < document.forms.length; i++) {

for (var j = 0; j < document.forms.elements.length; j++) {

        if (document.forms.elements[j].type == "text") document.forms.elements[j].value = ""

    }

}

38. 要将页面的状态栏中显示“已经选中该文本框”

window.status=”已经选中该文本框”

理解：window.status属性可设置或返回窗口状态栏中的文本。兼容性极差，只能在Opera中用

39. 判断真假

null instanceof Object //false

null === undefined //false

null == undefined //true

NaN == NaN //false

typeof(null) == 'object' //true

40. 分析代码，得出正确的结果。

var a = 10,

b = 20,

c = 30;

++a; //11

a++; //12

e = ++a + ++b + c++ + a++; //13+21+30+13

alert(e);//77

41.写出函数 DateDemo 的返回结果，系统时间假定为今天

function DateDemo() {

var d,

s = "今天日期是：";

d = new Date();

s += d.getMonth() + 1 + "/";

s += d.getDate() + "/";

s += d.getFullYear();

return s;

}

console.log(DateDemo());

42.写出程序运行的结果？

for (i = 0, j = 0; i < 10, j < 6; i++, j++){

k = i + j

}

console.log(k)//10

43. 阅读以下代码，请分析出结果：

var arr = new Array(1, 3, 5);

arr[4] = "z"

arr2 = arr.reverse();

arr3 = arr.concat(arr2);

console.log(arr3);

//['z', empty, 5, 3, 1, 'z', empty, 5, 3, 1]

44.补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗?

function closeWin() {

    if (confirm("确定要退出吗?")) {

        window.close()//关闭当前页面

    }

}

45:表达式，并将以下字符串中的 html 标签去除掉

var str = "<div>这里是 div<p>里面的段落</p></div>";

var reg = /<\/?\w+\/?>/gi

var str = "<div>这里是 div<p>里面的段落</p></div>"

alert(str.replace(reg, ""))

46. 完成 foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。

<form name="form">

<input type="radio" name="radioGroup" />

<input type="radio" name="radioGroup" />

<input type="radio" name="radioGroup" />

<input type="radio" name="radioGroup" />

<input type="submit" />

</form>

<script>

function foo() {

var rdo = document.getElementsByName("radioGroup");

for (let i = 0; i < rdo.length; i++) {

rdo[i].addEventListener("change", function () {console.log(i+1)})}}

foo();

</script>

47.截取字符串 abcdefg 的 efg的方法

常见的截取字符串的方法有slice()、substring()、substr()这三种方法

slice()：

第一个参数：需要截取的起始点

第二个参数：截取结束的点。

若第二个参数不传，默认会截取到当前对象的最后

slice可以传负数

substring()：用于提取字符串中介于两个指定下标之间的字符

不可传负值；返回值是一个新的字符串。

参数，

第一个参数是必须的，

第二个参数是可选的。若不传第二个参数，默认会提取到最后。

若前面的参数比后面的参数大，但是substring会自动的调整两个参数的位置，也就是大的参数总是在后面。

substr()：用于在字符串中

第一个参数位置起，必须的

截取到第二个指定的参数个数。可选的。

若不传输第二个参数，默认会截取到字符串最后

48. 列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window对象的常用方法至少 5 个

对象：

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属

性；

document 对象，文档对象；

location 对象，浏览器当前 URL 信息；

navigator 对象，浏览器本身信息；

screen 对象，客户端屏幕信息；

history 对象，浏览器访问历史信息；

方法：alert(), confirm(), prompt(), open(), close() ，focus()，blur()

49. 简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法并做简单说明

getElementById() ：

根据id属性值获取元素对象。id属性值一般唯一

getElementsByTagName()：

根据元素名称获取元素对象们。返回值是一个数组

getElementsByClassName():

根据Class属性值获取元素对象们。返回值是一个数组

getElementsByName():

根据name属性值获取元素对象们。返回值是一个数组

50. 希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName("input");

var checkBoxList = [];

var len = domList.length; //缓存到局部变量

while (len--) { //使用 while 的效率会比 for 循环更高

if (domList[len].type == "checkbox") {

checkBoxList.push(domList[len]);

}

}

console.log(checkBoxList);

51. 简述创建函数的几种方式

①构造函数

var fun = new Function(console.log('hello'));

②函数声明

function fun(num1, num2) {

return num1 + num2;

}

③函数表达式

var fun2 = function (num1, num2) {

return num1 + num2;

};

52. Javascript 创建对象的几种方式？

1、var obj = {};（使用 json 创建对象）

obj.name = '张三';

obj.action = function () {...};

2、var obj = new Object();（使用 Object 创建对象）

obj.name = '张三';

obj.action = function () {...};

3、通过函数创建对象。

（1）、使用 this 关键字

var obj = function (){

this.name ='张三';

this.action = function () { } }

(2)、使用 prototype 关键字

function obj (){}

obj.prototype.name ='张三';

obj.prototype.action=function () { ...};

4、通过 Window 创建对象。

如：window.name = ''张三';

window.age = 19;

window.action= function() {...};

5、使用内置对象创建对象。

如：var str = new String("实例初始化 String");

var str1 = "直接赋值的 String";

var func = new Function("x","alert(x)");//示例初始化 func

var obj = new Object();//示例初始化一个 Object

53.判断一个字符串中出现次数最多的字符，统计这个次数

<script>

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;

}

}

alert("出现次数最多的是:" + iIndex + "出现" + iMax + "次");

54. 写一个获取非行间样式的函数

行间样式：元素内部用style定义的样式，如:<div style="width:200px;"></div>

非行间样式：在<style></style>内通过css定义的样式

style只能获取行间样式

currentStyle——获取非行间（当前样式）IE浏览器专属，chrome和FF不兼容。

getComputedStyle(obj, false)——获取非行间（计算后的样式）IE不兼容。

//obj：哪个元素

//attr：那个样式

function getStyle(obj, attr, value) {

if (!value) {

if (obj.currentStyle) {

return obj.currentStyle(attr);

} else {

obj.getComputedStyle(attr, false);

}

} else {

obj.style[attr] = value;

}

}

55.事件委托是什么

事件代理（Event Delegation），又称之为事件委托,“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡

56.闭包是什么，有什么特性，对页面有什么影响

闭包:是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

function outer() {

    var num = 1;

    function inner() {

        var n = 2;

        alert(n + num);

    }

     return inner;

    }

outer()();

优点：

① 减少全局变量。

② 减少传递函数的参数量

③ 封装；

缺点：
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等.

57.解释 jsonp 的原理，以及为什么不是真正的 ajax

JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

JSONP原理

ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

动态创建 script 标签，回调函数

Ajax 是页面无刷新请求数据操作

58.字符串反转，如将 '12345678' 变成 '87654321'

思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 jion() 转换为字符串

var str = '12345678';

str = str.split('').reverse().join('');

59. 生成 5 个不同的随机数（两种方式）

var num1 = [];

let len = 5;

//方法一

for (var i = 0; i < 5; i++) {

// num1[i] = Math.floor(Math.random() * 10) + 1; //范围是 [1, 10]

// for (var j = 0; j < i; j++) {

// if (num1[i] == num1[j]) {

// i--;

// }

// }

}

while (len) {

//方法二

let num = Math.floor(Math.random() * 10) + 1;

if (num1.indexOf(num) === -1) {

num1.push(num);

len--;

}

}

console.log(num1);

60.去掉数组中重复的数字

let arr = [2, 3, 6, 2, 3, 5, 8, 3, 4];

//方式一

Array.prototype.unique = function () {

var len = this.length,

newArr = [],

flag = 1;

for (var i = 0; i < len; i++, flag = 1) {

for (var j = 0; j < i; j++) {

if (this[i] == this[j]) {

flag = 0; //找到相同的数字后，不执行添加数据}

}

flag ? newArr.push(this[i]) : "";

}

return newArr;

};

console.log(arr.unique());

//方式二

Array.prototype.unique2 = function () {

var newArr2 = []; //一个新的临时数组

for (var i = 0;i < this.length;i++ //遍历当前数组) {

//如果当前数组的第 i 已经保存进了临时数组，那么跳过，否则把当前项 push 到临时数组里面

if (newArr2.indexOf(this[i]) === -1) {

newArr2.push(this[i]);}

}

return newArr2;

};

console.log(arr.unique2());

//方式三

Array.prototype.unique3 = function () {

var set = new Set(this);

var newArr3 = [...set];

return newArr3;

};

console.log(arr.unique3());

燕穗子博客

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS的面试题（31-60），关注收藏，持续更新

用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。方法一functionrandomNub(aArray, len, min, max) {if(len>= max- min) {//用于限制所取的随机数小于所有的数字return"超过"+ min+ "-"+ max+ "之间的个数范围"+ (max- min- 1) + "个的总数";}//排序if(aArray.length>= len) {aA...
复制链接

扫一扫