真题实战汇总_牛客博客

文章目录

- 7/13
- 7/14
- 7/15
- 7/16
- 7/30
- 8/2
- 8/6
- 8/12
- 8/13
- 8/17
- 8/18
- 11/9
- 11/10

7/13

下列布局在页面上的宽度比是多少？

// css
.flex {
   
    display: flex;
    width: 200px;
    height: 100px;
}
.left {
   
    flex: 3 2 50px;
    background: red;
}
.right {
   
    flex: 2 1 200px;
    background: blue;
}
// html
<div class="flex">
    <div class="left"></div>
    <div class="right"></div>
 </div>

解析：1:5
因为是缩进，先计算width x flex-shrink
50 x 2 = 100
200 x 1= 200
求和
100 + 200 = 300
求占比后，计算需要腾出的空间
(100/300) * 50 = 50/3
(200/300) * 50 = 100/3
得出缩进后的宽度
50 - 50/3 = 100/3
200 - 100/3 = 500/3
所以缩进后的宽度比为 1:5
涉及flex的宽度计算问题：
参考文章【Flex中宽度计算】

关于以下代码，说法正确的有哪些？
function Person() { }
var person = new Person();
A. 每一个原型都有一个constructor属性指向关联的构造函数。
B. 每一个对象都有一个prototype属性
C. Object.getPrototypeOf(person) === Person.prototype
D. person.constructor === Person

解析：ACD
只有函数对象才有prototype 属性，普通对象没有
person.prototype // undefined
person.proto === Person.prototype // true
Object.getPrototypeOf(person) === Person.prototype // true

关于同源策略和跨域的问题，以下说法正确的有？
A. http://store.company.com/dir/page.html 和 http://store.company.com/dir/other.html 不同源。
B. node设置res.header(“Access-Control-Allow-Origin”, “*”) 去解决跨域问题，会有安全问题。
C. JSONP的原理是利用引入script不限制源的特点，把处理函数名作为参数传入，然后返回执行语句。
D. document.domain的原理是将两个页面的document.domain设置成一致，只能解决主域相同的跨域问题。

解析： BCD
同源策略见学习随笔中浏览器同源策略一篇

7/14

以下这种写法不规范，但是不会报错，其在浏览器中的表现形式是
12
A. 12
B. 12
C. 12
D. 12

解析： B

7/15

以下前端代码的运行结果是（）

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

解析： box1 true，box2 true，box2 false，box1 false
参考学习随笔【HTML DOM addEventListener（）方法】

设置一下CSS 代码后，右外边距为多少

padding: 5px 10px 15px 20px;
margin: 2px 4px 6px;

解析：4px
padding 为内边距，margin 为外边距
只有两个值: 上下左右
三个值: 上左右下
四个值: 上右下左

以下哪个选择器能够匹配和div 相邻的下一个兄弟节点p元素？
A. div p
B. div > p
C. div + p
D. div ~ p

解析： C
div p 后代选择器 ---- 选择div下所有p的元素
div > p 子元素选择器 ---- 选择父元素为div的所有p元素
div + p 相邻兄弟选择器 ---- 可选择紧接在div后的p元素，且二者有相同父元素
div ~ p 后续兄弟选择器 ---- 选取所有指定元素之后的相邻兄弟元素

已知一棵二叉树的前序遍历为 CABEFDHG，中序遍历为 BAFECHDG，那么它的后序遍历是

解析：BFEAHGDC
参考学习随笔【二叉树遍历】
前序遍历:根-左-右
中序遍历:左-根-右
后序遍历:左-右-根
前序遍历：第一个为根，所以c为根节点；
中序遍历：根节点将左右分为两个部分；所以左子树为BAFE，右子树为 HDG
再通过两者遍历可得，原二叉树为

某排好序的数组有 1000 个各不相同的整数，如果对该数组进行二分查找（binary-search），在最坏的情况下，需执行（）次比较

解析： 10次
二分查找,又称为折半查找
假设每次查找都没找到,则查找10次后,可以覆盖2¹⁰=1024个值,1000>2⁹=512
所以10次

7/16

以下代码的运行结果是

var person = {
   
  age： 18，
  getAge： function() {
   
    return this.age
  }
}
var getAge = person.getAge
console.log(person.getAge, getAge)

解析： 18，undefined
第一个： person 内定义了一个age 属性和一个getAge方法，所以person.getAge中的this指向的是person对象，在person对象中找age属性，即18
第二个： var getAge = person.getAge 等价于 var getAge = function（）{ return this.age }, 这里的this指向window 对象，由于window 中没有找到age属性，所以返回undefined

以下代码的运行结果是

var a = 100
function test() {
   
  console.log(a)
  var a = 10
  console.log(a)
}
test()
console.log(a)

解析： undefined 10 100
函数内有 var a = 10
声明会提到function 开头，但赋值的位置不变
所以等价于
var a ；
console.log(a)
a = 10

以下代码的运行结果是

function a() {
   
  alert(a)
}
a.call(null)

利用call 改变this的指向
当call 一个参数是 null 或者 undefined 的时候，那么call 将把this 指向全局对象（window）相当于
function a( ) {
alert(a)
}
a.call(window)

请选出3的颜色（）

<style>
  ul{
    color：blue ！important}
  ul > li{
    color:green }
  ul li + li {
   color:red}
  li {
    color： yellow }
</style>
<ul><li>1</li><li>2</li><li>3</li></ul>

A. 蓝***r> B. 绿***r> C. 红***r> D. 黄色

