2024年前端最新笔试百题

A. event.preventDefault()

B. event.prevent()

C. event.drag()

D. event.drop()

2. 以下不支持冒泡的鼠标事件为( )？

A. mouseover

B. click

C. mouseleave

D. mousemove

3. 在javascript中，用于阻止默认事件的默认操作的方法是

A. stopDeafault()

B. stopPropagation()

C. preventDefault()

D. preventDefaultEven()

4. 事件传播的三个阶段是什么

目标 -> 捕获 -> 冒泡

冒泡 -> 目标 -> 捕获

目标 -> 冒泡 -> 捕获

捕获 -> 目标 -> 冒泡

5. 下面有关 javascript 常见事件的触发情况，描述错误的是？

A. onchange：用户改变域的内容

B. onkeypress：某个键盘的键被按下或按住

C. onmousedown：某个鼠标按键被按下

D. onblur：元素获得焦点

答案

ACCDD

DOM遍历

1. 下列哪项不属于DOM查找节点的属性()？

A. parentObj.firstChild

B. parentObj.children

C. neborNode.previousSibling

D. neborNode.siblings

2. DOM中，给父节点添加子节点的正确方法为()？

A. appendChild(parentNode,newNode);

B. append(parentNode,newNode);

C. parentNode.append(newNode);

D. parentNode.appendChild(newNode);

3. JavaScript中document.getElementById()返回值的类型为？

A. Array

B. Object

C. String

D. Function

4. DOM中，给父节点添加子节点的正确方法为()？

A. appendChild(parentNode,newNode);

B. append(parentNode,newNode);

C. parentNode.append(newNode);

D. parentNode.appendChild(newNode);

答案

DDBD

其他

1. DOM元素的以下属性改变会导致重排(reflows)的是

outline

visiblity

font-size

background-color

答案

C

BOM题

1. setInterval(updateClock,60)的含义是( )？

A. 每隔60秒调用一次updateClock()

B. 每隔60毫秒调用一次updateClock()

C. 每隔60分钟调用一次updateClock()

D. 每分钟调用60次updateClock()

2. 使用方法( )可以获取到地理位置所在的经纬度？

A. Geolocation.watchPosition()

B. Geolocation.getCurrentPosition()

C. Geolocation.getPosition()

D. Geolocation.Position()

3. setInterval(“alert(‘welcome’);”,1000);这段代码的意思是

A. 等待1000秒后，再弹出一个对话框

B. 等待1秒钟后弹出一个对话框

C. 每隔一秒钟弹出一个对话框

D. 语句报错,语法有问题

答案

BBC

ES6题

箭头函数

1. 下列对js箭头函数描述错误的是()

A. 箭头函数没有原型属性

B. 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

C. 箭头函数可以作为构造函数，使用new

D. 箭头函数不绑定arguments，取而代之用rest参数解决

2. 关于箭头函数下列说法错误的一项是：

A. 函数体内this的指向是定义时所在的对象，而不是使用时所在的对象

B. 箭头函数内不能使用arguments对象

C. 箭头函数不能使用yield命令

D. 可以使用new创建一个箭头函数的实例

答案

CD

promise

1. 关于将 Promise.all 和 Promise.race 传入空数组的两段代码的输出结果说法正确的是：

Promise.all([]).then((res) => {

console.log(‘all’);

});

Promise.race([]).then((res) => {

console.log(‘race’);

});

A. all 和 race 都会被输出

B. all 和 race 都不会被输出

C. all 会被输出，而 race 不会被输出

D. all 不会被输出，race 会被输出

2. 以下方案中，不是用于解决回调陷阱的的是：

A. Promise

B. Generator

C. async

D. Proxy

3. 在 ECMAScript6 中，不属于promise的状态是:

A. Pending

B. Pause

C. Fulfilled

D. Rejected

答案

CDB

解构赋值

1. 关于ES6解构表达式,描述正确的是()

let [a,b, c,d, e] = “hello”;

A. e = “hello”;

B. 其它都为undefined

C. 当中 a = “h”, b = “e”;

D. 语法报错

答案

C

多选题

---

JS基础

