#yyds干货盘点# 牛客最新前端JS笔试百题
前言前几天空闲时间抓取了牛客最新的笔试题和面试题，想做一下数据统计，展望一下面试中JavaScript的平凡考点和火爆考点，给未来自己的学习指引一下方向。
但当统计完数据后，准备分析时，我才发现：我找不到特别好的切入点来进行分析，同时我只能想到使用饼图和柱状图展示各个题型或考点的出现频次，这为我上一篇的文章失败埋下了巨大的伏笔。
虽然文章反响有些不尽人意，我也感觉有几分挫败，但往好处想，这篇文章并非一无是处，还是有几分可取之处的。通过简单的数据统计与分析，我们还是可以从中收获些东西，就比如三大爆点: 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 ( === )注意浏览器环境与node环境的差别，比如C选项
[*]以下表达式，正确的是A. Number('a') == Number('a')
B. -1 == true
C. 3 + '2' === 5
D. ![] == ''
答案
CADADCDMath
[*]如何把 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 BCJSON
[*]下面哪一个是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
答案
CBBDDDJS深入
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
答案
ADOM题
事件流
[*]将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：元素获得焦点
答案
ACCDDDOM遍历
[*]下列哪项不属于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
答案
CBOM题
[*]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. 语句报错,语法有问题
答案
BBCES6题
箭头函数
[*]下列对js箭头函数描述错误的是()
A. 箭头函数没有原型属性
B. 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
C. 箭头函数可以作为构造函数，使用new
D. 箭头函数不绑定arguments，取而代之用rest参数解决
[*]关于箭头函数下列说法错误的一项是：A. 函数体内this的指向是定义时所在的对象，而不是使用时所在的对象
B. 箭头函数内不能使用arguments对象
C. 箭头函数不能使用yield命令
D. 可以使用new创建一个箭头函数的实例
答案
CDpromise
[*]关于将 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 = "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)
[*]以下()结果等于字符串stringA. 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 ACJS深入
[*]关于以下代码，说法正确的有哪些？
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 ABES6
[*]以下关于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 CDDOM
[*]下列关于使用 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 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)的结果是?
逻辑判断
[*]请给出 代码的运行结果
[*](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)
4. alert的结果会是多少
```js
var varArr = function(i,j,str) {
return j == 0 ? str : varArr(i,--j,(str+= " " + i));
}
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));
6. 下面程序的输出结果是多少？
```js
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 = arr;
}
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);
13. 执行下列语句后，a.length的值为？
```js
var a = [];
a.push(1, 2);
a.shift(3, 4);
a.concat();
a.splice(0, 1, 2);
[*]下面这几段代码分别输出结果是多少？为什么？var a = {}, b = '123', c = 123;
a = 'b';
a = 'c';
console.log(a);
// example 2
var a = {}, b = Symbol('123'), c = Symbol('123');
a = 'b';
a = 'c';
console.log(a);
// example 3
var a = {}, b = {key:'123'}, c = {key:'456'};
a = 'b';
a = 'c';
console.log(a);
[*]下面每项的返回值是什么？为什么？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));
18. 下面程序的输出结果是多少？
```js
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)
23. 下面程序的输出结果是：
```js
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,arr)
[*]下面程序的输出结果是：
function getAge(...args) {
console.log(typeof args);
}
getAge(21);
26. 下面程序的输出结果是:
```js
var arr=;
arr.push(arr.shift())
console.log(arr,arr)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() );
2. 下列程序的输出结果是多少？你能理清楚test函数的this指向吗？
```js
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'})
4. 执行以下代码，输出结果分别是多少？
```js
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);
8. 下面程序的执行结果是：
```js
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)
})
2. 下面程序的输出结果依次是多少？
```js
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);
4. 下面程序的输出结果是？
```js
(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)
7. 下面程序的输出结果是：
```js
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. 下面程序的输出结果是？
```js
(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));
12. 下面程序的输出结果是：
```js
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);
2. 下面程序的输出结果是？
```js
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();
6. 请表述以下代码的执行结果和原因
```js
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)
})
}
3. 下面程序的输出结果是：
```js
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.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);
10. 下面程序的执行结果是：
```js
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);
}ES6
对象
[*]下面代码的输出结果是？const student = {name: 'ZhangSan'}
Object.defineProperty(student, 'age', {value: 22})
console.log(student)
console.log(Object.keys(student))generator
[*]下列程序的输出结果是多少？为什么？
function * cb(x, y) {
for(let i = Math.ceil(x); i <= y; i++) {
yield i;
}
}
var a = cb(6, 9);
console.log(a.next());
console.log(a.next());
#### 扩展运算符
1. 下面程序的输出结果是：
```js
function fn(...args) {
console.log(typeof args);
}
fn(21);promise
Promise.reject(0)
.catch(e => e)
.catch(e => console.log(e))class
[*]请写出下面ES6代码编译后所生成的ES5代码
class Person {
constructor (name) {
this.name = name;
}
greet () {
console.log(`Hi, my name is ${this.name}`);
}
greetDelay (time) {
setTimeout(() => {
console.log(`Hi, my name is ${this.name}`);
}, time);
}
}
#### 标签模板
1. 下面程序的输出结果是多少？
```js
function getPersonInfo (one, two, three) {
console.log(one)
console.log(two)
console.log(three)
}
const person = 'Lydia'
const age = 21
getPersonInfo `${person} is ${age} years old`module
[*]请写出index里面的输出结果
// module.js
export default () => "Hello world"
export const name = "nowcoder"
// index.js
import * as data from "./module"
console.log(data)
2. 有a.js和b.js两个文件，请写出b文件中代码的输出
```js
// 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)
其他
[*]输出结果是：
<div id="box1">
<div id="box2">
content
</div>
</div>
<script>
const $ = document.querySelector.bind(document);
const box1 = $('#box1');
const box2 = $('#box2');
box1.addEventListener('click', () =>{
console.log('box1 true');
}, true);
box1.addEventListener('click', () =>{
console.log('box1 false');
}, false);
box2.addEventListener('click', () =>{
console.log('box2 true');
}, true);
box2.addEventListener('click', () =>{
console.log('box2 false');
}, false);
</script>
2. 输出结果是：
```js
$(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" );
})
[*]实现在p元素后添加“Hello World!”，则横线处应使用的方法为( )？
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("<b>Hello World!</b>").__("p");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个p元素的结尾添加内容</button>
</body>
</html>
4. 输出结果是：
```html
<div id="box1">
<div id="box2">
content
</div>
</div>
<script>
const $ = document.querySelector.bind(document);
const box1 = $('#box1');
const box2 = $('#box2');
box1.addEventListener('click', () => {
console.log('box1 true');
}, true);
box1.addEventListener('click', () => {
console.log('box1 false');
}, false);
box2.addEventListener('click', () => {
console.log('box2 true');
}, true);
box2.addEventListener('click', () => {
console.log('box2 false');
}, false);
</script>
[*]请选择下面代码输出1的次数
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
test: function () {
console.log(1)
return this.message
}
},
created: function (){
this.message = 'World'
for (var i = 0; i < 5; i++) {
console.log(this.test)
}
}
})
https://blog.51cto.com/u_11724598/4827585
页:
[1]