前端面试题从简到繁，从点到面，一起查缺补漏吧！+ 注解头一次写文章，看到原作者总结的一套很全的前端知识点题目，但是没有答

头一次写文章，看到原作者总结的一套很全的前端知识点题目，但是没有答案所以自己边做边标注了注解，注解是按照自己的理解描述的，如有问题可以留言修改，感谢🙏

单选题

JS基础

js概念与类型检测

以下不属于 typeof 运算符返回值的是？

A. "string"
B. "function"
C. "object"
D. "null"

注：D typeof运算符的返回类型为字符串，值包括如下几种： typeof(s) 或者 typeof s

1. 'undefined' --未定义的变量或值

2. 'boolean' --布尔类型的变量或值

3. 'string' --字符串类型的变量或值

4. 'number' --数字类型的变量或值

5. 'object' --对象类型的变量或值（数组也是对象 new Array()），或者null(这个是js历史遗留问题，将null作为object类型处理)

6. 'function' --函数类型的变量或值

执行以下代码，错误的输出结果是

A. 输入：typeof {"x":1} 输出："object" 
B. 输入：typeof 1 输出："number" 
C. 输入：typeof [{x:1}] 输出："array" 
D. 输入：typeof NaN 输出："number"

注：C 题1

可以用typeof来判断的基本类型有

A. undefined
B. null
C. array
D. object

注：A

以下不属于JavaScript基本数据类型的是：

A. Boolean
B. undefined
C. Symbol
D. Array

注：D 基本数据类型有7种：null, undefined, boolean, String, Number, Sysbol, bigInt 引用数据类型：Object（Array也属于对象类型）

基本数据类型：存放在栈中，先入后出的原则，栈空间小，都是用来存放内存较小的资源

引用数据类型：存放在堆中，存放的不是值，而是值的引用，用来存放较大资源

参考文档：zhuanlan.zhihu.com/p/387842617

以下关于JavaScript中数据类型的说法错误的是()

A. 数据类型分为基本数据类型和引用数据类型
B. JavaScript一共有8种数据类型
C. Object是引用数据类型，且只存储于堆(heap)中
D. BigInt是可以表示任意精度整数的基本数据类型，存储于栈(stack)中

注：C，请留言解释下，没查出这题的问题

逻辑判断

请选择结果为ture的表达式？

A. null instanceof Object
B. null === undefined
C. null == undefined
D. NaN == NaN

注：C

null 值 null 特指对象的值未设置在布尔运算中被认为是[false]

undefind 全局属性undefined表示原始值undefined 没有定义

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上参考链接：developer.mozilla.org/zh-CN/docs/…

NaN 虽然表示是一个非数字，但是一般是算术运算执行的结果，因此NaN 仍然是数值类型。 NaN == NaN 执行结果是 false。JavaScript的规定，NaN表示的是非数字，但是这个非数字也是不同的，因此，NaN 不等于 NaN，并且两个NaN永远不可能相等。

下列代码结果为 true 的是？

A. Symbol.for('a') === Symbol.for('a')
B. Symbol('a') === Symbol('a')
C. NaN === NaN
D. {} === {}

注：A

Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法, 每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符

Symbol.for(key)使用给定的key搜索现有的symbol，如果找到则返回该symbol。否则将使用给定的key在全局symbol注册表中创建一个新的symbol。参考链接：developer.mozilla.org/zh-CN/docs/…

根据如下变量，下列表达式中返回值为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

注：D 当进行==比较时候：先检查两个操作数数据类型，如果相同，则进行===比较，如果不同则 ~~强制把等号后面的值转成等号前面的值~~ 转换成相同类型后再进行比较。而===比较时，如果类型不同，直接就是false.

1==true的返回值是true，这句话是否正确？

A. T
B. F

注：A 在==的隐式转化中，是对两边进行Number(), Number(true) = 1, 可以思考 2==true

浏览器环境下，下面代码输出为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])

注：C null因为js的设计问题，返回Object

下面代码输出为true的是?

