牛客最新前端JS面试百题，面试阿里的时候一定会问到的

Ndk开发校长

已于 2024-04-14 18:44:27 修改

阅读量1k

点赞数 14

分类专栏： 2024年程序员学习文章标签：前端 javascript 面试

于 2024-04-14 18:44:25 首次发布

本文链接：https://blog.csdn.net/m0_61041374/article/details/137751376

版权

2024年程序员学习专栏收录该内容

218 篇文章 1 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

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

A. Array.from(A)

B. [].slice.apply(A)

C. […A]

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

下列结果返回 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深入

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

function Person() { }

var person = new Person();

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

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

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

D. person.constructor === Person

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

A. process.nextTick

B. promise

C. setTimeout

D. setInterval

答案

ACD AB

ES6

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

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

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

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

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

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

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

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

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

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

答案

ABC CD

DOM

下列关于使用 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’

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

A. event.cancelBubble = true;

B. event.stopPropagation();

C. event.preventDefault();

D. return false;

答案

BCD ABD

填空题

类型检测

在JavaScript中，有var arr = []; typeof arr的结果为
以下使用 typeof 操作符的代码的输出结果为

var x = typeof x

var res = typeof typeof x;

console.log(x, res)

[typeof null, null instanceof Object]的结果是什么
typeof typeof 0
JavaScript的typeof运算符的可能结果为array？解释为什么
下面代码的输出结果是多少？

var arr = [];

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

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

类型转换

表达式 “2”+3+4 的值为
console.log(‘5’ + 3, 5 + ‘3’)
var a=parseInt(“111办公室”);alert(a);
[“0x1”, “0x2”, “0x3”].map(parseInt) 的结果
在js中执行 1+'1’的结果是？
在js中执行 parseInt(‘77’,40)的结果是?

逻辑判断

请给出 [5<6<3,3<2<4] 代码的运行结果
(2<3)||(3<2) 表达式将返回值为
console.log(true||false&&false, true&&false||true)的输出结果是？

其他

1 + - + + + - + 1 的结果是
[ ‘a’, ,‘b’, ,].length 的结果是

程序题

JS基础

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

// 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’));

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

document.write的结果会是什么？

function funcA(x){

var temp = 4;

function funcB(y){

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

}

funcB(5);

}

funcA(6)

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

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

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

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

String.prototype.GetNum = function() {

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

return this.replace(regEx, ‘’);

};

var str = “a1b2c3”;

str = str.GetNum();

alert(str);

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

function sum(a, b) {

return a + b;

}

sum(1, “2”);

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

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

str.length = 3;

console.log(str);

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

let number = 0;

console.log(number++);

console.log(++number);

console.log(number);

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

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))

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

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

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

var a = 3;

var b = new Number(3);

var c = 3;

console.log(a == b);

console.log(a === b);

console.log(b === c);

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

var a = [];

a.push(1, 2);

a.shift(3, 4);

a.concat([5, 6]);

a.splice(0, 1, 2);

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

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]);

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

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

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

var array = []

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

array.push(() => i)

}

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

console.log(newArray)

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

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

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

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

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

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

var a = 10

var b = {

age: 11

}

function fn(x,y) {

–y.age;

return --x;

}

fn(a,b)

下面程序的执行结果是：

var number = 4;

var numberFactorial = (function (number){

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

})(number)

console.log(numberFactorial)

下面程序的输出结果是：

var array = []

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

array.push(() => i)

}

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

console.log(newArray)

下面程序的输出结果是：

function addToList(item, list) {

return list.push(item)

}

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

console.log(result)

下面程序的输出结果是：

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

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

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

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

下面代码的输出结果是：

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

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

下面程序的输出结果是：

function getAge(…args) {

console.log(typeof args);

}

getAge(21);

下面程序的输出结果是:

var arr=[1,2,3];

arr.push(arr.shift())

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

JS深入

this指向

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

var x = 1;

var obj = {

x: 3,

fun:function () {

var x = 5;

return this.x;

}

};

var fun = obj.fun;

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

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

var a = 5;

function test() {

a = 0;

alert(a);

alert(this.a);

var a;

alert(a);

}

new test();

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

function fun () {

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’})

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

let obj1 = {

a: 1,

foo: () => {

console.log(this.a)

}

// log1

obj1.foo()

const obj2 = obj1.foo

// log2

obj2()

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

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)

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

var person = {

age: 18,

getAge: function() {

return this.age;

}

};

var getAge = person.getAge

getAge()

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

var name = ‘global’;

