部分前端面试笔试题汇总

最新推荐文章于 2025-01-31 19:31:05 发布

徐卡丘

最新推荐文章于 2025-01-31 19:31:05 发布

阅读量536

点赞数

分类专栏： web前端文章标签：前端面试面筋

web前端专栏收录该内容

4 篇文章

订阅专栏

这是参加一个公司的笔试题（客如云）

1.div垂直居中

资源来自：http://www.haorooms.com/post/css_div_juzhong

http://www.cnblogs.com/dushao/p/5999239.html

固定高宽div垂直居中

必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

如上图，固定高宽的很简单，写法如下：

 position: absolute;
 left: 50%;
 top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

不固定高宽div垂直居中的方法

方法一：

用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。

html如下：

<div class="block" style="height: 300px;">

    <div class="centered">
        <h1>haorooms案例题目</h1>
        <p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
    </div>

</div>

css如下：

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

方法二：

可以用table布局方法，但是这种方法也有局限性！

html：

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

css:

.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

方法三，终极解决方法：

以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！

方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()

demo如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>haorooms不固定高度div写法</title>

    <style>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:50%;
  height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}


    </style>
</head>
<body>
    <div class="center"></div>
</body>
</html>

我上面的css只是针对webkit内核的浏览器，其他内核浏览器写法如下：

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

关于每个浏览器的写法，可以看看我之前的一篇文章：http://www.haorooms.com/post/css_common

有些弹出层的样式，也可以用这个方法居中

position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

方法五

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;
content 清除浮动，并显示在中间。

<div id="box">
    <div id="content">Content here</div>
    <div id="floater"> 
</div>

#floater {
    float: left;
    height: 50%;
    margin-bottom: -120px;
}

#content {
    clear: both;
    height: 240px;
    position: relative;
}

优点：

适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：

唯一我能想到的就是需要额外的空元素了，可能对于某些强迫症患者来说是不愿意的(这个方法的应用应该也很广)

方法六

这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

<div id="box">
    <div id="content"> Content here</div> 
</div> 

#content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}

优点：

简单粗暴,代码简单,其实设计者当初也根本没想到也能这样用,但是聪明的大家硬是凿出了一条简单的路。

缺点：

IE(IE8 beta)中无效
无足够空间时，content 被截断，但是不会有滚动条出现

2.HTML5新特性

1.新的文档类型 (New Doctype)

2.脚本和链接无需type

3.引入新元素

header、footer使代码更简洁

hgroup、figure

4.添加新属性

required：指定了某一输入是否必需。当文本框被指定必需时，如果空白的话表格就不能提交

autofocus：自动聚焦属性

5.支持Video和audio

6.视频预载

可以在<video>元素中加上preload="preload"或者只是preload

当用户访问页面时这一属性使得视频得以预载

7.HTML5中新的pattern属性让我们能够在标签处直接插入一个正规表达式。

8.显示控制条 (Display Controls)

为了渲染出播放控制条，我们必须在video元素内指定controls属性。

3.this指针有哪些情况

优秀文章：http://www.cnblogs.com/imwtr/p/4766543.html

1、作为普通函数使用

2、作为对象方法来使用

3、call和apply

4、作为构造函数来使用

下面分别说明

1、作为普通函数来使用：

复制代码

 function funcA() {
    this.name = "hello";
    console.log(this.name);
    this.show = function() {
        console.log(this.name);
    }
}
funcA();// 1、hello

复制代码

这个时候的this 代表的是window的指针，所以当这段代码运行完之后，你再输出console.log(window.name)时候，你会发现输出为”hello”,在使用中尽量避免。

复制代码

var name = 'name1'; 
console.log(name);

this.name = 'name2';
console.log(name);  //name1
console.log(this.name);  //name2

window.name = 'name3';
console.log(name);  //name3
console.log(this.name);  //name3
console.log(window.name);  //name3

复制代码