A. console.log([] === []);
B. console.log(undefined == 0);
C. console.log(undefined == false);
D. console.log(false == '');

注：D

以下表达式，正确的是

A. Number('a') == Number('a')
B. -1 == true
C. 3 + '2' === 5
D. ![] == ''

注：D

Math

如何把 7.25 四舍五入为最接近的整数

A. Math.round(7.25)
B. Math.ceil(7.25)
C. round(7.25)
D. Math.rnd(7.25)

注：A A-返回四舍五入后的整数。，B-返回大于一个数的最小整数，即一个数向上取整后的值。参考链接：developer.mozilla.org/zh-CN/docs/…

下面哪个选项可以产生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)

注：C D

Math.floor返回小于一个数的最大整数，即一个数向下取整后的值。

Math.ceil返回大于一个数的最小整数，即一个数向上取整后的值。

Math.random返回一个 0 到 1 之间的伪随机数。

以下( )表达式产生一个0~7之间(含0,7)的随机整数

A. Math.floor(Math.random()*6)
B. Math.floor(Math.random()*7)
C. Math.floor(Math.random()*8)

注：C

字符串

split() 方法用于把一个字符串分割成字符串数组。

A. T
B. F

注：A

String对象的哪个方法可以寻找子字符串并返回该子字符串位置

A. match()
B. indexOf()
C. search()
D. concat()

注：B 参考链接：developer.mozilla.org/zh-CN/docs/…

JSON

下面哪一个是JSON数据？

A. ｛name:"xiaoming",age,"student"｝
B. ｛"name":"xiaoming","age":"student"｝
C. ｛"xiaoming","student"｝
D. ["xiaoming","student"]

注：B

下面分别使用 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

注：C 参考链接：developer.mozilla.org/zh-CN/docs/…

数组

js数组中不会改变原有数组的方法是()

A. push
B. concat
C. sort
D. shift

注：B 参考链接：developer.mozilla.org/zh-CN/docs/…

下列哪种数组的方法不会修改数组本身

A. slice
B. splice
C. sort
D. unshift

注：A

JavaScript中需要往数组末尾处添加一个元素，应该使用以下哪个方法：

A. push
B. pop
C. shift
D. unshift

注：A

以下js操作Array的方法中不能添加元素的是：

A. push
B. pop
C. unshift
D. splice

注：B B-删除最后一个元素

数组以下哪个方法会影响原数组？

A. concat
B. splice
C. slice
D. join

注：B 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容

JavaScript中，下列哪一个Array的方法的返回值类型和其他不同

A. concat
B. shift
C. filter
D. map

注: B shift 从数组中删除第一个元素，并返回该元素的值

如下的Array.prototype上的方法中，那个方法不会改变原有的数组？

A. push
B. slice
C. splice
D. sort

注：B

对于一个数字组成的数组 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)

注：C forEach无返回值

正则

正则表达式 ^d+[^d]+ 能匹配下列哪个字符串？

A. 123
B. 123a
C. d123
D. 123def

注：A 正则是真拉胯。。。参考链接：www.runoob.com/jsref/jsref…

下面哪个不是RegExp对象的方法

A. test
B. match
C. exec
D. compile

注：B

以下哪项可以去除变量str中的所有空格

A. str.replace(`/\s*/g,""`)
B. str.replace(`/^\s|\s$/g,""`)
C. str.replace(`/^\s*/, ""`)
D. str.replace(`/(\s*$)/g, ""`)

注：A ^n 匹配任何开头为 n 的字符串，

n* 匹配任何包含零个或多个 n 的字符串，

n$ 匹配任何结尾为 n 的字符串

g 全局

其他

下列函数哪个不是JavaScript的全局函数

A. encodeURI
B. parseFloat
C. round
D. eval

注：C

编写高性能JavaScript，以下描述错误的是

A. 遵循严格模式："use strict"
B. 将js脚本放在页面顶部，加快渲染页面
C. 将js脚本成组打包，减少请求，尽量减少使用闭包
D. 使用非阻塞方式下载js脚本，最小化重绘(repaint)和回流(reflow)

