欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端面试题（附答案）

程序员文章站 2022-04-11 11:54:16
...

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

第一种：

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

第二种：

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

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

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

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

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

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

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

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

例子????：

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. 返回新对象

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

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

7、用什么方法可以获得对象的类？写出代码

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

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

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

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

var obj = {x: 1}

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

foo.call(obj) // 打印结果：1

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

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

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

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()相同。

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

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

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();
    });
}

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

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

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就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块

12、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 都采用这种模式

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

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

相关标签： 面试题 javaScript HTML

上一篇： 八阿哥-酷-第三弹

下一篇： ThinkPHP查询返回简单字段数组的方法，thinkphp数组

推荐阅读