解析：C
优先级计算
一个选择器的优先级可以说是由四个部分相加，可以认为是个十百千四位数的四个数

千位：如果声明在style 的属性(内联样式）则该位得一分；这样的声明没有选择器，所以它得分总是 1000
百位：选择器中包含ID选择器则该位得一分
十位：选择器中包含类选择器、属性选择器或伪类选择器则该位得一分
个位：选择器中包含元素（类型）、伪元素选择器则该位得一分

通用选择器（*），组合符（+，>, ~, ’ ')，和否定伪类（：not）不会影响优先级
继承的属性优先级为0

ul { color: blue !important; }//!important优先级最高，但是后面是继承的，所以为0
ul > li { color: green; } 有两个元素选择器，优先级为0002
ul li + li { color: red; }有3个元素选择器，优先级为0003
li { color: yellow; }一个元素选择器，优先级为0001

7/30

请给出打印出的值：

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('Jack')
console.log(b)

Tom
Tom
undefined
Jack
Person { name： ‘Jack’ }
解析：
使用new操作符时，构造函数中的this就指向相应的实例化对象；
未使用new操作符，为普通的函数调用，全局函数内的this指向window；
Person(‘Tom’) 相当于只执行函数，没有返回值，a 为 undefined

8/2

使用for in 循环数组中的元素会枚举原型链上所有属性，过滤这些属性的方式是使用____函数

hasOwnProperty

function Person() {
   

}
Person.prototype.name = "Jay"
Person.prototype.age = 18
Person.prototype.sayName = function() {
   
  console.log(this.name);
}

var person1 = new Person()
person1.name = "JJ"
var person2 = new Person()

console.log(person1.hasOwnProperty("name"));  // true
console.log(person2.hasOwnProperty("name"));  // false

console.log("name" in person1);  // true
console.log("name" in person2);  // true

for(var i in person1) {
   
  console.log(i); // name age sayName
}

HTML的Doctype 的作用？ 严格模式 和 混杂模式有何区别？它们有什么意义？

① <!DOCTYPE>位于文档最前边，在<html>标签之前，用于告诉浏览器的解析器用什么文档类型规范来解析这个文档
② 严格模式和混杂模式最大的区别就是浏览器的解析方式不同，严格模式下所有浏览器都会按照W3C标准解析渲染页面，而混杂模式下，不同的浏览器按照自己独有的渲染方式解析渲染页面，从而导致不同浏览器下页面解析样式不同
③统一严格模式可以使得所有浏览器对页面的解析渲染方式相同，解决兼容性问题

8/6

正则表达式 ^d+[^d]+ 能匹配以下哪个字符串？
A. 123
B. 123a
C. d123
D. 123def

解析：
^ : 匹配字符串的起始位置
d：表示字母d，\d匹配一个数组，即【0-9】；\D, 匹配一个非数字字符
+：前一项重复1次或多次
*：重复0次或者多次
[^d]: 中括号内的 ^表示非

下面哪个不是RegExp对象的方法
A. test
B. match
C. exec
D. compile

B
参考文章：【RegExp对象方法】

8/12

以下代码执行后，result的值变成什么？

var val = "a", result = "";
switch(val) {
   
  case 'a'：
    result += 'a';
  case 'b'：
    result += 'b';
  case 'c':
    result += 'c';
    break;
}

解析： abc
switch没有break 会无条件执行后面的代码

8/13

以下代码运行结果是什么
console.log( true || false && false, true && false || true )

解析：
true true
&& 优先级高于 ||

8/17

下题的结果正确的是？
1 + - + + + - + 1

解析： 2
只看最后一个运算符就行

带有 target="_blank" 的 a 标签被认为是有安全风险的，因为点击它后打开的新的标签页面可以通过 window.opener.location = 来将来源页面跳转到钓鱼页面，不过给该 a 标签增加下面哪些属性就能阻止这一行为？
A. rel=“nofollow”
B. rel=“noopener”
C. rel=“noreferrer”
D. rel=“opener”

解析： BC

8/18

HTML的script 标签，按规范defer 和 async 属性说法正确的是？
A. async属性的脚本加载和执行不会阻塞页面的渲染
B. defer 属性无法保证多脚本的执行顺序
C. async属性的脚本会在加载完毕后立即执行
D. defer 属性脚本会在DOMContentLoaded 事件触发后立即执行

解析：C
参考文章：【script中的defer和async】

11/9

运行以下程序

<script>
  var a = 1, b = c = 0;
  function add(m) {
   
     return m = m + 1
  }
  b = add(a);
  function add(m) {
   
    return m = m + 3
  }
  c = add(a)
</script>

b 和 c 的最终结果是？
A. 2,4
B. 4,4
C. 2,2
D. 报异常

解析：B
js 中没有函数重载的概念，在其他语言如java中可以存在同名函数，只要传入参数数量或者类型不同即可；在js中定义两个同名函数后，后面的函数会覆盖前面定义的函数。
由于函数声明提升，解析器在向执行环境中加载数据时，会率先读取函数声明，并使用在执行任何代码之前可用。就是先读取的function的函数声明，再读取函数表达式b=add（a）的语句和c=add(a);

11/10

进程的三种基本状态：

1）就绪状态
  进程已获得除处理器外的所需资源，等待分配处理器资源;只要分配了处理器进程就可执行。
2）运行状态
  进程占用处理器资源
3）阻塞状态
  由于进程等待某种条件（如I/O操作或进程同步），在条件满足之前无法继续执行。