注：B 页面构建顺序，先解析html构建DOM树，然后解析css构建cssDom树，然后加载js，js会阻塞Dom渲染，如果js中有操作css，还会阻塞css的渲染

有关JavaScript中系统方法的描述，错误的是？

A. parseFloat方法：该方法将一个字符串转换成对应的小数
B. isNaN方法：该方法用于检测参数是否为数值型，如果是，返回true，否则，返回false。
C. escape方法： 该方法返回对一个字符串编码后的结果字符串
D. eval方法：该方法将某个参数字符串作为一个JavaScript执行题

注：B isNaN 用于检测参数是否是非数值型，如果是数值返回false，否则返回true

下面列出的浏览器，无webkit内核的是()

A. chrome
B. Safari
C. 搜狗浏览器
D. Firefox

注：D

下列代码哪个能够实现获取形式为 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;
};

注：D

下面哪一项不能最小化重绘(repaint)和回流(reflow)

A. 需要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
B. 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
C. 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)
D. 尽量不要使用 css 属性简写，如：用border-width, border-style, border-color代替border

注：D

重绘也叫重排：指DOM元素的几何属性发生变化或者DOM节点隐藏后，导致DOM元素的X，Y轴位置发生变化重新绘制页面的过程，所以一些动画效果尽量定位，脱离文档流，这时候属于分层，不触发重排。重排一定会触发重绘，重绘不一定触发重排

重绘：DOM的属性样式类发生变化，例如：背景色变化，圆角等

JS深入

this

下列哪种方法不能改变this指向()

A. eval
B. apply
C. bind
D. call

注：A

eval()函数会将传入的字符串当做 JavaScript 代码进行执行。返回字符串中代码的返回值。如果返回值为空，则返回 undefined

apply, bind， call 都能改变this指向，但又有区别参考：www.cnblogs.com/lmsblogs/p/…

在JavaScript中下面选项关于this描述正确的是

A. 在使用new实例化对象时, this指向这个实例对象
B. 将对象的方法赋值给变量A。执行A()时 该方法中的this指向这个对象。 
C. 在函数定义时,this指向全局变量
D. 在浏览器下的全局范围内，this指向全局对象

注：A 一句话普通函数的this，谁调用的指向谁，参考链接：www.jb51.net/article/168…

下面有关JavaScript中call和apply方法的描述，错误的是？

A. call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性
B. 两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是
C. apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
D. call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

注：B 第一题注解

作用域(闭包)

内存泄漏是 javascript 代码中必须尽量避免的，以下几段代码可能会引起内存泄漏的有()

// (1)
function getName() {
    name = 'javascript'
}
getName()
console.log(name) // 该打印依然可以获取到'javascript'

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

注：D 内存泄漏（Memory Leak）是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。

1, 声明了一个全局变量name，在函数执行结束后，该变量并没有销毁，与该函数还有引用关系。原因：分词，编译

2, element为全局变量，函数销毁后，关联关系已解除，但是全局变量并没有销毁，之后根据V8的垃圾处理机制对比新老生区，进行垃圾回收

那个操作不会造成内存泄露

A. 没有清理的DOM元素引用
B. 被遗忘的定时器
C. 事件侦听没有移除
D. 局部变量不用时，没有设为null

注：D

下列关于闭包理解错误的是

A. 增加一定的内存消耗
B. 使用不当可能会导致内存泄漏
C. 可以使用闭包模拟私有方法
D. 闭包会改动对象的原型链

注：D 闭包：自执行函数，属于函数与外层的通讯桥梁，但是这桥梁是单行的，函数内可以访问（默认可修改）函数外，函数外不能访问函数内，自执行函数执行结束，内部变量与函数销毁，参考链接：www.cnblogs.com/dengyao-blo…

原型与继承

JavaScript实现继承的方式，不正确的是：

A. 原型链继承
B. 构造函数继承
C. 组合继承
D. 关联继承

