前端面试题（附答案）

时间  2019-11-30
标签 端面 试题 答案 繁體版
原文   原文链接

一、使用至少两种方法，实现以下布局（box垂直居中于父元素，宽高不固定）？

第一种：css

<style> .container { display: table; } .inner { display: table-cell; vertical-align:middle; text-align:center; } </style>
<div class="container">
  <div class="inner">
  you own content
  </div>
</div>
复制代码

第二种：html

<style> .container { position: relative; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>
<div class="container">
  <div class="inner">
    your own content
  </div>
</div>
复制代码

第三种：前端

<style> .container{ text-align: center; } .container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .inner { display: inline-block; } </style>
<div class="container">
    <div class="inner">
        this is a box fixed in center of screen<br>The second line
    </div>
</div>
复制代码

二、px、em、rem有什么区别？

  • px 表示“绝对尺寸”（并不是真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有必定的区别，后续详细说明见文末说明1），利用 px 设置字体大小及元素宽高等比较稳定和精确。
  • em表示相对尺寸，其相对于当前对象内文本的 font-size（若是当前对象内文本的 font-size 计量单位也是em，则当前对象内文本的 font-size 的参考对象为父元素文本 font-size）。
  • rem 也表示相对尺寸，其参考对象为根元素<html> 的 font-size，所以只须要肯定这一个 font-size。

三、position有几种取值，每种取值相对于谁来进行定位？

  • absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
  • fixed （老IE不支持）生成绝对定位的元素，一般相对于浏览器窗口或 frame 进行定位。
  • relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
  • static 默认值。没有定位，元素出如今正常的流中
  • sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

四、JavaScript的数据类型有哪些？

  • 七种数据类型：Undefined、Null、Boolean、Number、String、Symbol、Object

五、用new运算符建立一个实例时，经历了哪些步骤？

例子🌰：java

function create() {
    // 建立一个空的对象
    let obj = new Object()
    // 得到构造函数
    let Con = [].shift.call(arguments)
    // 连接到原型
    obj.__proto__ = Con.prototype
    // 绑定 this，执行构造函数
    let result = Con.apply(obj, arguments)
    // 确保 new 出来的是个对象
    return typeof result === 'object' ? result : obj
}
复制代码
  1. 建立一个新对象
  2. 将构造函数的做用域赋给新对象（所以this就指向了这个新对象）
  3. 执行构造函数中的代码（为这个新对象添加属性）
  4. 返回新对象

六、下面这段代码返回值是什么？

var scope = 'global scope';
function checkScope() {
    var scope = 'local scope';
    function f() {
        return scope;
    }
    return f;
}
checkScope()(); // local scope
复制代码

七、用什么方法能够得到对象的类？写出代码

  1. Object.prototype.toString.call(对象)
  2. typeof: typeof 对象 或者 typeof(对象)

八、call()、apply()、bind()方法的做用是什么？何时会使用到这些方法？他们之间的区别是什么？

javaScript权威指南上的解释是： call() 、apply()能够看做是某个对象的方法，经过调用方法的形式来间接调用函数。bind() 就是将某个函数绑定到某个对象上。node

关于call() 和 apply() 在犀牛书上的解释可能比较生涩难懂，个人理解就是，它们的做用是： 让函数在某个指定的对象下执行。正则表达式

var obj = {x: 1}

function foo() {console.log(this.x)}

foo.call(obj) // 打印结果：1
复制代码

call() 和apply()的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。后端

call()和apply()的区别就在于，二者之间的参数。数组

call()在第一个参数以后的 后续全部参数就是传入该函数的值。apply() 只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。promise

var obj = {};
 
function foo(a, b, c) {
  console.log(b);
}
 
foo.call(obj, 1, 2, 3) // 打印结果：2;
复制代码
var obj = {};
 
function foo(a, b, c) {
  console.log(b);
}
 
foo.apply(obj, [1, 2, 3]) // 打印结果：2;
复制代码

bind() 方法和前二者不一样在于： bind() 方法会返回执行上下文被改变的函数而不会当即执行，而前二者是直接执行该函数。他的参数和call()相同。浏览器

这三个方法的做用都是改变函数的执行上下文！

九、利用正则表达式，写一个字符串转换成驼峰的方法。

function stringToCamelCase(str){
    var reg=/-(\w)/g; //子项()表示子项
    return str.replace(reg,function($0, $1){ 
        // $0表明正则总体，replace（）方法中的第二个参数如果回调函数，那么这个回调函数中的参数就是匹配成功后的结果
        // 若回调函数中有多个参数时，第一个参数表明整个正则匹配结果，第二个参数表明第一个子项
        alert($0); // -b
        alert($1); // b
        return $1.toUpperCase();
    });
}
复制代码

十、以下代码，控制台会输出什么内容？

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success');
    }, 1000);
})

