前端笔试题js（容易翻车的小坑）(不定时更新)

71 阅读 0 评论 47 点赞

我是靠谱客的博主淡定手链，最近开发中收集的这篇文章主要介绍前端笔试题js（容易翻车的小坑）(不定时更新)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

3.有语句“varx=0;while(____)x+=2;”，要使while循环体执行10次，空白处的循环判定式应写为：C

A．x<10 B．x<=10 C．x<20 D．x<=20

4.JS语句() vara1=10;vara2=20; alert(“a1+a2=”+a1+a2) 将显示()结果。B

A.a1+a2=30
B.a1+a2=1020
C. a1+a2=a1+a2

10.对于前端人员，经常听到的：结构，表现，行为三者分离中的结构指什么( )B

A: css B: html C: javascript D: document

var a = false; var x=a?’A’:’B’; X的值是（）B

A. A
B.B
C.TRUE
D.FALSE

执行以下程序后，x的值是（）
var x=0;
switch(++x){
case 0: ++x;
case 1: ++x;
case 2: ++x;
}

A. 1 B. 2 C. 3 D. 4

Number(null);此代码将返回（）

A.Null
B.1
C.undefined
D.0

17.结束本次循环，进入下一次循环的关键词是（）

A. continue B. break C. return D. end

填空题

2）<script>
var x,y=null;
alert(x);//undefined
alert(y);//null
alert(x=y);//null
alert(x==y);//null
</script>

4）当单击button按钮时，出现什么结果。

<title>UntitledDocument</title>
<script language=’javaScript”>
function
add(){
var first=document.getElementById(‘first’).value; ‘40’ 字符串
var second=parseInt(document.getElementById(‘second).value); 30 数字类型
var third=parseInt(document.getElementById(‘third).value); 70 数字类型
alert(first+second+third); //‘40’+30+70；403070
}
</script>
<body>
<form name="myForm">
<input type="text" id="first" value="40">
<input type="text" id="second" value="30">
<input type="text" id="third" value="70">
<input type="button" value="add" οnclick="add()">
</form>
</body>

6）function fn(a,b,c){
alert(arguments.length);
}
fn();//获取实参，结果为0；

1.js的数据类型有哪些//

string,object,number,null,undefined,array,boolean,

3.js的三种输出方式分别是什么 //

console.log() document.write() alert()

小总结：


var a1=10;
var a2=20;
alert(a1+a2+'='+a1+a2);//30=1020;
//'+'放在算式前面代表拼接，如+a1+a2为1020；
//'+'放在算式后面，不影响计算,如a1+a2为30；
//结构指的是HTML，布局或表现指的是CSS，行为指的是js

//7月15日小更

下面代码的执行结果是()
var a=123;
fn(a);
function fn(){a=456}
document.write(a);A

A.456　　B.122　　C.报错　　D.undefined

5.下面代码的执行结果是（）
var i=12;
var sum=i++ + ++i + ++i*2 + i-- + i–
document.write(sum+’ ’+i); A

A.85
13
　　B.84 12　　C.83 11　　D.85 14

15.New Date(2012,12,8).getMonth()的结果是什么//C

A.12
　　 B. 11 　　C.0
　　D.13

19.var n=’liang zi ju zhen’.indexOf(‘zi’,7); n的值为A

A.-1　　B.5　　C.报错　　D.-10

20.0.1+0.7==0.8该表达式返回B

A.true　　B.false　　C.infinity　　D.NaN

1）两次的弹出结果分别是什么

var uname = 'jack'
function change() {
alert(uname) // ?undefined
var uname = 'lily'
alert(uname)
//?lily
}
change()

2）计算

7+’3’等于多少？7-‘3’等于多少？ 7*‘3’等于多少//73 4 21

3）求结果

var f = function(s) {
if (!arguments.length || !s) {
return null;
}else
if ("" == s) {
return 0;
}else{
var m = 0;
for (var i = 0; i < s.length; i++) {
m++
}
alert(m);//3
}
};
f("你好a")