注：D 参考链接：blog.csdn.net/qq_27674439…

所有对象都有原型

A. T
B. F

注：B 空对象都有原型, 但Object.create(null)没有. 因为Object.create(null)没有继承任何原型方法，也就是说它的原型链没有上一层

以下关于原型链的描述正确的是:

A. 通过原型链继承的属性和对象与自己定义的属性等效
B. 通过原型链可以模拟对象的私有属性
C. 在对象上访问不存在的属性时,会依次遍历整条原型链
D. 所有 JavaScript 中的对象都是位于原型链顶端的 `Object` 的实例

注：C 参考链接：www.jianshu.com/p/dee9f8b14… ， www.processon.com/view/link/6…

DOM题

事件流

将A元素拖拽并放置到B元素中，B元素需要做哪项操作()？

A. event.preventDefault()
B. event.prevent()
C. event.drag()
D. event.drop()

注：A event.preventDefault 取消事件（如果该事件可取消）。 event.stopPropagation停止冒泡，阻止事件在 DOM 中继续冒泡。参考链接：developer.mozilla.org/zh-CN/docs/…

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

A. mouseover
B. click
C. mouseleave
D. mousemove

注：C

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

A. stopDeafault()
B. stopPropagation()
C. preventDefault()
D. preventDefaultEven()

注：C

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

A. 目标 -> 捕获 -> 冒泡
B. 冒泡 -> 目标 -> 捕获
C. 目标 -> 冒泡 -> 捕获
D. 捕获 -> 目标 -> 冒泡

注：D

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

A. onchange：用户改变域的内容
B. onkeypress：某个键盘的键被按下或按住
C. onmousedown：某个鼠标按键被按下
D. onblur：元素获得焦点

注：D onblur失去焦点。 onfocus获取焦点

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

A. outline
B. visiblity
C. font-size
D. background-color

注：C

BOM题

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

A. 每隔60秒调用一次updateClock()
B. 每隔60毫秒调用一次updateClock()
C. 每隔60分钟调用一次updateClock()
D. 每分钟调用60次updateClock()

注：B

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

A. Geolocation.watchPosition()
B. Geolocation.getCurrentPosition()
C. Geolocation.getPosition()
D. Geolocation.Position()

注：B

setInterval("alert('welcome');",1000);这段代码的意思是

A. 等待1000秒后，再弹出一个对话框
B. 等待1秒钟后弹出一个对话框
C. 每隔一秒钟弹出一个对话框
D. 语句报错,语法有问题

注：C

ES6题

箭头函数

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

A. 箭头函数没有原型属性
B. 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
C. 箭头函数可以作为构造函数，使用new
D. 箭头函数不绑定arguments，取而代之用rest参数解决

注： C 参考链接：www.jianshu.com/p/f853d6a7b…

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

A. 函数体内this的指向是定义时所在的对象，而不是使用时所在的对象
B. 箭头函数内不能使用arguments对象
C. 箭头函数不能使用yield命令
D. 可以使用new创建一个箭头函数的实例

注：D

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 会被输出

注：C

Promise 可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

Promise.all([]).then().catch()获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的只有所有的promise函数都返回成功状态，才会执行then方法若有一个promise函数返回失败状态，则执行catch方法

Promise.race() 函数返回一个 Promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是两个中的哪个，(意思是哪个快就返回哪个，并且不关心结果状态)。如果传的迭代是空的，则返回的 promise 将永远等待。

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

A. Promise
B. Generator
C. async
D. Proxy

注：D Proxy代理器，可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Vue3就是把 Object.definePropert() 改为了 Proxy（13种拦截方式），参考链接：es6.ruanyifeng.com/#docs/proxy

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

A. Pending
B. Pause
C. Fulfilled
D. Rejected

注：B 参考链接：developer.mozilla.org/zh-CN/docs/…

解构赋值

关于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

注：A C

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

A. const a = 0xa1
B. const a = 076
C. const a = 0b21
D. const a = 7e2

