前端基础面经整理

一、js中数组增添、删除的方法
var ary = [1,2,3,4]
增加的方法：
1）push数组末尾添加
2）unshift开头添加
3）以对象的方式ary[ary.length] = 100添加
4）splice(i,0,x)添加到索引i的前面
5）concat(num)以数组拼接的方式
删除的方法：
1）pop删除末尾的
2）shift删除开头
3）以对象的方式ary[index] = null 删除(假删除)，索引不会改变
4）splice(i,m)从索引i开始删除m个，不写m就是删除到数组末尾
5）ary.length -- 删除最后一个
6）delete ary[index] 删除(真删除)，索引不会改变

二、有哪些继承方法
1）借助构造函数继承，利用call方法

function Parent(name){
    this.name = name;
}
Parent.prototype.age = 23;
function Child(name){
    Parent.call(this, name)
}

var child = new Child('lulu');
console.log(child.name); // lulu
console.log(child.age); // undefined

在子类中让父类调用call方法，这样子类就可以继承父类中私有的属性和方法，继承过来也是子类的私有属性和方法
[缺点]：无法继承父类原型上共有的属性和方法

2）利用原型链继承

function Parent(){
    this.name = 'lulu';
    this.ary = [1,2,3,4];
}
function Child(){
    this.age = 23
}

Child.prototype = new Parent;
var child1 = new Child;
var child2 = new Child;
console.log(child1.ary); // [1,2,3,4]
console.log(child2.ary); // [1,2,3,4]
child1.ary[0] = 100;
console.log(child1.ary); // [100,2,3,4]
console.log(child2.ary); // [100,2,3,4]

父类的实例拥有父类公有的属性和方法，让子类的原型指向父类的一个实例就可以实现继承父类公有的属性和方法
[缺点]：对于父类中的引用类型属性，子类的一个实例改变，其他实例拿到的值也会跟着改变

3）组合方法1和方法2可以解决原型链跟构造函数继承的缺点

function Parent(){
    this.name = 'lulu';
    this.ary = [1,2,3,4];
}
function Child(){
    Parent.call(this);
    this.age = 23
}

Child.prototype = new Parent;

var child1 = new Child;
var child2 = new Child;
child1.ary[0] = 100;
console.log(child1.ary); // [100,2,3,4]
console.log(child2.ary); // [1,2,3,4]

[缺点]：父类的构造函数执行了两次，可以进行优化

4）方法3的优化

function Parent(){
    this.name = 'lulu';
    this.ary = [1,2,3,4];
}
function Child(){
    Parent.call(this);
    this.age = 23
}

Child.prototype = Parent.prototype;
var child1 = new Child;
console.log(child1.__proto__.constructor);  // [Function: Parent]

让子类的原型直接指向父类的原型，这样父类的构造函数就只需要执行一次
[缺点]：函数的prototype属性上自带constructor属性，指向他的所在类，child1._proto_的constructor属性也就是Child.prototype的constructor属性，但是执行Child.prototype = Parent.prototype之后，原本的constructor属性就被覆盖，指向了父类

5）方法4的优化，利用Object.create方法

