Web前端面试题中的那些套路

时间：2021-1-8 作者：admin

(1) 请谈谈对px、em、rem、vh、wh等单位的理解。你还用过哪些单位。

  • px，如果显示器屏幕分辨率相同则可看做是绝对单位，如果显示器屏幕分辨率不同则相对于显示器屏幕分辨率。

  • em，相对于该元素font-size属性值，由于font-size是可继承属性，因此如果该元素未被显式设置font-size属性值，则会继承该元素的父元素的font-size值，如果该元素的父元素也未显式设置font-size属性值… …最终继承自根元素（HTML元素），如果根元素也没有被显示设置font-size属性值，则使用用户代理默认的font-size属性值。

  • rem，root em, 是CSS3新增的一个相对单位，与em的区别在于：使用rem为元素设置font-size属性值时，仅相对于根元素（HTML元素）。

  • vh，viewpoint height，视窗高度，1vh等于视窗高度的1%。

  • vw，viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

(2) 以下程序输出的结果是什么？说出你的理由。

var length = 10;
function fn() {
  console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
}
obj.method(fn);

答案：控制台分别输出10和1。

将题目更改为：

var length = 10;
const fn = () => {
  console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
}
obj.method(fn);

则控制台分别输出10和10。

本题共涉及3种情况下的this指向：

1、对象调用方法时，方法中的this指向调用该方法的对象。

2、执行自由函数时，严格模式下函数中的this为undefined，非严格模式下为宿主对象（浏览器中的window）。

3、S6中箭头函数中的this指向由词法作用域规定。

本题中，输出“10”符合第2种情况，输出“1”符合第1种情况。

知识延伸：

(3) 请分别写出下方两则代码片段执行后的输出结果。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();

let a = [];
for (let i = 0; i < 10; i++) {
  a[i] = () => {
    console.log(i);
  };
}
a[6]();

分别输出10和6。

知识延伸：

(4) 请解释cookie、sessionStorage和localStorage三者的区别。

三者都受同源策略的制约。

  • 客户端向服务端发送请求时和服务端向客户端发送响应时，cookie会已请求头、响应头的形式在客户端、服务端流动；cookie数据有大小限制，不能超过5KB；cookie期限可配置；常用于识别用户身份、记录用户浏览信息等情况。

  • sessionStorage和localStorage存储于客户端，HTML5新标准中的API，不会随请求主动发往服务端，此两者的可用存储空间在理论上未设上限，由用户代理规定存储空间上限，。

  • sessionStorage为会话存储，理论上存储的数据有期限，与标签页生命周期一致，刷新不会丢失，部分浏览器有恢复上一次关闭的标签功能，亦会恢复会话时存储的数据。

  • localStorage理论上在用户不主动清除浏览器缓存时会永久存储在本地，理论上存储的数据无期限。

(5) 请在下方代表浏览器窗口的黑色矩形中绘制出下方HTML/CSS代码片段在浏览器中渲染后的样子。并再写出至少一种常用的定位方式。

<style>
  .box {
    width:100px;  
    height:100px;  
    border: 1px solid #111;  
  }
  .box:first-child {
    position: relative;
    left: 50px;
    top: 50px;
  }
  .box:nth-child(3) {
    position: fixed;
    right: 0;
    top: 0;
  }
</style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

考察：

1、relative、absolute、fixed3种定位方式中各自的top、right、bottom、left属性是相对于谁定位，它们各自是否脱离文档流。

2、块级元素独占一行

(6) 请按顺序写出执行下方代码后控制台的输入结果。

function fn(cb) {
    setTimeout(function () {
        cb(a);
        console.log('print:', b);
    }, 0)
    var b = a,
        a = 2;
    console.log('print:', a);
    return
}
var a = 3;
var foo = function(arg){
    console.log('print:', arg);
}
fn(foo);
console.log('print:', a);

控制台输出结果：

print: 2
print: 3
print: 2
print: undefined

考察：

  • 理解变量声明表达式、变量赋值语句、函数声明语句。

  • 了解javascript单线程、理解事件循环队列运作机制、了解过Promise类结果事件回调冲突。

  • 作用域、作用域链、闭包、高阶函数。

  • 了解哪些情况会导致内存泄漏，如何规避泄漏的发生。

