BF-笔试

2019-07-26 本文已影响0人婆娘漂亮生活安逸

以下只是个人思考答案，如有错误，可以留言交流。

1. 如何移动一个数使 62 - 63 = 1 成立

  2^6 - 63 = 1

2. 前端页面有哪三层构成，分别是什么，作用是什么？

  结构层：由 html 标记语言进行创建；
  表示层：由 css 对页面展示进行创建。；
  行为层：由 JS 负责，表示内容应该如何对事件做出反应 。

3. 列出你知道的几个行内元素和块级元素。

  行内元素：span, a, img, input, select, textarea, 
  块级元素：div, table, p, h1-h6, ul, ol, li, dl, dd, dt

4. css 选择符有哪些？优先级算法如何计算？内联和 important 哪个优先级高。

  css 选择符：
  通配选择符(*)，class选择符，id选择符，属性选择符，标签选择符，伪类及伪对象选择符。

  优先级算法：
  规则：  
  1. 行内样式优先级值为 1000，
  2. id选择器值为 100，
  3. class选择符/属性选择符值为 10；  
  4. 元素引用等均为 1； 
  算法：  
  当遇到多个选择符同时出现时候，按选择符的值相加，数值越大的样式，相应的优先级最高。
  实例分析：  
  1. div { font-size: 12px; } 
     分析：1 个元素{ div }，值为 1 ； 
  2. body div p { color: green; }
     分析：3 个元素{ body div p }，值为1 + 1 + 1 = 3   
  3. div .sjweb { font-size: 12px; } 分析：1个元素{ div }，值为1；1个类选择符{.sjweb}，值为10；最终：10 + 1 = 11
  4. div #sjweb { font-size: 12px; }
     分析：1 个元素{ div }，值为 1 ；1 个 id 选择符{ #sjweb }，值为100；最终：100 + 1 = 101；
  5. html > body div [id="totals"] ul li > p { color: red; }
     分析：6 个元素{ html body div ul li p }  值为 6；1个属性选择符{ [id=”totals”] } 值为 10； 2个其他选择符{ >  > } 值为0； 最终：值为 6 + 10 = 16；

  使用!important可以改变优先级别为最高，
  其次是style对象，
  然后是id > class > tag ，
  在同级样式按照申明的顺序后出现的样式具有高优先级。

5. img 标签上的 title 和 alt 属性区别是什么？

  title属性：在鼠标悬浮图片时出现的文字提示；
  alt属性：图片无法在浏览器中加载出来时显示的文字提示。

6. 为什么要初始化 css 样式

  1. 浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
  2. 初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

7. 列出至少 2 种让 div 在同一行显示的方法

  1. display: inline-block;
  2. float;
  3. 定位；
  4. flex 布局

8. css sprites 是什么？有什么优点？如何使用？

  1. 把网页中的背景图片整合到一张图片中，
     再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
     background-position可以用数字能精确的定位背景图片的位置。
  2. 优点：
     减少了 HTTP 请求，减轻了服务器的压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
  3. 缺点：
     在拼图时，比较麻烦，还有后期维护也比较麻烦，比如做好的图，然后一个图标改了大小，但是图标之间留的位置不够，就要重写很多css

9. rgba() 和 opacity 的透明效果有什么不同？

  1. rgba()
     是一个属性值，作用于背景颜色，文字颜色，阴影等
  1. opacity
     是一个属性，其后代元素具有继承性。

10. 知道 css 有个 content 属性吗？有什么作用？有什么应用？

  css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。
  最常见的应用是利用伪类清除浮动。

11. 一个 200*200 的 div 在不同分辨率上下左右居中，用 css 实现

  div {
     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -100px;
     margin-top: -100px;
  }

12. 下面不属于 ECMAScript 的规范范围的是()
A、数据类型
B、语法
C、DOM 事件
D、内置对象和函数的标准库

  答案：C
  解析：
  ECMAScript实际上是一种脚本在语法和语义上的标准。
  实际上 JavaScript 是由 ECMAScript，DOM，BOM 三者组成的。

13. 在对象的解构赋值中，var {a,b,c} = { "c": 10, "b": 9, "a": 8 } 结果中，a、b、c 的值分别是多少？
A、 10、9、8
B、 8、9、10
C、 undefined、9、undefined
D、null、9、null

  答案：B
  解析：
  对象的解构与数组有一个重要的不同。
  数组的元素是按次序排列的，变量的取值由它的位置决定；
  而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

14.关于数值扩展的 Number.isJnteger 函数，下面说法错误的是：（）
A、用来判断是否是整数，返回布尔值。
B、Number.islnteger(3)；结果为：true
C、Number.islnteger(3.0)；结果为：false
D、Numbenislnteger(3.01)；结果为：false

  答案： C
  解析：
  Number.isInteger()用来判断一个数值是否为整数。
  JavaScript 内部，整数和浮点数采用的是同样的储存方法，所以 25 和 25.0 被视为同一个值。

15. 关于 Symbol ，错误的说法是：（）
A、是ES6新增的一种数据类型
B、 Symbol() === Symbol() 结果为 false ,
C、 Symbol('same') === Symbol('same') 结果为 true
D、当 Symbol 值作为对象的属性名的时候，不能用点运算符获取对应的值。

  答案： C

解析：Symbol

16. 下面运算结果，结果为 true 的是：（）
A、 Symbol.for('name') == Symbol.for('name')
B、 Symbol('name') == Symbol.for('name')
C、 Symbol('name') == Symbol('name')
D、 Symbol.for('name') == Symbol('name')

  答案： A

17. 关于 for...of 的简述，说法错误的是：（）
A、它可以遍历所有具有iterator接口的数据结构
B、不可以用break来终止循环
C、使用continue可以跳过当前循环
D、可以遍历DOM list对象

  答案：B

解析：for...of循环

18. 关于 WeakSet 结构，说法错误的是：（）
A、与 Set 结构一样，成员值都是唯一
B、成员值必须是对象
C、 WeakSet 中的对象都是弱引用
D、可以 forEach() 方法实现遍历

  答案：D
  解析：
  WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。

19. 关于 WeakMap 结构，下列说法错误的是：（）
A、创建实例需要使用 new 关键字
B、键名可以是任何类型的值
C、 WeakMap 结构不支持 clear 方法
D、 WeakMap 结构不可遍历

  答案：B
  解析：
  WeakMap 与 Map 的区别有两点。
  首先，WeakMap 只接受对象作为键名（null除外），不接受其他类型的值作为键名。
  其次，WeakMap 的键名所指向的对象，不计入垃圾回收机制。

20. 下面关于类 class 的描述，错误的是：（）
A、 JavaScript 的类 class 本质上是基于原型 prototype 的实现方式做了进一步的封装
B、 constructor 构造方法是必须的
C、如果类的 constructor 构造方法有多个，后者会覆盖前者
D、类的静态方法可以通过类名调用，不需要实例化

  答案： C
  解析：A class may only have one constructor

BF-笔试

猜你喜欢

热点阅读