var obj = {

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

下面程序的执行结果是：

var obj = {

name:“zhangsan”,

sayName:function(){

console.info(this.name);

}

var wfunc = obj.sayName;

obj.sayName();

wfunc();

var name = “lisi”;

obj.sayName();

wfunc();

下面程序的输出结果是：

var name=‘test’

var a = {

getName: function() {

return this.name;

}

var b = a.getName;

b();

事件循环

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

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)

})

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

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)

下面程序的输出结果是

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

下面程序的输出结果是？

(async () => {

console.log(1);

setTimeout(() => {

console.log(2);

}, 0);

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

console.log(3);

}).then(() => {

console.log(4);

});

console.log(5);

})();

下面程序的输出结果是:

new Promise((resolve) => {

console.log(‘1’)

resolve()

console.log(‘2’)

}).then(() => {

console.log(‘3’)

})

setTimeout(() => {

console.log(‘4’)

})

console.log(‘5’)

下面程序的输出结果是:

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)

下面程序的输出结果是：

setTimeout(function() {

console.log(‘setTimeout’);

}, 0);

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

console.log(‘promise1’);

}).then(function() {

console.log(‘promise2’);

});

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

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)

在网页中有两个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);

})();

下面程序的输出结果是：

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

下面程序的输出结果是：

console.log(‘one’);

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

Promise.resolve()

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

console.log(‘four’);

下面程序的执行结果是：

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’)

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

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

}

})();

原型与原型链

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

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

下面程序的输出结果是？

var Foo = (function() {

var x = 0;

function Foo() {}

Foo.prototype.increment = function() {

++x;

console.log(x);

};

return Foo;

})();

var a = new Foo();

a.increment();

var b = new Foo();

a.increment();

下面程序的输出结果是？

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)

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

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

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

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();

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

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

下面程序的执行结果是：

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

下面程序的执行结果是：

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

作用域与预编译

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

function sayHello() {

console.log(name);

console.log(age);

var name = “Tom”;

let age = 18;

}

sayHello();

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

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

setTimeout(_ => {

console.log(i)

})

}

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

setTimeout(_ => {

console.log(i)

})

}

下面程序的输出结果是：

console.log(a);

var a = ‘a’;

console.log(b);

let b = ‘b’;

下面程序的输出结果是：

var foo = “Hello”;

(function(){

var bar = " World";

alert(foo + bar);

})();

alert(foo + bar);

下面程序的输出结果是：

var a = 10;

(function () {

console.log(a)

a = 5

console.log(window.a)

var a = 20;

console.log(a)

})()

下面代码的输出结果是:

const a = 10

function runFunction() {

const a = 20

console.log(‘inside’, a)

}

runFunction()

console.log(‘outside’, a)

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

“use strict”

var name = ‘Jay’

var person = {

pro: {

getName: function () {

return this.name

}

console.log(person.pro.getName)

var people = person.pro.getName

console.log(people())

下面程序的结果是：

1
2
3
4
1. 输出结果是：
$(function () {

function fn1( value ) {

alert( value );

}

function fn2( value ) {

fn1(“A”);

return false;

}

var callbacks = $.Callbacks();

callbacks.add( fn1 );

callbacks.fire( “B” );

callbacks.add( fn2 );

callbacks.fire( “C” );

})
1. 实现在p元素后添加“Hello World!”，则横线处应使用的方法为( )？
This is a paragraph.

This is another paragraph.

在每个p元素的结尾添加内容
1. 输出结果是：
content

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
ttps://blog.csdn.net/qq_32036091/article/details/120973034)module
1. 请写出index里面的输出结果
// module.js

export default () => “Hello world”

export const name = “nowcoder”

// index.js

import * as data from “./module”

console.log(data)
1. 有a.js和b.js两个文件，请写出b文件中代码的输出
// a.js

let a = 1

let b = {}

setTimeout(() => {

a = 2

b.b = 2

}, 100)

module.exports = { a, b }

// b.js

const a = require(‘./a’)

console.log(a.a)

console.log(a.b)

setTimeout(() => {

console.log(a.a)

console.log(a.b)

}, 500)

其他
1. 输出结果是：
content
1. 输出结果是：
$(function () {

function fn1( value ) {

alert( value );

}

function fn2( value ) {

fn1(“A”);

return false;

}

var callbacks = $.Callbacks();

callbacks.add( fn1 );

callbacks.fire( “B” );

callbacks.add( fn2 );

callbacks.fire( “C” );

})
1. 实现在p元素后添加“Hello World!”，则横线处应使用的方法为( )？
This is a paragraph.

This is another paragraph.

在每个p元素的结尾添加内容
1. 输出结果是：
content

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-WGEvOdQC-1713091448704)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！