前端大厂面试题 2

选择题
下面哪项的样式优先级最高
Answer (B)
A. div #span
B. #div .span
C. .div span
D. .div #span
下列说法正确的是
Answer (BC)
A. setTimeout(foo, 0) 这行代码可以等价替换为 foo()
B．使用 Object.assign() 可以实现对象的浅拷贝
C. for...in 循环只能遍历对象上的可枚举属性
D. Object.keys() 可以遍历出对象原型链上的属性
['1', '2', '3'].map(parseInt) 结果为?
Answer (D)
A. [1, 2, 3]
B. [0, 1, 2]
C. [NaN, NaN, NaN]
D. [1, NaN, NaN]
以下哪些场景下请求会触发跨域？
Answer（ABC）
A. 由 XMLHttpRequest 或 Fetch 发起的跨域 HTTP 请求
B. CSS 中通过 @font-face 使用字体资源
C. 使用 drawImage 将 Images/video 画面绘制到 canvas
D. html script 请求 JS 资源
下列说法正确的是
Answer（ACD）
A. requestAnimationFrame(foo) 确保使浏览器在下一次重绘之前调用 foo 方法
B. 在 addEventListener 的处理方法中使用 e.preventDefault() 可以阻止事件冒泡
C. 把 <script> 标签的引入放在文档末尾可以确保脚本下载和执行均在文档解析完成后发生
D. 多个 <script> 标签使用 defer 属性引入脚本时，可以确保脚本的执行是按照其被引入的顺序的
问答题
有哪些常见的 CSS 伪类以及用途？有哪些常见的 CSS 伪元素以及用途？
Answer
伪类
:link, :visited, :hover, :active：表示 a 链接点击过程中的几个状态（LOVE and HATE）
:not()：匹配不在声明项内的选择器对应的元素，不支持嵌套匹配
:nth-* 家族：元素位置匹配，支持索引或 group 匹配
:empty：表示没有任何子节点（包括空格、注释）的元素
表单相关
:disabled：匹配被禁用的元素，比如表单项不可聚焦，对应的也有 :enabled 状态
:checked：表示表单元素被选中的状态，比如 checkbox, radio, select option
:invalid：表单表单元素不符合原生表单校验项，比如通过 type 设置的 email, URL，或者通过 pattern, required 定义的规则
伪元素
::before()：在元素内创建一个占位元素作为第一个子节点（需要配合 content 属性使用，默认为行内元素，不支持替换元素如 img 内创建）
::after()：在元素内创建一个占位元素作为最后一个子节点，其他行为同上
::placeholer: 定义表单元素占位文本样式
举例 JS 3 种强制类型转换和 2 种隐式类型转换？
Answer
强制类型转换：parseInt、parseFloat、Number、String
隐式类型转换：== + -
浏览器在解析 DOM 的过程中，如果遇到 js 脚本会怎么样？为什么？
Answer
需要暂停 DOM 解析去执行 js，因为 js 有可能会修改当前状态下的 DOM

Coding
/**

• 使用 javascript 实现 parseUrl 方法
• @param
• @returns {Object} 结构化的 URL 信息
• @example
• parseUrl('https://www.xiaohongshu.com/test?foo=true') // return { origin: 'https://www.xiaohongshu.com/test', query: { foo: 'true' }}
• parseUrl('https://www.xiaohongshu.com/test?id=1&name=杨#common') // return { origin: 'https://www.xiaohongshu.com/test', query: { id: '1', name: '杨' }, hash: 'common' }
  */
  Test Case
  describe('test parseUrl', () => {
  const tests = [
  {
  input: 'https://www.xiaohongshu.com/test?id=1&name=杨#common',
  output: {
  origin: 'https://www.xiaohongshu.com/test',
  query: { id: '1', name: '杨' },
  hash: 'common',
  },
  },
  {
  input: 'https://www.xiaohongshu.com/test?foo=true',
  output: {
  origin: 'https://www.xiaohongshu.com/test',
  query: { foo: 'true' },
  },
  },
  ]

tests.forEach(test => {
it(test ${test.input}, () => expect(parseUrl(test.input)).to.be.deep.equal(test.output))
})
})
validBrackets
/**

• 验证括号是否成功匹配
• @description 给定一个只包含 '('，')'，'['，']'，'{'，'}' 的字符串（支持嵌套），判断是否按相同类型的括号和顺序进行闭合
• @param {String} input 原始字符串
• @returns {Boolean} 返回是否符合匹配规则
• @example
• validBrackets('()') // true
• validBrackets('()[]{}') // true
• validBrackets('([{}])') // true
• validBrackets('(]') // false
• validBrackets('([)]') // false
  */
  Test Case
  const tests = [
  { input: '()', output: true },
  { input: '(){}[]', output: true },
  { input: '({[]})', output: true },
  { input: '(]', output: false },
  { input: '([)]', output: false },
  ]
  describe('test validBrackets', () => {
  tests.forEach(test => {
  it(test ${test.input}, () => expect(solution(test.input)).to.be.equal(test.output))
  })
  })