直接调用一个函数，this 默认会指向全局（浏览器端为window)

复制代码

var name = 'name1';
function sayName(){
    console.log(name);
    console.log(this);
}

sayName();
window.sayName();

复制代码

可以看到

还有几个常见的情况，根据谁调用方法就指向谁的原则，this的指向要细看

复制代码

// 全局 name
var name = 'name1';

var obj = {
    name: 'name2',
    sayName: function(){
                // 调用它的时候 this指向全局
        return function(){
            console.log(this.name);
        };
    },
    changeName: function(){
               // 调用它的时候 this指向全局
        setTimeout(function(){
            this.name = 'name3';
        },0);
    }
};

obj.sayName()();  //name1
obj.changeName();
setTimeout(function(){
    console.log(name);  //name3
    console.log(obj.name);  //name2
},0);

复制代码

像这些类似匿名的函数，默认都是被全局（浏览器下的window）对象调用，要正确地让obj调用，就要指代好

可以用that保持this再进行下一步，或者匿名函数传值，或者使用call/apply/bind改变context等

复制代码

var name = 'name1';

var obj = {
    name: 'name2',
    sayName: function(){
        var that = this;
        return function(){
            console.log(that.name);
        };
    },
    changeName: function(){
        var that = this;
        setTimeout(function(){
            that.name = 'name3';
        },0);
    }
};

obj.sayName()();  // name2
obj.changeName();
setTimeout(function(){
    console.log(name); // name1
    console.log(obj.name);  // name3
},0);

复制代码

2、作为对象方法来使用

var obj={name:"hello",show:function(){

console.log(this.name);

}};

obj.show();

这个很简单，this指向自己,所以this.name就用hello;

如果代码修改下：

复制代码

var obj={name:"hello",show:function(){
    console.log(this.name);
}};
obj.show();

var objA={name:"world"}
objA.show=obj.show;
objA.show()

复制代码

这个结果又是什么呢？答案是”world”,因为在js中对象都是引用类型，当objA.show=obj.show这句代码把objA.show也指向的show方法，所以在调用的时候会把this，指向objA而不是obj.

3、call和apply

这个在上面的继承中的原型冒充中也提过一些，这里也详细说明this在call和apply中微秒的用法：

复制代码

function funcA() {
    this.name = "hello";
    console.log(this.name);
    this.show = function() {
        console.log(this.name);
    }
}
 
var a = new funcA();
a.show();
var objA = {
    name: "objA"
}
a.show.call(objA);

复制代码

上面这段代码就是call的用法，这里我们可以把代码拆解成我们能看的懂的形式：

a.show.call(objA)====>{
obj.show=a.show();
obj.show();
delete obj.show();
}

上面就是call的类似执行的过程的形势（实际上并不是这样的，可以这样来记），知道了这个执行过程，我们就来探究这个的执行过程：

1、把a.show里面的方法中的this全部换成obj.

2、执行a.show(),同时把后面的参数作为参数处理。

4、作为构造函数来使用

比如 new Foo();

先来看个简单的例子：

复制代码

var name = 'name1';
function Foo(){
    // 赋值this(当前对象)的name属性值
    this.name = 'name2';
}

// new 构造函数产生一个实例
var foo = new Foo();

console.log(name);
console.log(foo.name);

// 直接调用该函数
Foo();
console.log(name);

复制代码

可以看到，如果函数倾向于和 new 关键词一块使用，则我们称这个函数为构造函数，当new 了之后，this则指向这个心创建的对象（这个new 的过程其实也涉及到了继承机制）。

若直接调用这个函数，this就默认执行全局对象了。

4.常见的数据结构

详细的：http://www.jianshu.com/p/230e6fde9c75

数据元素相互之间的关系称为结构。有四类基本结构：集合、线性结构、树形结构、图状结构;

集合结构:除了同属于一种类型外，别无其它关系