1. 下面哪些数组方法会改变原数组

A. push

B. concat

C. splice

D. map

2. 下面可以声明数字的js代码是

A. const a = 0xa1

B. const a = 076

C. const a = 0b21

D. const a = 7e2

3. 以下属于操作符 typeof 的返回值的是：

(1)function

(2) object

(3) null

(4) array

(5) NaN

(6) bigint

(7) regexp

(8) undefined

A. (1)、(2)、(3)、(4)、(5)、(6)、(7)、(8)

B. (1)、(2)、(3)、(8)

C. (1)、(2)、(8)

D. (1)、(2)、(6)、(8)

4. 以下()结果等于字符串string

A. typeof ‘string’

B. String(‘string’).toString()

C. ‘string’.split(‘’).sort().join(‘’)

D. (function(string){return string})(‘string’)

E. JSON.parse(‘{“string”:“string”}’).string

5. 下面的等式成立的是?

A. parseInt(46.8) == parseFloat(46.8)

B. NaN !== NaN

C. isNaN(‘abc’) == NaN

D. typeof NaN === ‘number’

6. 以下哪些选项可以将集合A转化为数组？

A. Array.from(A)

B. [].slice.apply(A)

C. […A]

D. [].map.call(A, o => o)

7. 下列结果返回 true 的是

A. null == undefined

B. null === undefined

C. null === null

D. NaN == null

E. NaN === NaN

F. Infinity + 1 !== Infinity

答案

AC ABD D ABDE BD ABCD AC

JS深入

1. 关于以下代码，说法正确的有哪些？

function Person() { }

var person = new Person();

A. 每一个原型都有一个constructor属性指向关联的构造函数。

B. 每一个对象都有一个prototype属性。

C. Object.getPrototypeOf(person) === Person.prototype

D. person.constructor === Person

2. 下列在 JS 时间循环机制中属于微任务(microTask)的是？

A. process.nextTick

B. promise

C. setTimeout

D. setInterval

答案

ACD AB

ES6

1. 以下关于let和const的说法中正确的是:

A. let声明的变量值和类型都可以改变

B. const声明的常量不可以改变

C. 两者都不存在变量提升，同时存在暂时性死区，只能在声明的位置后面使用

D. const可以先声明再初始化，可以后赋值

2. 下面关于Promise说法正确的是(注意“返回结果”的意思包含成功或者失败)

A. Promise.all在所有给定的promise都fulfilled后才返回结果

B. Promise.race在给定的promise中，某个fulfilled后才返回结果

C. promise.then的回调函数中，可以返回一个新的promise

D. 对于一个向后台获取数据已经产生结果的promise:p1，再次调用p1.then，不会去重新发起请求获取数据

答案

ABC CD

DOM

1. 下列关于使用 JS 修改元素样式的代码，正确的有哪些？

document.body.style.[‘background-color’] = ‘#fff’