注：A B D

以下属于操作符 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)

注：D

以下()结果等于字符串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 B D E

下面的等式成立的是?

A. parseInt(46.8) `==` parseFloat(46.8)
B. NaN `!==` NaN
C. isNaN('abc') `==` NaN
D. typeof NaN `===` 'number'

注：B D

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

A. Array.from(A)
B. [].slice.apply(A)
C. [...A]
D. [].map.call(A, o => o)

注：A C

下列结果返回 true 的是

A. null == undefined
B. null === undefined
C. null === null
D. NaN == null
E. NaN === NaN
F. Infinity + 1 !== Infinity

注：A C 值 null 特指对象的值未设置。它是 JavaScript 基本类型之一，在布尔运算中被认为是false。

JS深入

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

function Person() { } var person = new Person();

A. 每一个原型都有一个constructor属性指向关联的构造函数。
B. 每一个对象都有一个prototype属性。
C. Object.getPrototypeOf(person) === Person.prototype
D. person.constructor === Person

注：A C D

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

A. process.nextTick
B. promise
C. setTimeout
D. setInterval

注：A B

ES6

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

A. let声明的变量值和类型都可以改变
B. const声明的常量不可以改变
C. 两者都不存在变量提升，同时存在暂时性死区，只能在声明的位置后面使用
D. const可以先声明再初始化，可以后赋值

注：A B C

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

A. Promise.all在所有给定的promise都fulfilled后才返回结果
B. Promise.race在给定的promise中，某个fulfilled后才返回结果
C. promise.then的回调函数中，可以返回一个新的promise
D. 对于一个向后台获取数据已经产生结果的promise:p1，再次调用p1.then，不会去重新发起请求获取数据

注：C D

DOM

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

A. document.body.style.['background-color'] = '#fff'
B. document.body.style.setProperty('background-color', '#fff')
C. document.body.style = 'background-color: #fff'
D. document.body.style.fontSize = '14px'

注：B C D

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

A. event.cancelBubble = true;
B. event.stopPropagation();
C. event.preventDefault();
D. return false;

注：A B D cancelBubble用于ie的阻止冒泡事件。event.stopPropagation（）用于firefox和chrome等其他浏览器。参考链接：blog.csdn.net/qq_23878541…

填空题

类型检测

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

注：

1, Object-数组也是对象 new Array()

2, undefind string

3, object(js语言设计问题) false

4, string

5, Object

6, Object [object Array]

类型转换

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

注：

1，234 - 在第一个字符串‘2’与数组3拼接的时候就已经变成字符串了，然后再拼接数字4（拼接而不是计算）

2，53，53，这哥俩都是字符串类型

3，111 parseInt() 函数可解析一个字符串，并返回一个整数。当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

4， [1, NaN, 0]

5, 11

6, NaN

逻辑判断

请给出 [5<6<3,3<2<4] 代码的运行结果
(2<3)||(3<2) 表达式将返回值为
console.log(true||false&&false, true&&false||true)的输出结果是？注 1, ~~[true, false]~~. [true, true] 没搞懂，欢迎留言

2, true

3, true true && 一假全假 || 一真全真

其他

1 + - + + + - + 1 的结果是 // 2 负负得正
[ 'a', ,'b', ,].length 的结果是 // 4

程序题

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

注：'Case default'， 'Case 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>

注：true

document.write的结果会是什么？

function funcA(x){
    var temp = 4;

    function funcB(y){
        document.write( ++x + y + (temp--));
    }

    funcB(5);
}

funcA(6)

注：16

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

注：lime peach orange apple

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

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

注：you-to-Day-Good name

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

String.prototype.GetNum = function() { 
    var regEx = /[^\d]/g; 
    return this.replace(regEx, ''); 
};

var str = "a1b2c3";
str = str.GetNum();
alert(str);

注：123

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

function sum(a, b) {
  return a + b;
}
sum(1, "2");

注：12

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

var str = "我非常喜欢编程";
str.length = 3;
console.log(str);