substring和substr的区别?

 /* substr("找的开始字符串的下标","查找字符串长度");
substring("查找的开始字符串的下标","查找的结束字符串下标"); */
var str = 'xiua baby ning zhen bang you';
console.log(str.substr(5, 4));//baby
console.log(str.substring(10,14));//ning
//注意：截取位置不包括结束的位置，意味着前闭后开，和random类似

浮点数

// js浮点数运算会出现多位小数，如0.1+0.2 = 0.30000000000000004, 这是由于在运算的时候先把浮点数转化成二进制后进行运算，但是有的小数在二进制编码后出现无限循环，因而导致计算出现了误差
alert(0.1+0.2==0.3)//false

日期

 /*
console.log(new Date(2012,12,8).getMonth());//0
console.log(new Date("2012-12-8").getMonth());//11 */

indexOf(‘str’[,num]);//字符串中某个字符串的位置

[]内可写可不写，若写的话，此num尽量往小了写，若是写的过大，超过要查询的字符串的下标，则查不到，会返回-1
var n = 'liang zi ju zhen';
n.indexOf('zi', 7);
console.log(n.indexOf('zi', 7))// -1
console.log(n.indexOf('zi'));//6
console.log(n.indexOf('zi', 3));//6

........................................................

7.29 小更新

3.下面对象或数组的创建方式错误的是（）B

A.var obj={};
B.Var obj={[]};
C.Var obk=[{}];
D.Var obj={age:123};


var a={
c:'张三',
"b":'刘邓',
}
console.log(a);
var a=[{b:12},{name:'jack'},{'p':'dd'}]
console.log(a);
//json对象里面的格式为键值对，键的加不加双引号都可，值若为数字，双引号加不加都可以，若不是数字的双引号加
//对象的格式为 {}，[{},{}],

7.下面描述错误的是（）C

A.document.head //返回head元素
B.document.body //返回body元素
C.document.html
//错的，没有这种语法！
D.document.documentElement
//返回html元素

8.以下返回结果为类数组对象的语句为(多选)BD

A.document.getElementById()
B.document.getElementsByClassName()
C.document.querySelector()
D.document.querySelectorAll()

10.下面代码的输出是什么？（）C

for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 1);
}
for (let i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 1);
}

A: 0 1 2 and 0 1 2
B: 0 1 2 and 3 3 3
C: 3 3 3 and 0 1 2
D: 2 1 0 and 0 1 2

18.javascript中的操作符不包括( ) A //加减乘除

A. $
B. &&
C. ?:
D. %

二、根据程序写结果
1）代码执行结果是什么

console.log(a)
//undefined
var a = 1;
var getNum = function() {
a = 2;
}
function getNum() {
a = 3;
}
console.log(a)//1
getNum()
console.log(a)//2

2）根据代码写结果

var a = {}
var b = {
key: "a"
}
var c = {
key: "c"
}
a[b] = "123";
a[c] = "456";
console.log(a[b])//456

var a = {}
var b = {
key: "a"
}
var c = {
key: "c"
}
a[b] = "123";//赋值
console.log(a);//{[object Object]:"123"};
a[c] = "456";
console.log(a[b]);//456;
// 替换掉了
console.log(a);//{[object Object]:"456"};
console.log(a[c]);//456

3）let str4='get-element-by-id'
let arr5=[]
let arr4=str4.split('-')
console.log(arr4)
for(let s in arr4){
var str= arr4[s].replace(arr4[s][0],arr4[s][0].toUpperCase())
arr5.push(str)
}
let str4s=arr5.join('')
console.log(str4s)


let str4 = 'get-element-by-id'
let arr5 = []
let arr4 = str4.split('-')
console.log(arr4)//['get','element','by','id']
for (let s in arr4) {//for in循环，通过下标循环数组
var str = arr4[s].replace(arr4[s][0], arr4[s][0].toUpperCase())
arr5.push(str)
}
let str4s = arr5.join('')
console.log(str4s)//['Get','Element','By','Id']