document.body.style.setProperty(‘background-color’, ‘#fff’)

document.body.style = ‘background-color’: #fff’

document.body.style.fontSize = ‘14px’

2. 下列方法可用于阻止事件冒泡的有

A. event.cancelBubble = true;

B. event.stopPropagation();

C. event.preventDefault();

D. return false;

答案

BCD ABD

填空题

---

类型检测

1. 在JavaScript中，有var arr = []; typeof arr的结果为

2. 以下使用 typeof 操作符的代码的输出结果为

var x = typeof x

var res = typeof typeof x;

console.log(x, res)

3. [typeof null, null instanceof Object]的结果是什么

4. typeof typeof 0

5. JavaScript的typeof运算符的可能结果为array？解释为什么

6. 下面代码的输出结果是多少？

var arr = [];

console.log(typeof arr, Object.prototype.toString.call(arr));

7. console.log(Object.prototype.toString.call(undefined))

类型转换

1. 表达式 “2”+3+4 的值为

2. console.log(‘5’ + 3, 5 + ‘3’)

3. var a=parseInt(“111办公室”);alert(a);

4. [“0x1”, “0x2”, “0x3”].map(parseInt) 的结果

5. 在js中执行 1+'1’的结果是？

6. 在js中执行 parseInt(‘77’,40)的结果是?

逻辑判断

1. 请给出 [5<6<3,3<2<4] 代码的运行结果

2. (2<3)||(3<2) 表达式将返回值为

3. console.log(true||false&&false, true&&false||true)的输出结果是？

其他

1. 1 + - + + + - + 1 的结果是

2. [ ‘a’, ,‘b’, ,].length 的结果是

程序题

---

JS基础

1. 下面两个程序的输出结果分别是？

// case 1

function showCase(value) {

switch(value) {

case ‘A’:

console.log(‘Case A’);

break;

case ‘B’:

console.log(‘Case B’);

break;

case undefined:

console.log(‘Case undefined’);

break;

default:

console.log(‘Case default’);

}

}

showCase(new String(‘A’));

// case 2

function showCase(value) {

switch(value) {

case ‘A’:

console.log(‘Case A’);

break;

case ‘B’:

console.log(‘Case B’);

break;

case undefined:

console.log(‘Case undefined’);

break;

default:

console.log(‘Case default’);

}

}

showCase(String(‘A’));

2. p标签的的内容会显示什么？

3. document.write的结果会是什么？

function funcA(x){

var temp = 4;

function funcB(y){

document.write( ++x + y + (temp–));

}

funcB(5);

}

funcA(6)

4. alert的结果会是多少

var varArr = function(i,j,str) {

return j == 0 ? str : varArr(i,–j,(str+= " " + i[j]));

}

var arr = new Array(‘apple’,‘orange’,‘peach’,‘lime’);

var str = varArr(arr,arr.length,“”);

alert(str);

5. 下面程序的输出结果是多少？

function greetingMaker(greeting) {

function addName(name) {

greeting = greeting.split(’ ').reverse().join(“-”);

return greeting + " " + name;

}

return addName;

}

var daytimeGreeting = greetingMaker(“Good Day to you”);

alert(daytimeGreeting(name));

6. 下面程序的输出结果是多少？

String.prototype.GetNum = function() {

var regEx = /[^\d]/g;

return this.replace(regEx, ‘’);

};

var str = “a1b2c3”;

str = str.GetNum();

alert(str);

7. 下面程序的输出结果是多少？

function sum(a, b) {

return a + b;

}

sum(1, “2”);

8. 下面程序的输出结果是多少？

var str = “我非常喜欢编程”;

str.length = 3;

console.log(str);

9. 下面程序的输出结果是多少？

let number = 0;

console.log(number++);

console.log(++number);

console.log(number);

10. 下面程序的输出结果是多少？

function nums(a, b) {

if (a > b)

console.log(‘a is bigger’)

else

console.log(‘b is bigger’)

return a + b

}

console.log(nums(4, 2))

console.log(nums(1, 2))

11. 下面程序输出结果是多少？

function side(arr) {

arr[0] = arr[2];

}

function func1(a, b, c = 3) {

c = 10;

side(arguments);

console.log(a + b + c);

}

function func2(a, b, c) {

c = 10;

side(arguments);

console.log(a + b + c);

}

func1(1, 1, 1);

func2(1, 1, 1);

12. 下面代码的输出结果是什么？

var a = 3;

var b = new Number(3);

var c = 3;

console.log(a == b);

console.log(a === b);

console.log(b === c);

13. 执行下列语句后，a.length的值为？

var a = [];

a.push(1, 2);

a.shift(3, 4);

a.concat([5, 6]);

a.splice(0, 1, 2);

14. 下面这几段代码分别输出结果是多少？为什么？

var a = {}, b = ‘123’, c = 123;

a[b] = ‘b’;

a[c] = ‘c’;

console.log(a[b]);

// example 2

var a = {}, b = Symbol(‘123’), c = Symbol(‘123’);

a[b] = ‘b’;

a[c] = ‘c’;

console.log(a[b]);

// example 3

var a = {}, b = {key:‘123’}, c = {key:‘456’};

a[b] = ‘b’;

a[c] = ‘c’;

console.log(a[b]);

15. 下面每项的返回值是什么？为什么？

null == undefined

0.1 + 0.2 == 0.3

typeof NaN

typeof Function

typeof Object

typeof {}

‘a’ + 1

‘a’ - 1

Function instanceof Object

Object instanceof Function

16. 下面程序的输出结果是多少？

var array = []

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

array.push(() => i)

}

var newArray = array.map(el => el())

console.log(newArray)

17. 下面程序的输出结果是多少？

function a(m, n) {

var b = function (l) {

return l <= m ? l * b(l + 1) : 1;

}

return b(m - n + 1);

}

console.log(a(4, 2));

18. 下面程序的输出结果是多少？

console.log(typeof undefined == typeof NULL);

console.log(typeof function () {} == typeof class {});

19. 执行后a和b.age的值分别为

var a = 10

var b = {

age: 11

}

function fn(x,y) {

–y.age;

return --x;

}

fn(a,b)

20. 下面程序的执行结果是：

var number = 4;

var numberFactorial = (function (number){

return (number === 0)? 1: number* factorial(number-1)

})(number)

console.log(numberFactorial)

21. 下面程序的输出结果是：

var array = []

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

array.push(() => i)

}