注：我非常喜欢编程 string的length无法修改

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

let number = 0;
console.log(number++);
console.log(++number);
console.log(number);

注：0 2 2

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

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

注：12 21 大佬们解答下

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

var a = 3;
var b = new Number(3);
var c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);

注：true false false 大佬们解答下

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

var a = [];
a.push(1, 2);
a.shift(3, 4);
a.concat([5, 6]);
a.splice(0, 1, 7);

注：7 shift()移除数组的第一项，没有参数 concat()方法不会更改现有数组，而是返回一个新数组

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

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

注：c b c

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

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

注：true false number function function object a1 NaN true true

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

var array = []
for(var i = 0; i < 3; i++) {
    array.push(() => i)
}
var newArray = array.map(el => el())
console.log(newArray)

注：3 3 3

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

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

注：12

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

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

注：false true NULL是全大写

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

var a = 10
var b = {
    age: 11
}
function fn(x,y) {
    --y.age;
    return --x;
}
fn(a,b)

注：10 10

下面程序的执行结果是：

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)

注：[3 3 3]

下面程序的输出结果是：

function addToList(item, list) {
    return list.push(item)
}
const result = addToList("nowcoder", ["hello"])
console.log(result)

注：2 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。它会改变数组长度。

下面程序的输出结果是：

const first = () => { console.log('first'); return false; }
const second = () => { console.log('second'); return true; }
console.log( first() && second() );
console.log( second() || first() );

注：false true 逻辑并与非的关系

下面代码的输出结果是：

var s='12ab3cd', arr=s.split(/\d/);
console.log(arr[3],arr[4])

注：'ab' undefind 正则匹配数字，以数组为切割点数组内容['', '', 'ab', 'cd']

下面程序的输出结果是：

function getAge(...args) {
  console.log(typeof args);
}

getAge(21);

注：object

下面程序的输出结果是:

var arr=[1,2,3];
arr.push(arr.shift())
console.log(arr[1],arr[2])

注：2 1 数组[2,3,1] shift删除第一个元素，并返回删除的第一个元素值，改变数组长度

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

注：3 1 普通函数谁调用，this指向谁

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

var a = 5;
 function test() { 
    a = 0; 
    alert(a); 
    alert(this.a); 
    var a;
    alert(a); 
}
new test();

注：0 undefind 0

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

function fun () {
    return () => { // 1
        return () => { // 2
            return () => { // 3
                console.log(this.name)
            }
        }
    }
}
var f = fun.call({name: 'foo'}) // 1
var t1 = f.call({name: 'bar'})()()
var t2 = f().call({name: 'baz'})()
var t3 = f()().call({name: 'qux'})

注：foo foo foo

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

let obj1 = {
    a: 1,
    foo: () => {
        console.log(this.a)
    }
}
// log1
obj1.foo()
const obj2 = obj1.foo
// log2
obj2()

注：undefind undefind 箭头函数会默认帮我们绑定外层this的值(目前是window)，所以在箭头函数中this的值和外层的this是一样的

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

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)

注：语法错误，Person是箭头函数，没有constructor 无法通过new创建构造函数

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

var person = {
  age: 18,
  getAge: function() {
    return this.age;
  }
};
var getAge = person.getAge
getAge()

注：undefind

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

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

注：foo foo2 local

下面程序的执行结果是：

var obj = {
    name:"zhangsan",
    sayName:function(){
        console.info(this.name);
    }
}

var wfunc = obj.sayName;
obj.sayName();
wfunc();
var name = "lisi";
obj.sayName();
wfunc();

注：zhangsan undefind zhangsan lisi

下面程序的输出结果是：

var name='test' 
var a = {    
    name: 'ass',    
    getName: function() {    
        return this.name;   
    } 
} 
var b = a.getName; 
b();

注：test

事件循环

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

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

注：a b b

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

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)

注：2 5 1 3 4 同步任务异步任务，宏任务，微任务问题

下面程序的输出结果是

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

注：2 3 5 4 1

