前言
面经部分题目传送门: 牛客最新前端面经面试题汇总(含解析)
前几天空闲时间抓取了牛客最新的笔试题和面试题,想做一下数据统计,展望一下面试中JavaScript的平凡考点和火爆考点,给未来自己的学习指引一下方向。
但当统计完数据后,准备分析时,我才发现:我找不到特别好的切入点来进行分析,同时我只能想到使用饼图和柱状图展示各个题型或考点的出现频次,这为我上一篇的文章失败埋下了巨大的伏笔。
详情文章:抓取牛客最新前端面试题五百道 数据分析JS面试热点
虽然文章反响有些不尽人意,我也感觉有几分挫败,但往好处想,这篇文章并非一无是处,还是有几分可取之处的。通过简单的数据统计与分析,我们还是可以从中收获些东西,就比如三大爆点: JavaScript 深入、promise、手撕代码等。
通过这篇文章,我还收到了很多大佬的留言:大家对题目的渴望度很高。于是我就快马加鞭,终于把笔试题部分的题目全部分类和整理完毕,希望能帮到需要面试的大佬们。
不多说了,进入题海吧。
单选题
JS基础
js概念与类型检测
- 以下不属于 typeof 运算符返回值的是?
A. "string" B. "function" C. "object" D. "null" 复制代码
- 执行以下代码,错误的输出结果是
A. 输入:typeof {"x":1} 输出:"object" B. 输入:typeof 1 输出:"number" C. 输入:typeof [{x:1}] 输出:"array" D. 输入:typeof NaN 输出:"number" 复制代码
- 可以用typeof来判断的基本类型有
A. undefined B. null C. array D. object 复制代码
- 以下不属于JavaScript基本数据类型的是:
A. Boolean B. undefined C. Symbol D. Array 复制代码
- 以下关于JavaScript中数据类型的说法错误的是()
A. 数据类型分为基本数据类型和引用数据类型 B. JavaScript一共有8种数据类型 C. Object是引用数据类型,且只存储于堆(heap)中 D. BigInt是可以表示任意精度整数的基本数据类型,存储于栈(stack)中 复制代码
答案
DCADC 复制代码
逻辑判断
- 请选择结果为ture的表达式?
A. null instanceof Object B. null === undefined C. null == undefined D. NaN == NaN 复制代码
- 下列代码结果为 true 的是?
A. Symbol.for('a') === Symbol.for('a') B. Symbol('a') === Symbol('a') C. NaN === NaN D. {} === {} 复制代码
- 根据如下变量,下列表达式中返回值为true的是
var a = 1; var b = []; var c = ''; var d = true; 复制代码
A. (a || b) === true B. (b && c) === true C. (c && d) === true D. (d || a) === true 复制代码
- 1==true的返回值是true,这句话是否正确?
A. T B. F 复制代码
- 下面代码输出为true的是?
A. console.log([] === []); B. console.log(undefined == 0); C. console.log(undefined == false); D. console.log(false == ''); 复制代码
- 浏览器环境下,以下打印结果为true的是
A. console.log("12" === 12) B. console.log (NaN === NaN) C. console.log (typeof(null) === typeof(window)) D. console.log ([1,2,3] === [1,2,3]) 复制代码
注意浏览器环境与node环境的差别,比如C选项
- 以下表达式,正确的是
A. Number('a') == Number('a') B. -1 == true C. 3 + '2' === 5 D. ![] == '' 复制代码
答案
CADADCD 复制代码
Math
- 如何把 7.25 四舍五入为最接近的整数
A. Math.round(7.25) B. Math.ceil(7.25) C. round(7.25) D. Math.rnd(7.25) 复制代码
- 下面哪个选项可以产生0<=num<=10的随机整数
A. Math.floor(Math.random()*6) B. Math.floor(Math.random()*10) C. Math.floor(Math.random()*11) D. Math.ceil(Math.random()*10) 复制代码
- 以下( )表达式产生一个0~7之间(含0,7)的随机整数
A. Math.floor(Math.random()*6) B. Math.floor(Math.random()*7) C. Math. floor(Math.random()*8) 复制代码
答案
A CD(注意D) C 复制代码
字符串
- split() 方法用于把一个字符串分割成字符串数组。
A. T B. F 复制代码
- String对象的哪个方法可以寻找子字符串并返回该子字符串位置
A. match() B. indexOf() C. search() D. concat() 复制代码
答案
A BC 复制代码
JSON
- 下面哪一个是JSON数据?
A. {name:"xiaoming",age,"student"} B. {"name":"xiaoming","age":"student"} C. {"xiaoming","student"} D. ["xiaoming","student"] 复制代码
- 下面分别使用 JSON.stringify 方法,返回值 res 分别是
const fn = function(){} const res = JSON.stringify(fn) const num = 123 const res = JSON.stringify(num) const res = JSON.stringify(NaN) const b = true const res = JSON.stringify(b) 复制代码
A. 'function'、'123'、'NaN'、'true' B. undefined、'123'、undefined、'true' C. undefined、'123'、'null'、'true' D. undefined、'123'、'null'、undefined 复制代码
答案
BC 复制代码
数组
- js数组中不会改变原有数组的方法是()
A. push B. concat C. sort D. shift 复制代码
- 下列哪种数组的方法不会修改数组本身
A. slice B. splice C. sort D. unshift 复制代码
- JavaScript中需要往数组末尾处添加一个元素,应该使用以下哪个方法:
A. push B. pop C. shift D. unshift 复制代码
- 以下js操作Array的方法中不能添加元素的是:
A. push B. pop C. unshift D. splice 复制代码
- 数组以下哪个方法会影响原数组?
A. concat B. splice C. slice D. join 复制代码
- JavaScript中,下列哪一个Array的方法的返回值类型和其他不同
A. concat B. shift C. filter D. map 复制代码
- 如下的Array.prototype上的方法中,那个方法不会改变原有的数组?
A. push B. slice C. splice D. sort 复制代码
- 对于一个数字组成的数组 nums,现在需要执行在不改动 nums 的基础上去重操作,返回一个新的无重复元素的数组,以下几段代码能完成这一操作的是()
// (1) const newNums = Array.from(new Set(nums)) 复制代码
// (2) const newNums = nums.filter((n, i) => { return nums.indexOf(n) === i }) 复制代码
// (3) const newNums = nums.forEach((n, i) => { return nums.indexOf(n) === i }) 复制代码
// (4) const newNums = nums.reduce((acc, n, i) => { return [].concat(acc, nums.indexOf(n) === i ? n : [] ) }) 复制代码
A. (1)、(2)、(3)、(4) B. (1)、(3)、(4) C. (1)、(2)、(4) D. (1)、(4) 复制代码
答案
BAABB BBC 复制代码
正则
- 正则表达式 ^d+[^d]+ 能匹配下列哪个字符串?
A. 123 B. 123a C. d123 D. 123def 复制代码
- 下面哪个不是RegExp对象的方法
A. test B. match C. exec D. compile 复制代码
- 以下哪项可以去除变量str中的所有空格
A. str.replace(`/\s*/g,""`) B. str.replace(`/^\s|\s$/g,""`) C. str.replace(`/^\s*/, ""`) D. str.replace(`/(\s*$)/g, ""`) 复制代码
答案
CBA 复制代码
其他
- 下列函数哪个不是JavaScript的全局函数
A. encodeURI B. parseFloat C. round D. eval 复制代码
- 编写高性能JavaScript,以下描述错误的是
A. 遵循严格模式:"use strict" B. 将js脚本放在页面顶部,加快渲染页面 C. 将js脚本成组打包,减少请求,尽量减少使用闭包 D. 使用非阻塞方式下载js脚本,最小化重绘(repaint)和回流(reflow) 复制代码
- 有关JavaScript中系统方法的描述,错误的是?
A. parseFloat方法:该方法将一个字符串转换成对应的小数 B. isNaN方法:该方法用于检测参数是否为数值型,如果是,返回true,否则,返回false。 C. escape方法: 该方法返回对一个字符串编码后的结果字符串 D. eval方法:该方法将某个参数字符串作为一个JavaScript执行题 复制代码
- 下面列出的浏览器,无webkit内核的是()
A. chrome B. Safari C. 搜狗浏览器 D. Firefox 复制代码
- 下列代码哪个能够实现获取形式为 2017-08-01 形式的日期( )?
// A var formatDate=getDate() // B var formatDate = new Date() // C var formatDate = function (date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); return y + '-' + m + '-' + d; }; // D var formatDate = function (date) { var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? '0' + m : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d; return y + '-' + m + '-' + d; }; 复制代码
- 下面哪一项不能最小化重绘(repaint)和回流(reflow)
A. 需要对元素进行复杂的操作时,可以先隐藏(display:"none"),操作完成后再显示 B. 需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入document C. 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流) D. 尽量不要使用 css 属性简写,如:用border-width, border-style, border-color代替border 复制代码
答案
CBBDDD 复制代码
JS深入
this
- 下列哪种方法不能改变this指向()
A. eval B. apply C. bind D. call 复制代码
- 在JavaScript中下面选项关于this描述正确的是
A. 在使用new实例化对象时, this指向这个实例对象 B. 将对象的方法赋值给变量A。执行A()时 该方法中的this指向这个对象。 C. 在函数定义时,this指向全局变量 D. 在浏览器下的全局范围内,this指向全局对象 复制代码
- 下面有关JavaScript中call和apply方法的描述,错误的是?
A. call与apply都属于Function.prototype的一个方法,所以每个function实例都有call、apply属性 B. 两者传递的参数不同,call函数第一个参数都是要传入给当前对象的对象,apply不是 C. apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入 D. call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 复制代码
答案
AAB 复制代码
作用域(闭包)
- 内存泄漏是 javascript 代码中必须尽量避免的,以下几段代码可能会引起内存泄漏的有()
// (1) function getName() { name = 'javascript' } getName() 复制代码
// (2) const elements = { button: document.getElementById('button') }; function removeButton() { document.body.removeChild(elements.button); } removeButton() 复制代码
// (3) let timer = setInterval(() => { const node = document.querySelector('#node') if(node) { clearInterval(timer) } }, 1000); 复制代码
A. (1)、(2)、(3) B. (2)、(3) C. (1)、(3) D. (1)、(2) 复制代码
- 那个操作不会造成内存泄露
A. 没有清理的DOM元素引用 B. 被遗忘的定时器 C. 事件侦听没有移除 D. 局部变量不用时,没有设为null 复制代码
- 下列关于闭包理解错误的是
A. 增加一定的内存消耗 B. 使用不当可能会导致内存泄漏 C. 可以使用闭包模拟私有方法 D. 闭包会改动对象的原型链 复制代码
答案
DDD 复制代码
原型与继承
- JavaScript实现继承的方式,不正确的是:
A. 原型链继承 B. 构造函数继承 C. 组合继承 D. 关联继承 复制代码
- 所有对象都有原型
A. T B. F 复制代码
- 以下关于原型链的描述正确的是:
A. 通过原型链继承的属性和对象自己定义的属性等效 B. 通过原型链可以模拟对象的私有属性 C. 在对象上访问不存在的属性时,会依次遍历整条原型链 D. 所有 JavaScript 中的对象都是位于原型链顶端的 `Object` 的实例 复制代码
答案
DBC 复制代码
其他
- 以下不属于前端数据存储方式的是?
A. jsonp B. cookie C. localStorage D. sessionStorage 复制代码
答案
A 复制代码
DOM题
事件流
- 将A元素拖拽并放置到B元素中,B元素需要做哪项操作()?
A. event.preventDefault() B. event.prevent() C. event.drag() D. event.drop() 复制代码
- 以下不支持冒泡的鼠标事件为( )?
A. mouseover B. click C. mouseleave D. mousemove 复制代码
- 在javascript中,用于阻止默认事件的默认操作的方法是
A. stopDeafault() B. stopPropagation() C. preventDefault() D. preventDefaultEven() 复制代码
- 事件传播的三个阶段是什么
目标 -> 捕获 -> 冒泡 冒泡 -> 目标 -> 捕获 目标 -> 冒泡 -> 捕获 捕获 -> 目标 -> 冒泡 复制代码
- 下面有关 javascript 常见事件的触发情况,描述错误的是?
A. onchange:用户改变域的内容 B. onkeypress:某个键盘的键被按下或按住 C. onmousedown:某个鼠标按键被按下 D. onblur:元素获得焦点 复制代码
答案
ACCDD 复制代码
DOM遍历
- 下列哪项不属于DOM查找节点的属性()?
A. parentObj.firstChild B. parentObj.children C. neborNode.previousSibling D. neborNode.siblings 复制代码
- DOM中,给父节点添加子节点的正确方法为()?
A. appendChild(parentNode,newNode); B. append(parentNode,newNode); C. parentNode.append(newNode); D. parentNode.appendChild(newNode); 复制代码
- JavaScript中document.getElementById()返回值的类型为?
A. Array B. Object C. String D. Function 复制代码
- DOM中,给父节点添加子节点的正确方法为()?
A. appendChild(parentNode,newNode); B. append(parentNode,newNode); C. parentNode.append(newNode); D. parentNode.appendChild(newNode); 复制代码
答案
DDBD 复制代码
其他
- DOM元素的以下属性改变会导致重排(reflows)的是
outline visiblity font-size background-color 复制代码
答案
C 复制代码
BOM题
- setInterval(updateClock,60)的含义是( )?
A. 每隔60秒调用一次updateClock() B. 每隔60毫秒调用一次updateClock() C. 每隔60分钟调用一次updateClock() D. 每分钟调用60次updateClock() 复制代码
- 使用方法( )可以获取到地理位置所在的经纬度?
A. Geolocation.watchPosition() B. Geolocation.getCurrentPosition() C. Geolocation.getPosition() D. Geolocation.Position() 复制代码
- setInterval("alert('welcome');",1000);这段代码的意思是
A. 等待1000秒后,再弹出一个对话框 B. 等待1秒钟后弹出一个对话框 C. 每隔一秒钟弹出一个对话框 D. 语句报错,语法有问题 复制代码
答案
BBC 复制代码
ES6题
箭头函数
- 下列对js箭头函数描述错误的是()
A. 箭头函数没有原型属性 B. 箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值 C. 箭头函数可以作为构造函数,使用new D. 箭头函数不绑定arguments,取而代之用rest参数解决 复制代码
- 关于箭头函数下列说法错误的一项是:
A. 函数体内this的指向是定义时所在的对象,而不是使用时所在的对象 B. 箭头函数内不能使用arguments对象 C. 箭头函数不能使用yield命令 D. 可以使用new创建一个箭头函数的实例 复制代码
答案
CD 复制代码
promise
- 关于将 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 会被输出 复制代码
- 以下方案中,不是用于解决回调陷阱的的是:
A. Promise B. Generator C. async D. Proxy 复制代码
- 在 ECMAScript6 中,不属于promise的状态是:
A. Pending B. Pause C. Fulfilled D. Rejected 复制代码
答案
CDB 复制代码
解构赋值
- 关于ES6解构表达式,描述正确的是()
let [a,b, c,d, e] = "hello"; 复制代码
A. e = "hello"; B. 其它都为undefined C. 当中 a = "h", b = "e"; D. 语法报错 复制代码
答案
C 复制代码
多选题
JS基础
- 下面哪些数组方法会改变原数组
A. push B. concat C. splice D. map 复制代码
- 下面可以声明数字的js代码是
A. const a = 0xa1 B. const a = 076 C. const a = 0b21 D. const a = 7e2 复制代码
- 以下属于操作符 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) 复制代码
- 以下()结果等于字符串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 复制代码
- 下面的等式成立的是?
A. parseInt(46.8) `==` parseFloat(46.8) B. NaN `!==` NaN C. isNaN('abc') `==` NaN D. typeof NaN `===` 'number' 复制代码
- 以下哪些选项可以将集合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标签的的内容会显示什么?
<html> <body> <p id="demo"></p> <script type="text/javascript"> var x = 10; var y = "10"; document.getElementById("demo").innerHTML = Boolean(x == y); </script> </body> </html> 复制代码
- 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指向
题目解析: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 () => { 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'}) 复制代码
- 执行以下代码,输出结果分别是多少?
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 = { 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); 复制代码
- 下面程序的执行结果是:
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 = { name: 'ass', 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代码如下
<div class="outer"> <div class="inner"></div> </div> 复制代码
对应的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(C) },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(); 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 = { name: 'Wang', pro: { name: 'Michael', getName: function () { return this.name } } } console.log(person.pro.getName) var people = person.pro.getName console.log(people()) 复制代码
- 下面程序的结果是:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> var elements = document.getElementsByTagName("li"); for (var i=0;i<elements.length;i++){ elements[i].onclick =function( ){ alert(i); }; } 复制代码
- 下面程序的输出结果是
compute(10,100); var compute = function(A,B) { console.info(A * B) ; }; function compute(A,B){ console.info(A + B); } function compute(A,B){ console.info((A + B)*2); } compute(2,10); 复制代码
- 下面程序的执行结果是:
meili() function meili() { console.log("meili") } mogu() var mogu = function() { console.log("mogu") } 复制代码
- 下面两个代码片段输出结果有什么区别?为什么?
// 片段1 check('first'); function check(ars){ console.log(ars); } // 片段2 check('second'); var check= function(ars){ console.log(ars); } 复制代码