小总结：细节，一定要注重细节！高手过招，细节决定成败，不做眼高手低！加油啊baby!!!

…
8.13小更

2.JS变量定义的语法是什么？

答：var 变量名 = 初始值;

3.JS变量命名规则是什么？

答：
变量名命名规则:
1, 由数字, 字母, 下划线 以及 $符号 组成, 数字不能开头
2, 不能与系统关键字重名;
3, 见名知意
4, 使用驼峰命名法
5, 不要与其他变量名重名

4.JS有几种基本数据类型，分别是什么？
答：

JS 中五中基本类型:
number ------ 数值类型
string ------ 字符串类型
boolean ----- 布尔类型
null -------- 空类型 输出Object
undefined --- 未定义类型

5.分支有哪两种？

答：if分支、switch分支

7.循环的执行流程是什么?

答：
for (①循环变量初始化; ②循环条件; ③循环变量增量) {
④循环语句(循环体);
}
循环执行的流程:① - ② - ④ - ③ - ② - ④ - ③ ... ②

8.21小更

3.函数的所有参数会被保存在哪个数组中？

答：arguments

4.什么是闭包函数？使用闭包函数会对局部变量产生什么影响？

答：
闭包函数：定义的函数内部的函数称为闭包函数。
影响: 如果在闭包函数中使用了局部变量, 该变量将在闭包函数调用结束之后被系统回收

5.当我们通过JS获取页面元素的left、top等属性值时需要注意什么问题？

答：获取的是行间样式的属性值,因此需要我们在行间设置对应的属性值。

6.tween.js的使用步骤？

答：Tween.js的使用:
1.引入js
2.语法
Tween.缓动函数名.缓动效果(t, b, c, d)
返回值: 第几步的属性值

7.tween.js使用中四个量t,b,c,d分别代表什么？

答：
t: 初始的步数(第几步)
b: 初始的属性值
c: 属性值的改变量
d: 总共的步数

12.定义函数实现以下功能：清除页面所有计时器。

function clearAllTimer(){
var timer=setInterval(function(){},100){
}
for(var i=0;i<timer.length;i++){
clearInterval(i);
}
}

8.27小更

1.为元素关联事件的方法有哪些？

1)在DOM元素中直接绑定；为元素添加事件属性
2)在JavaScript代码中绑定；on+事件名称
3)绑定事件监听函数
addEventListener;
IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数

2.JS中有哪几种类型的事件？

鼠标事件、键盘事件、表单事件、触屏事件;

3.mousedown、mouseup、click三种类型事件的触发顺序是什么？

mousedown、mouseup、click

4.在触发dbclick事件时,同时也会触发click事件.怎么避免在触发双击事件时触发单击事件(代码实现)？

var timeoutID = null;
oneDiv.onclick = function() {
clearTimeout(timeoutID);
timeoutID = setTimeout(function() {
console.log("单击");
}, 200);
}
oneDiv.ondblclick = function() {
clearTimeout(timeoutID);
console.log("双击");
}

5.失去焦点和得到焦点会触发的事件是什么？

blur focus

6.写出你知道的能够通过事件对象获取到的位置信息？

screenX、screenY;clientX、clientY; offsetX、offsetY;
pageX、pageY;

7.谈谈你对事件冒泡与事件捕获的理解？

事件冒泡: 事件从最明确的标签开始逐渐向他的父级标签扩散;
事件捕获: 事件从最不明确的标签开始逐渐扩散到最明确的标签;

8.面向对象与面向过程的区别？

面向过程: 以事件为中心, 将事件的完成分成若干步, 按照具体步骤实施.
面向对象: 以事物为中心, 考虑的是完成某件事儿, 都有哪些事物参加了, 然后逐个完善这些事物. 最后, 事件的完成是这些事物的相互结合.

9.写出两种JS中创建对象的方法(对象名自己定)。

var car = new Object();
var stu = {};

10.使用简单写法定义一个car对象，要求：拥有品牌、价格、颜色特征；拥有跑、刹车行为(属性值自定，行为中输出一句话即可)？