线性结构:元素之间存在一对一关系常见类型有: 数组,链表,队列,栈,它们之间在操作上有所区别.例如:链表可在任意位置插入或删除元素,而队列在队尾插入元素,队头删除元素,栈只能在栈顶进行插
入,删除操作.

树形结构:元素之间存在一对多关系,常见类型有:树(有许多特例:二叉树、平衡二叉树、查找树等)

图形结构:元素之间存在多对多关系,图形结构中每个结点的前驱结点数和后续结点多个数可以任意线性结构、树形结构、图状结构;

集合结构:除了同属于一种类型外，别无其它关系

线性结构:元素之间存在一对一关系常见类型有: 数组,链表,队列,栈,它们之间在操作上有所区别.例如:链表可在任意位置插入或删除元素,而队列在队尾插入元素,队头删除元素,栈只能在栈顶进行插
入,删除操作.

树形结构:元素之间存在一对多关系,常见类型有:树(有许多特例:二叉树、平衡二叉树、查找树等)

图形结构:元素之间存在多对多关系,图形结构中每个结点的前驱结点数和后续结点多个数可以任意

常用数据结构 · 数组（静态数组、动态数组）、线性表、链表（单向链表、双向链表、循环链表）、队列、栈、树（二叉树、查找树、平衡树、线索树、线索树、堆）、图等的定义、存储和操作 · Hash（存储地址计算，冲突处理）

5.值类型和引用类型的区别

内容来自：http://www.jb51.net/article/25610.htm

（1）值类型：数值、布尔值、null、undefined。

（2）引用类型：对象、数组、函数。

（1）值类型理解：变量的交换等于在一个新的地方按照连锁店的规范标准（统一店面理解为相同的变量内容）新开一个分店，这样新开的店与其它旧店互不相关、各自运营。

【值类型例子】

复制代码代码如下:

function chainStore()
{
var store1='Nike China';
var store2=store1;
store1='Nike U.S.A.';
alert(store2); //Nike China
}
chainStore();
//把一个值类型（也可以叫基本类型）store2传递给另一个变量（赋值）时，其实是分配了一块新的内存空间，因此改变store1的值对store2没有任何影响，因为它不像引用类型，变量的交换其实是交换了指像同一个内容的地址。

（2）引用类型理解：变量的交换等于把现有一间店的钥匙（变量引用地址）复制一把给了另外一个老板，此时两个老板同时管理一间店，两个老板的行为都有可能对一间店的运营造成影响。

【引用类型例子】

复制代码代码如下:

function chainStore()
{
var store1=['Nike China'];
var store2=store1;
alert(store2[0]); //Nike China
store1[0]='Nike U.S.A.';
alert(store2[0]); //Nike U.S.A.
}
chainStore();
//在上面的代码中，store2只进行了一次赋值，理论上它的值已定，但后面通过改写store1的值，发现store2的值也发生了改变，这正是引用类型的特征，也是我们要注意的地方。

6.JS闭包

一分钟理解JS闭包：http://www.jb51.net/article/83524.htm

详解JS闭包：https://segmentfault.com/a/1190000000652891

有权访问另一个函数作用域内变量的函数都是闭包。

闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。

闭包有三个特性：

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

闭包是javascript语言的一大特点，主要应用闭包场合主要是为了：设计私有的方法和变量。

7.面向对象

封装、继承、多态

面向对象从另一个角度来解决这个问题。它抛弃了函数，把「对象」作为程序的基本单元。那么对象到底是个什么东西呢？对象就是对事物的一种抽象描述。

面向对象的编程，依次向不同的对象发送命令就可以了。

类

具有相同特性（数据元素）和行为（功能）的对象的抽象就是类。因此，对象的抽象是类，类的具体化就是对象，也可以说类的实例是对象，类实际上就是一种数据类型。

类具有属性，它是对象的状态的抽象，用数据结构来描述类的属性。

类具有操作，它是对象的行为的抽象，用操作名和实现该操作的方法来描述。[2]