var newArray = array.map(el => el())

console.log(newArray)

22. 下面程序的输出结果是：

function addToList(item, list) {

return list.push(item)

}

const result = addToList(“nowcoder”, [“hello”])

console.log(result)

23. 下面程序的输出结果是：

const first = () => { console.log(‘first’); return false; }

const second = () => { console.log(‘second’); return true; }

console.log( first() && second() );

console.log( second() || first() );

24. 下面代码的输出结果是：

var s=‘12ab3cd’, arr=s.split(/\d/);

console.log(arr[3],arr[4])

25. 下面程序的输出结果是：

function getAge(…args) {

console.log(typeof args);

}

getAge(21);

26. 下面程序的输出结果是:

var arr=[1,2,3];

arr.push(arr.shift())

console.log(arr[1],arr[2])

JS深入

this指向

1. 下列程序的输出结果是多少？为什么？

var x = 1;

var obj = {

x: 3,

fun:function () {

var x = 5;

return this.x;

}

};

var fun = obj.fun;

console.log( obj.fun(), fun() );

2. 下列程序的输出结果是多少？你能理清楚test函数的this指向吗？

var a = 5;

function test() {

a = 0;

alert(a);

alert(this.a);

var a;

alert(a);

}

new test();

3. 下列程序的输出结果是多少？为什么？

function fun () {

return () => {

return () => {

return () => {

console.log(this.name)

}

}

}

}

var f = fun.call({name: ‘foo’})

var t1 = f.call({name: ‘bar’})()()

var t2 = f().call({name: ‘baz’})()

var t3 = f()().call({name: ‘qux’})

4. 执行以下代码，输出结果分别是多少？

let obj1 = {

a: 1,

foo: () => {

console.log(this.a)

}

}

// log1

obj1.foo()

const obj2 = obj1.foo

// log2

obj2()

5. 下面程序的输出结果是什么？为什么？

const Person = (name=“wang”,age=10) => {

this.name = name;

this.age = age;

return this.name +’ is '+ this.age + ‘years old’

}

let result = new Person(‘zhang’,11)

console.log(result)

6. 请表述以下代码的执行结果和原因

var person = {

age: 18,

getAge: function() {

return this.age;

}

};

var getAge = person.getAge

getAge()

7. 请按顺序写出打印结果，并说明原因。

var name = ‘global’;

var obj = {

name: ‘local’,

foo: function(){

this.name = ‘foo’;

}.bind(window)

};

var bar = new obj.foo();

setTimeout(function() {

console.log(window.name);

}, 0);

console.log(bar.name);

var bar3 = bar2 = bar;

bar2.name = ‘foo2’;

console.log(bar3.name);

8. 下面程序的执行结果是：

var obj = {

name:“zhangsan”,

sayName:function(){

console.info(this.name);

}

}

var wfunc = obj.sayName;

obj.sayName();

wfunc();

var name = “lisi”;

obj.sayName();

wfunc();

9. 下面程序的输出结果是：

var name=‘test’

var a = {

name: ‘ass’,

getName: function() {

return this.name;

}

}