const promise2 = promise1.then(() => {
    throw new Error('error~~~');
});

console.log('promise1', promise1);
console.log('promise2', promise2);

setTimeout(() => {
    console.log('promise1', promise1);
    console.log('promise2', promise2);
}, 2000);
复制代码

promise1 Promise {} promise2 Promise {} promise1 Promise {: "success"} Promise {: Error: error~~~at promise1.then (:8:11)}

十一、CommonJS、AMD、CMD的区别？

CommonJS

CommonJS 是以在浏览器环境以外构建 JavaScript 生态系统为目标而产生的项目，好比在服务器和桌面环境中，Node.JS遵循CommonJS的规范 CommonJS 规范是为了解决 JavaScript 的做用域问题而定义的模块形式，可使每一个模块它自身的命名空间中执行。该规范的主要内容是，模块必须经过 module.exports 导出对外的变量或接口，经过 require() 来导入其余模块的输出到当前模块做用域中。

var clock = require('clock');
clock.start();
复制代码

CommonJS 是同步加载模块

AMD

基于CommonJS规范的nodeJS出来之后，服务端的模块概念已经造成，很天然地，你们就想要客户端模块。并且最好二者可以兼容，一个模块不用修改，在服务器和浏览器均可以运行。可是，因为一个重大的局限，使得CommonJS规范不适用于浏览器环境。若是将上面的代码运行在客户端浏览器，就会报错。

上面的require方法是同步的。这对服务器端不是一个问题，由于全部的模块都存放在本地硬盘，能够同步加载完成，等待时间就是硬盘的读取时间。可是，对于浏览器，这倒是一个大问题，由于模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。

所以，浏览器端的模块，不能采用"同步加载"，只能采用"异步加载"。这就是AMD规范诞生的背景。

CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD出现了，它就主要为前端JS的表现制定规范。

AMD是Asynchronous Module Definition的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。 AMD也采用require()语句加载模块，可是不一样于CommonJS，它要求两个参数：

require([module], callback);

require(['clock'],function(clock){
  clock.start();
});
复制代码

requireJs就是AMD规范的实现

CMD

CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。它写起来是这样的：

define(function(require, exports, module) {
   var clock = require('clock');
   clock.start();
});
复制代码

AMD和CMD最大的区别是对依赖模块的执行时机处理不一样，而不是加载的时机或者方式不一样，两者皆为异步加载模块。

AMD依赖前置，js能够方便知道依赖模块是谁，当即加载；而CMD就近依赖，须要使用把模块变为字符串解析一遍才知道依赖了那些模块

十二、MVC、MVP、MVVM的区别？

MVC：

  1. View接受用户的交互请求
  2. View将请求转交给Controller
  3. Controller操做Model进行数据更新
  4. 数据更新以后，Model通知View数据变化
  5. View显示更新以后的数据

MVP：

  1. 各部分之间的通讯， 都是双向的。
  2. View 与 Model 不发生联系， 都经过 Presenter 传递。
  3. View 很是薄， 不部署任何业务逻辑， 称为 被动视图，Presenter 很是厚， 全部逻辑都部署在那里。

MVVM：

  1. 各部分之间的通讯， 都是双向的。
  2. View 与 Model 不发生联系， 都经过 ViewModel 传递。
  3. View 很是薄， 不部署任何业务逻辑， 称为 ViewModel 很是厚， 全部逻辑都部署在那里。

惟一的区别是， 它采用双向数据绑定，(data-binding) ： View 的变更。自动反映在 ViewModel, 反之亦然。 Angular 和 Ember 都采用这种模式

1三、简述v-if和v-show的区别？

v-if 是销毁删除节点、而且渲染时不会渲染 v-show是显示隐藏节点、至关于display:none

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程