评论

收藏

[JavaScript] #yyds干货盘点# 牛客最新前端JS笔试百题

开发技术 开发技术 发布于:2021-12-25 12:07 | 阅读数:359 | 评论:0

前言
前几天空闲时间抓取了牛客最新的笔试题和面试题,想做一下数据统计,展望一下面试中JavaScript的平凡考点和火爆考点,给未来自己的学习指引一下方向。
但当统计完数据后,准备分析时,我才发现:我找不到特别好的切入点来进行分析,同时我只能想到使用饼图和柱状图展示各个题型或考点的出现频次,这为我上一篇的文章失败埋下了巨大的伏笔。
虽然文章反响有些不尽人意,我也感觉有几分挫败,但往好处想,这篇文章并非一无是处,还是有几分可取之处的。通过简单的数据统计与分析,我们还是可以从中收获些东西,就比如三大爆点: JavaScript 深入、promise、手撕代码等。
DSC0000.jpg

通过这篇文章,我还收到了很多大佬的留言:大家对题目的渴望度很高。于是我就快马加鞭,终于把笔试题部分的题目全部分类和整理完毕,希望能帮到需要面试的大佬们。
不多说了,进入题海吧。
DSC0001.jpg


单选题
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
答案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:元素获得焦点
答案
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
答案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. 语句报错,语法有问题
答案
BBC
ES6题
箭头函数

  • 下列对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 [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)
4. alert的结果会是多少
```js
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));
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[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);
13. 执行下列语句后,a.length的值为?
```js
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));
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[3],arr[4])
  • 下面程序的输出结果是:
    function getAge(...args) {
    console.log(typeof args);
    }
getAge(21);
26. 下面程序的输出结果是:
```js
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() );
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[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);
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!”,则横线处应使用的方法为(      )?
    [/list]<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>").[b]__[/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)  
        }  
      }
      })



关注下面的标签,发现更多相似文章