var b = a.getName;

b();

事件循环

1. 下列程序的输出结果分别是多少？为什么？

const promiseA = Promise.resolve(‘a’)

promiseA. then((res) => {

console.log(res)

}).then((res) => {

console.log(res)

})

const promiseB = Promise.resolve(‘b’)

promiseB. then((res) => {

console.log(res)

})

promiseB. then((res) => {

console.log(res)

})

2. 下面程序的输出结果依次是多少？

setTimeout(() => {

console.log(1)

}, 0)

const P = new Promise((resolve, reject) => {

console.log(2)

setTimeout(() => {

resolve()

console.log(3)

}, 0)

})

P.then(() => {

console.log(4)

})

console.log(5)

3. 下面程序的输出结果是

setTimeout(function(){

console.log(1);

}, 0)

new Promise(function(resolve){

console.log(2);

resolve();

console.log(3);

}).then(function(){

console.log(4);

})

console.log(5);

4. 下面程序的输出结果是？

(async () => {

console.log(1);

setTimeout(() => {

console.log(2);

}, 0);

await new Promise((resolve, reject) => {

console.log(3);

}).then(() => {

console.log(4);

});

console.log(5);

})();

5. 下面程序的输出结果是:

new Promise((resolve) => {

console.log(‘1’)

resolve()

console.log(‘2’)

}).then(() => {

console.log(‘3’)

})

setTimeout(() => {

console.log(‘4’)

})

console.log(‘5’)

6. 下面程序的输出结果是:

var p1 = new Promise(function(resolve, reject){

resolve(“2”)

})

setTimeout(function(){

console.log(“1”)

},10)

p1.then(function(value){

console.log(value)

})

setTimeout(function(){

console.log(“3”)

},0)

7. 下面程序的输出结果是：

setTimeout(function() {

console.log(‘setTimeout’);

}, 0);

Promise.resolve().then(function() {

console.log(‘promise1’);

}).then(function() {

console.log(‘promise2’);

});

8. 请表述以下代码的执行结果和原因

setTimeout(function() {

console.log(1)

},0)

new Promise(function executor(resolve){

console.log(2)

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

i - 9999 && resolve()

}

console.log(3)

}).then(function() {

console.log(4)

})

console.log(5)

9. 在网页中有两个div块，html代码如下

对应的js代码如下：

var outer = document.querySelector(‘.outer’);

var inner = document.querySelector(‘.inner’);

function onClick() {

console.log(‘click’);

setTimeout(function() {

console.log(‘timeout’);

}, 0);

Promise.resolve().then(function() {

console.log(‘promise’);

});

outer.setAttribute(‘data-random’, Math.random());

}

inner.addEventListener(‘click’, onClick);

outer.addEventListener(‘click’, onClick);

当点击class为inner的div块时，控制台依次输出结果是什么？

10. 下面程序的输出结果是？

(async () => {

console.log(1);

setTimeout(() => {

console.log(2);

}, 0);

await new Promise((resolve, reject) => {

console.log(3);

}).then(() => {

console.log(4);

});

console.log(5);

})();

11. 下面程序的输出结果是：

setTimeout(() => console.log(‘a’));

Promise.resolve().then(

() => console.log('b’);

).then(

() => Promise.resolve(‘c’).then(

(data) => {

setTimeout(() => console.log(‘d’));

console.log(‘f’);

return data;

}

)

).then(data => console.log(data));

12. 下面程序的输出结果是：

console.log(‘one’);

setTimeout(function() { console.log(‘two’); }, 0);

Promise.resolve()

.then(function() { console.log(‘three’); })

console.log(‘four’);

13. 下面程序的执行结果是：

setTimeout(function () {

console.log©

},0)

console.log(‘D’)

new Promise(function(resolve){

console.log(‘E’)

resolve()

console.log(‘F’)

}).then(function() {

console.log(‘G’)

})

console.log(‘H’)

14. 有一个输出函数定义如下：

function log(msg, time) {

return new Promise((resolve) => {

setTimeout(() => {

console.log(msg);

resolve();

}, time);

});

}

则下面三段代码输出的结果是：

// 第一段代码：

(async () => {

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

await log(i, 1000);

}

})();