下面程序的输出结果是？

(async () => {
    console.log(1);
    setTimeout(() => {
        console.log(2);
}, 0);
await new Promise((resolve, reject) => {
    console.log(3);
}).then(() => {
    console.log(4);
});
    console.log(5);
})();

注：1 3 2 Promise没有更新状态，所以是pending

下面程序的输出结果是:

new Promise((resolve) => {
    console.log('1')
    resolve()
    console.log('2')
}).then(() => {
    console.log('3')
})
setTimeout(() => {
    console.log('4')
})
console.log('5')

注：1 2 5 3 4

下面程序的输出结果是:

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)

注：2 3 1

下面程序的输出结果是：

setTimeout(function() {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

注：promise1 promise2 setTimeout

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

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)

注：2 3 5 4 1

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

<div class="outer">
 <div class="inner"></div>
</div>

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块时，控制台依次输出结果是什么？

注：click promise click promise timeout timeout

下面程序的输出结果是：

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

注：b f c a d

下面程序的输出结果是：

console.log('one'); 
setTimeout(function() { console.log('two'); }, 0); 
Promise.resolve()
       .then(function() { console.log('three'); })
 console.log('four');

注：one four three two

原型与原型链

传送门: 原型与原型链题目解析

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

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

注：jack undefind 原型查询规则，现在自身属性找，如果没有找到再往上一级找

下面程序的输出结果是？

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)

注：Tom Tom Michael

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

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

注：3 10 3

下面程序的执行结果是：

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

注：32 undefind 在函数作用域外，无法删除函数的私有属性

作用域与预编译

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

function sayHello() {
    console.log(name);
    console.log(age);
    var name = "Tom";
    let age = 18;
} 
sayHello();

注：报错 let，const没有声明提升，会暂存死区

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

for (var i = 0; i < 3; i++) {
    setTimeout(_ => {
        console.log(i)
    })
}

for (let i = 0; i < 3; i++) {
    setTimeout(_ => {
        console.log(i)
    })
}

注：3 3 3， 1 2 3 var存在变量提示生成了全局变量i

下面程序的输出结果是：

console.log(a);
var a = 'a';
console.log(b);
let b = 'b';

注：undefind 报错

下面程序的输出结果是：

var foo = "Hello";
(function(){
    var bar = " World";
    alert(foo + bar);
})();
alert(foo + bar);

注：Hellow World 第二次alert报错

下面程序的输出结果是：

var a = 10;
(function () {
    console.log(a)
    a = 5
    console.log(window.a)
    var a = 20;
    console.log(a)
})()

注：undefind 10 20

下面代码的输出结果是:

const a = 10
function runFunction() {
    const a = 20
    console.log('inside', a)
}
runFunction()
console.log('outside', a)

注：20 10

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

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

注：Michael Jay

下面程序的结果是：

<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); 
    };
}
</script>

注：都是4

下面程序的输出结果是

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

注：220 24 var声明的函数与声明变量相同，然而 function声明会在词法分析时把方法提前

下面程序的执行结果是：

meili()
function meili() {
    console.log("meili")
}
mogu()
var mogu = function() {
    console.log("mogu")
}

注：meili 报错mogu undefined

下面两个代码片段输出结果有什么区别？为什么？

// 片段1
check('first');
function check(ars){
    console.log(ars);
}
// 片段2
check('second');
var check= function(ars){
    console.log(ars);
}

注：first srcond

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

扩展运算符

下面程序的输出结果是：

function fn(...args) {
  console.log(typeof args);
}
fn(21);

注：把参数转成了数组，而数组又属于对象，输入 object

promise

Promise.reject(0)
       .catch(e => e)
       .catch(e => console.log(e))

注：返回失败状态的promise

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

标签模板

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

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)

注：Hellow world

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

注：2 {b:2} 2 {b:2} 未确认答案

其他

输出结果是：

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

输出结果是：

$(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>

输出结果是：

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

文章参考自 战场小包 原文地址点这～侵删～