var car = {
brand:"奔驰",
price:600,
color:"black",
run:function() {
console.log("嗖嗖的");
},
stop:function() {
console.log("刹车,吱吱的");
}
}

11.快速枚举上述car对象，逐一输出各个键值对儿？

for (var k in car) {
console.log(k + ":" + car[k]);
}

12.有批量创建敌机对象的需求，敌机有速度、血量、得分、坐标位置(x和y两个)属性，另外每个敌机对象都有移动的行为(使用log输出一句话即可)。使用代码处理这个需求。

function Enemy(x, y, speed, hp, score) {
// 属性
this.x = x;
this.y = y;
this.speed = speed;// 速度
this.hp = hp;// 血量
this.score = score;// 分数
}
// 移动
Enemy.prototype.move = function() {
console.log(“你会飞吗?”);
}

9.3小更
2.写出两种向父元素中添加子元素的方法?

答: appendChild()、insertBefore(new,old)

3.替换指定标签、移除指定标签方法分别是什么？

答:
替换：replaceChild(new,old) 移除：removeChild()

4.设置标签属性、获取标签属性、获取指定节点的父节点、获取指定节点的所有子节点，分别对应的属性和方法是什么？

答: setAttribute()、getAttribute()、parentNode、childNodes

5.想要获取某一元素包含边框和内边距的宽度应该使用哪个属性?

答: offsetWidth

6.现有一id名为toTop的div怎么设置能够实现以下效果：点击该div,使页面返回顶部(CSS样式和JS都要写出来)?

答:
#toTop {
position: fixed;
right: 15px;
bottom: 15px;
}
document.getElementById(“toTop”).onClick = function() {
document.body.scrollTop = 0;
}

window有哪些子对象？

1, document 对象
2, history 对象
3, location 对象
4, navigator 对象
5, screen 对象
6, frames 对象

8.想要获取或者处理窗口的URL信息，需要对哪个对象进行操作?

答: location 对象

谈谈你对取消默认行为与阻止事件传播的认识。

取消默认行为是取消系统的相关默认事件,取消默认行为的方式根据事件绑定方式的不同,分为两种:
1, on + 事件类型、attachEvent()使用return false;阻止默认行为;
2, addEventListener 系列使用even.preventDefault();阻止默认行为;
阻止事件传播是阻止事件的传递,根据不同类型的事件,阻止事件传播可以使用不同的方法:
1,冒泡类型的事件可以通过even.cancelBubble = true;阻止事件传播;
2,捕获类型的事件可以通过even.stopPropagation(); 阻止事件传播;

怎么让有一段代码只在Chrome浏览其中运行(代码实现)？

if (navigator.userAgent.indexOf("Chrome") != -1) {
alert("人生要想过得去...");
};

谈谈你对键盘事件的认识？

1,常用的键盘事件keydown(键盘按下)、keyup(键盘抬起)、keypress(键盘一直被按压)
2,如果给元素关联了keydown事件同时又一直按压键盘不抬起,会一直触发keydown事件(类似于keypress的效果
3,可以通过事件对象的keyCode值的不同,区别按的是键盘的哪个按键,从而做出不同的响应;

2021.2.26小更
1.style标签写在body前与写body后有什么区别，会造成什么后果

 写在body标签前利于浏览器逐步渲染：
写在body标签后：由于浏览器以逐行方式对html文档进行解析,当解析到写在尾部的样式表（外联或写在
style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染；
在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）；

2.jQuery中的" $. e x t e n d () " 和 "$ .fn.extend()"的区别：

2021年4月份找工作时碰到的一些面试题总结
1.原型链
2.promise
3.vuex值页面刷新消失
4.localStorage、session、cookie
5.内存泄漏
6.闭包
7.GC
8.垃圾回收机制
9.父子间传值 props、父子间通信即改变值互相影响 $parent 和 $children、refs
10.事件监听
11.mixin

2021.9.13 小更

微任务和宏任务

setTimeout(function(){
console.log('1')
});
new
Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3')
});
console.log('4');