// 第二段代码：

(async () => {

[ 1, 2, 3, 4 ].forEach(async (i) => {

await log(i, 1000);

});

})();

// 第三段代码：

(async () => {

for (const i of [ 1, 2, 3, 4 ]) {

await log(i, 1000);

}

})();

原型与原型链

1. 下面程序的输出结果依次是？

function Fn1(name) {

if(name){

this.name = name;

}

}

Fn1.prototype.name=“jack”

let a = new Fn1();

console.log(‘a:’, a.name);

function Fn2(name) {

this.name = name;

}

Fn2.prototype.name=“jack”

let b = new Fn2();

console.log(‘b:’, b.name);

2. 下面程序的输出结果是？

var Foo = (function() {

var x = 0;

function Foo() {}

Foo.prototype.increment = function() {

++x;

console.log(x);

};

return Foo;

})();

var a = new Foo();

a.increment();

a.increment();

var b = new Foo();

a.increment();

3. 下面程序的输出结果是？

var name = ‘Jay’

function Person(name){

this.name = name;

console.log(this.name)

}

var a = Person(‘Tom’)

console.log(name)

console.log(a)

var b = new Person(‘Michael’)

console.log(b)

4. 请表述以下代码的执行结果和原因

class A{}

class B extends A{}

const a = new A()

const b = new B()

a.proto

b.proto

B. proto

B. prototype.proto

b.proto.proto

5. 请表述以下代码的执行结果和原因

function test() {

getName = function() {

Promise.resolve().then(() => console.log(0));

console.log(1);

};

return this;

}

test.getName = function() {

setTimeout(() => console.log(2), 0);

console.log(3);

};

test.prototype.getName = function() {

console.log(4);

};

var getName = function() {

console.log(5);

};

function getName() {

console.log(6);

}

test.getName();

getName();

test().getName();

getName();

new test.getName();

new test().getName();

new new test().getName();

6. 请表述以下代码的执行结果和原因

var tmp = {};

var A = function() {};

A. prototype = tmp;

var a = new A();

A. prototype = {};

var b = Object.create(tmp);

b.constructor = A. constructor;

console.log(a instanceof A);

console.log(b instanceof A);

7. 下面程序的执行结果是：

function Foo(){}

Foo.prototype.z = 3;

var obj = new Foo();

console.info(obj.z)

obj.z = 10;

console.info(obj.z);

delete obj.z;

console.info(obj.z);

8. 下面程序的执行结果是：

const Book = {

price: 32

}

const book = Object.create(Book);

book.type = ‘Math’;

delete book.price;

delete book.type;

console.log(book.price);

console.log(book.type);

作用域与预编译

1. 下面的程序会报错吗？如果不会，输出结果分别是多少？

function sayHello() {

console.log(name);

console.log(age);

var name = “Tom”;

let age = 18;

}

sayHello();

2. 下面的程序i的打印结果分别是多少？

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

setTimeout(_ => {

console.log(i)

})

}

for (let i = 0; i < 3; i++) {

setTimeout(_ => {

console.log(i)

})

}

3. 下面程序的输出结果是：

console.log(a);

var a = ‘a’;

console.log(b);

let b = ‘b’;

4. 下面程序的输出结果是：

var foo = “Hello”;

(function(){

var bar = " World";

alert(foo + bar);

})();

alert(foo + bar);

5. 下面程序的输出结果是：

var a = 10;

(function () {

console.log(a)

a = 5

console.log(window.a)

var a = 20;

console.log(a)

})()

6. 下面代码的输出结果是:

const a = 10

function runFunction() {

const a = 20

console.log(‘inside’, a)

}

runFunction()

console.log(‘outside’, a)

7. 请描述打印结果并说明原因

“use strict”

var name = ‘Jay’

var person = {

name: ‘Wang’,

pro: {

name: ‘Michael’,

getName: function () {

return this.name

}

}

}

console.log(person.pro.getName)

var people = person.pro.getName

console.log(people())

8. 下面程序的结果是：

• 1
• 2
• 3
• 4