function Parent(){
    this.name = 'lulu';
    this.ary = [1,2,3,4];
}
function Child(){
    Parent.call(this);
    this.age = 23
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var child1 = new Child;
var parent = new Parent;
console.log(child1.__proto__.constructor); // [Function: Child]
console.log(parent.__proto__.constructor); // [Function: Parent]

6）冒充对象继承，在子类的函数体中，先获取父类的一个实例，遍历实例中的所有属性依次赋值给子类的私有属性

function Parent(){
    this.name = 'lulu';
    this.ary = [1,2,3,4];
}
function Child(){
    constructor: Child;
    var p = new Parent;
    for(var key in p){
        if(key in this){
            this['my'+key] = p[key];
        }
        this[key] = p[key];
    }
    this.age = 23
}

7）中介继承，利用_proto_属性，因此IE6-8不兼容
arguments的_proto_属性指向Object，若想要arguments也能使用数组中的方法，让arguments的_proto_属性指向Array，由于Array原型链最终也指向Object，就相当于在原来arguments的原型链中间加了一个节点。

function sum() {
    arguments.__proto__ = Array.prototype;
    arguments.sort(function (a,b) {
        return a - b;
    });
    console.log(arguments);
}
sum(12,13,24,6,32,17);

三、原型
每一个函数数据类型都有一个自带属性prototype，这个属性的值是一个对象数据类型，浏览器会为默认为这个对象开辟一个堆内存，这个堆内存中又自带一个constructor属性，其属性值就是当前类本身，即A.prototype.constrcutor === A。
没一个对象数据类型都自带一个_proto_属性，该属性的值是当前对象的所属类原型prototype，这样就形成了一个原型链，Object是所有类型的基类，因此它的原型上没有_proto_属性。

四、闭包及闭包的优缺点
函数执行形成不销毁的私有作用域，除了保护私有变量以外，还可以存储一些内容，这种机制叫做闭包。
闭包的一般应用：项目中多人协作，每个开发人员把自己的代码放在一个私有作用域里面，可防止相互之前产生冲突，需要供他人使用时可通过return或者window全局（保护作用）
私有作用域不销毁，可以保存里面的一些变量，如选项卡的实现（保存作用）
缺点：处理不当可能会导致内存泄漏

五、缓存
缓存：把请求过的资源存储在本地磁盘，下次请求就不需要再访问服务器了。缓存分为强缓存和协商缓存。
强缓存不会通过服务器而是直接从本地获取资源
response header里面的Expires表示过期时间，若在这个时间内，则命中强缓存（HTTP1.0）
Cache-Control：max-age=3000（HTTP1.1）表示在这个时间内再次请求，就会命中缓存，相对客户端的时间，若二者有偏差，以max-age为准
协商缓存则需要服务器告知本地缓存可不可用
Last-Modified/If-Modified-Since：浏览器第一次请求一个资源的时候，服务器返回的response header中会加上Last-Modified，Last-Modified表示该资源的最后修改时间；当浏览器再次请求该资源时，request header中会包含If-Modified-Since，该值为缓存之前返回的Last-Modified。服务器收到If-Modify-Since后，判断这两个值有没有变化，没有就返回304，此时服务器再返回的response header里面不会再添加Last-Modified
Etag：服务器生成的每个资源的唯一标识符，只要资源有变化这个值就会改变
Etag VS Last-Modified

  • 对于一些频繁修改的资源，Last-Modified只能检查到秒级，而Etag可以确保精度
  • Etag的优先级高，比如有些文件周期性地修改但内容不变，这时服务器校验优先考虑Etag
  • Etag需要服务器通过算法来计算出一个hash值，而Last-Modified只记录时间，因此性能要好一些

六、storage都包含什么 有什么区别
localStorage：永久有效，除非关闭浏览器或者手动清除
sessionStorage：当前页面有效，关闭页面后就会被清除
两者都是仅在客户端保存，不参与服务器通信，最大可保存5MB的信息
设置都是setItem(key, value)，获取都是getItem(key)

七、垃圾收集
标记清除：当变量进入执行环境（函数中声明变量）的时候，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”，
引用计数：跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。

八、正则表达式 数字怎么表示比如5~10
/^[5-9]|{10}$/

九、post和get的区别

  • get传参是通过url问号传参，而post是设置在Request Body中的导致
  • post请求传递给服务器的内容比get多，因为url长度有限制
  • get没有post安全
  • 浏览器会自动缓存get请求，post不会
  • 回退post会再次提交，get不会
  • post参数不保留，get会完整保留在历史记录里

十、怎么抓包，为了防止被抓取怎么办

十一、HTTP常见的状态码 都代表什么
200：成功 一个完整的HTTP事务完成（以2开头的状态码一般都是成功）

以3开头的一般也是成功，只不过服务器端做了很多特殊的处理
301： Moved Permanently 永久转移(重定向) 一般用于域名迁移
302： Moved Temporarily 临时转移(新的HTTP版本中307是临时重定向)一般用于服务器的负载均衡：当前服务器处理不了，把当前请求临时交给其他服务器处理
304： Not Modified 从浏览器缓存中获取数据 把一些不经常更新的文件或内容缓存到浏览器中，下次可直接从缓存中获取，减轻服务器压力，提高页面加载速度

以4开头的一般都是失败，且一般都是客户端的问题（没拿到数据）
400：请求参数错误
401：无权限访问
404：访问地址不存在>

以5开头的一般都是失败，且一般都是服务器端的问题（没拿到数据）
500：Internal Server Error未知的服务器错误
503：Service Unavailable服务器超载

十二、positon取值
static：默认
relative：相对元素本身偏移的
absolute：从文档流中脱离 独立的存在，相对于最近的relative或absolute定位，父级没有，就相对于body
fixed：脱离文档流 相对于可视区域是固定的 页面滚动缩放时，它依然距离左边原来的宽度(之前设置的)
absolute和fixed的区别(参照物不同)
-> 前者相对于最近的absolute或者relative
-> 后者相对于屏幕(移动端是viewport)

十三、怎么用css写圆形，怎么实现动画
border-radius可以实现圆形，50%及以上都是
动画：transition和keyframes(animation)
过渡动画和关键帧动画的区别：

过渡动画需要有状态变化，关键帧动画不需要状态变化关键帧动画能控制更精细
如何实现逐帧动画
使用关键帧动画，去掉补间(steps)

十四、选择器都有哪些
id选择器
class选择器
标签选择器
群组选择器
后代选择器
通配选择器

十五、行元素 块元素
行元素inline：内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0），margin垂直方向无效（margin-top,margin-bottom）,如果设置垂直方向需要用line-height属性
多个行内元素排列在一起，他们之间会出现空格
常见的行元素标签font，span，b，i，u，sub，sup，a
块元素block：块元素在浏览器中独占一行。可设置宽高，如果不设置宽高默认是100%（占满父级元素一整行）

常见的块元素标签div， h1-h6 ， p ，ul，hr，form，table ，tr，td
行内块元素inline-block：块元素共享一行，可设置宽高，多个行内元素排列在一起，他们之间会出现空格。可设置margin，padding属性。集合了块和行内的所有优点。
常见的行内块元素标签img，input

十六、水平垂直居中

  • margin: 0 auto;
    position: relative;
    top: 50%; /偏移/
    transform: translateY(-50%);
  • display: flex;
    align-items: center; /定义body的元素垂直居中/
    justify-content: center; /定义body的里的元素水平居中/
  • display: inline-block;
    inline-height：父级元素的高度

十七、伪类选择器
伪类选择器就是在某种特殊的状态下的样式，如点击按下、点击完等
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在与文档语言里的
伪类本质上是弥补常规css常规选择器的不足，以便获取更多信息
伪元素本质上是创建了一个有内容的虚拟容器
可以同时使用多个伪类，但只能同时使用一个伪元素

十八、跨域

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 知识点
    JS基础 页面由三部分组成：html：超文本标记语言，负责页面结构css：层叠样式表，负责页面样式js：轻量级的脚...
    小贤笔记阅读 633评论 0赞 5
  • 面试题
    Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,150评论 1赞 32
  • 前端面试题汇总（整理）
    【转载】CSDN - 张林blog http://blog.csdn.net/XIAOZHUXMEN/articl...
    竿牍阅读 3,519评论 1赞 14
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,816评论 1赞 45
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,171评论 0赞 21