(7) 请阅读下方未完成的HTML/JS代码片段：

<body>
    <aside></aside>
    <main>
        <div>
            <a id="XUELI" href="http://www.edu2act.net/">雪梨教育</a>
        </div>
    </main>
</body>

<script>
  var button = document.getElementById('XUELI');
  document.addEventListener('click', function () {
    console.log('雪');
  }➀);
  document.addEventListener('click', function (➁) {
    console.log('提升品牌影响力');
    ➂
  }➃);
  document.getElementsByTagName('main')[0].addEventListener('click', function(➄){
    ➅
  }➆);
  button.addEventListener('click', function(➇){
    ➈
  }➉);
</script>

请补全上方JS代码中10处（你认为有必要补全的位置）。要求用户单击“雪梨教育”超链接后，控制台共输出3次，每次输出内容如下：

雪
梨
教育

(8) 请谈一谈前端同源策略。请写出你知道的解决同源策略限制的方法。

协议相同（TCP/IP、HTTP、HTTPS、FTP等不同协议）
域名相同（www.shuaihua.cc、shuaihua.cc等不同级别域名）
端口相同（80、8080、3000，443等不同端口号）

Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求不能发送。

1、浏览器允许使用 document.domain 共享 Cookie。

2、父窗口可以把信息，写入子窗口的片段标识符（URL的#号后面的部分），子窗口可以通过 hashchange 事件读取 # 后的数据，从而实现跨域资源共享。

3、浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

4、HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging），使用 window.postMessage 方法，允许跨窗口通信，不论这两个窗口是否同源。

5、JSONP、websocket、CORS

(9) 请用使用HTML和CSS实现一个自适应的正方形。

  • 代码片段字迹清晰、易读，使用何种背景色值。
  • 避免使用内联样式；了解内联样式、内部样式、外联样式；对样式规则优先级了解程度。
  • 如果元素的padding或margin值是百分比值，那么该元素最终计算值是根据父元素的宽度来的。
  • 伪元素及如何使用。
  • 分得请伪类和伪元素。
  • 垂直外边距重叠行为，产生原因、意义以及如何解决（考察是否了解BFC）。
  • 对一个问题能提出多种解决方案。

方法1：

<style>
  .box{
    width: 50%;
    padding-top: 50%;
    background-color: black;
  }
</style>
<div class="box"></div>

方法2：

<style>
  .box{
    width:50%;
    background-color: black;
    overflow: hidden;
  }
  .inner{
    margin-top: 100%;
  }
</style>
<div class="box">
  <div class="inner"></div>
</div>

方法3：

<style>
  .box{
    width:50%;
    background-color: black;
  }
  .box:before{
    content: '';
    padding-top: 100%;
    display: block;
  }
</style>
<div class="box"></div>

方法4：局限性，只能相对于视窗。

<style>
  .box {
    width: 50%;
    height: 50vw;
    background: red;
  }
</style>
<div class="box"></div>

(10) 故意出一道题干本身存在问题的题目，考察应试者是否有敢于提出质疑、对知识有大破砂锅问到底的韧劲、对问题有独到见解和直舒己见开门见山的直爽性格。

(11) 请用JavaScript实现一个函数，其接受一个可能包含嵌套的数组，返回一个展开的数组。

var arr = [1, [2, [3, 4]]];

方法1：递归

function flatten(arr){
  var res = [];
  for(var i=0;i<arr.length;i++){
    if(Array.isArray(arr[i])){
      res = res.concat(flatten(arr[i]));
    }else{
      res.push(arr[i]);
    }
  }
  return res;
}

方法2：reduce

function flatten(arr){
  return arr.reduce(function(prev,item){
    return prev.concat(Array.isArray(item)?flatten(item):item);
  },[]);
}

相关资讯:

  1. CSS 静态、流式、自适应、弹性、响应式布局
  2. 个人理解的CSS文档流
  3. 结合Element分析基于scss实现BEM的方法
  4. width: 100%和width: auto有什么区别
标签：, ,
声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

今日推荐

Python小白的数学建模课-B5. 新冠疫情 SEIR模型

传染病的数学模型是数学建模中的典型问题，常见的传染病模型有 SI、SIR、SIRS、SEIR 模型。 考虑存在 […]