前端面试总结（秋招篇）

HTML篇

HTML标签

都表示斜体，如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。

lable中的for属性

lable的for属性指向的是表单元素的 id 属性。

表单提交的方法和路径

表单提交的方法和路径

CSS篇

position中的static、fixed、relative、absolute

static相当于没有定位 absolute定位寻找已绝对定位的父元素找不到就html

CSS选择器

选中类名为menu和open的li标签的子元素a的css选择器是 li.menu.open>a

垂直居中的总结

height = line-height

• position absolute relative 使用margin-top：-一半子元素的高度;margin-left:-一半子元素的宽度
• 在子元素的高度未知的情况下

.box span {
    position:absolute;
    width:100%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}

• display:table-cell

.box{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

• display:flex

.box{
    display:flex;
    justify-content:center;
    align-items:center;
}

transform

sknew rotate scale translate

响应式布局相关

• 使用百分比width
• 使用rem
• 媒体查询

@media screen and (max-device-width:500px)

transition

transition：all 0.5s ease-in-out 1s;/*  css属性  第二个动画的时间   动画效果   延迟加载时间   */

两列布局

• 浮动布局，左边浮动，右边使用margin-left
• absolute+margin

position:absolute; 
top:0px；
left:0px;


margin-left:200px;

• 使用BFC，不与浮动元素重叠的特性

float:left;
overflow:hidden;

JavaScript篇

常见的正则表达式

• 电话号码

/^1\d{10}$/

• 账号，字母、数字，下划线组成，但是要以字母开头，四到十六位

/^[a-zA-Z]\w{3,15}$/

常用Math对象方法的总结

• ceil(x) 对传入的数值进行上取舍

Math.ceil(0.1);//1

• floor(x)对传入的数值进行下取舍
• max(x,y)取x,y中的最大值
• min(x,y)
• random()返回的是0到1之间的随机数
• valueOf() 返回math对象的原始值

另注：
parseFloat()将传入的字符转换成为浮点数
parseInt()转换成为整数

布尔操作符

逻辑与不仅仅可以运用于布尔值，可以应用于各种类型的操作数

逻辑与应用于各种类型

逻辑或类似

逻辑或运用于其他类型

事件代理

将事件添加到父节点，让父节点代替它们去触发函数，而不用自己去触发函数。比如动态添加进li节点的时候，每次都要触发函数，使用事件代理可以很好的解决这个问题

jquery中绑定事件的方法

• bind——unbind,与delegate类似
• delegate——undelegate

$("div").delegate("p",click,function(){})

• live——die,与delegate类似
• on——off

$("div p").on("click",function(){})

窗口的高度、宽度

clientX + scrollLeft = pageX
clentY  +scrollTop = pageY

typeof

对于null和Array，使用typeof返回的是Object

object拥有的方法

• hasOwnProperty(peopertyName)用于检测该对象有没有包含该属性，这个属性不是原型链中的

o.hasOwnProperty("name")

• isPrototypeOf(object)用于检测传入的对象是不是这个对象的原型
• toString()

• valueOf()

  
  
  

  object拥有的方法

常见的引用类型

object function Date 正则表达式（RegExp） Array

判断对象是否是数组的方法

• isArray

Array isArray a

• 利用原型判断

Object.prototype.toString.call(obj)==='[object Array]'

• instanceof操作符

obj instanceOf Array
a instanceOf Array

• 利用constructor判断

a.constructor  == Array

字符串常用方法总结

• concat——注意就是不会影响a和b

  
  
  

  concat
• charCodeAt(index)表示指定位置的Unicode编码,在统计字符串的字节长度的时候要用到

function getLen(str){
    var len = str.length;
    var bytes = len;

    for(var i=0;i255){
            bytes++;
        }
    }

    console.log(bytes);
}

getLen("冯光平123");

• charAt(index)指定位置的字符

var str = "ABC"; 
str.charAt(1); //B

• slice和substring()方法比较类似哦~
• indexOf()，lastIndexOf()和下面数组的很类似，不再累赘
• split([separator[,limit]]) 将一个字符串分割为子字符串，然后将结果作为字符串数组返回。

var str = "AA BB CC DD EE FF"; 
alert(str.split(" "，3)); 

• toLowerCase()
• toUpperCase()

apply()和call()

都是将另一个对象代替当前对象
apply()参数是一个数组
call()参数是多个参数

数组常用方法总结

• join()注意原数组没有改变
• sort()方法中会调用每个数组项的toString()方法，然后得到比较的字符串，所以会出现下面的问题,也要注意sort()方法会改变原数组

arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)

为了解决上面的问题，sort()接受一个函数作为参数

function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

• reverse(),原数组会改变

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

• slice()是浅复制
• splice(start,deleteCount,items)
• indexOf() lastIndexOf()返回的都是查找的项在数组中的位置，接受两个参数，第一个参数是要查找的字符，第二个则是从哪里开始查找
• forEach() 接受三个参数，第一个遍历的数组内容，第二个是索引，第三个是数组本身
• map()——映射

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

• filter()——过滤

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

• every() 每一项都符合才返回true

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

• some()只要一个符合条件就返回true

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

继承

原型继承

核心：让一原型去继承另一个类型的实例

sub.prototype = new super();

prototype:是每个函数都会有的一个属性，是一个指针，可以指向一个对象，而这个对象的用途可以包含由特定类型的所有实例共享的方法和属性

constructor:是原型对象自动获得的属性。这个属性包含一个指向prototype属性所在的函数的指针
缺点：
1.实例共享原型对象上的引用属性时，一个改变会影响所有实例的属性
2.在创建子类型的实例时，不能向超类型的构造函数中传递参数

构造函数继承

子类构造函数中的内部调用父类的构造函数

apply   call

superType.call(this);//核心代码

缺点：只是继承了父类的属性，继承不了原型上的方法。

组合继承

使用原型链实现原型属性和方法的继承，使用构造函数实现实例属性的继承

原型式继承

function object(o){
      function F(){};
      F.prototype = o;
      return new F();
}

跨域

同源策略下，当前客户端无法访问与自身不同协议、不同域名、不同端口的资源。三者只要出现一种不同，就是跨域

jsonp

原理：利用的是script标签中的src没有跨域的限制，通过在src中的URL后面的参数上添加一个回调函数的名称（页面首先声明好回调函数），然后服务器接收回调函数的名字，并返回一个包含数据的回调函数，供客户端使用

CORS

自定义HTTP头部，让浏览器和服务器进行沟通，从而决定请求响应是true还是false

计算机网络篇

从浏览器输入地址后到显示页面的步骤

总结：

算法篇

快速排序

快速排序的博客

Javascript获取字符串字节数

qa+

学科基础篇

C语言的数据类型总结

short的长度：两个字节

两个字节,每个字节8比特,每个比特只有0或1两个值.
有符号型的最高比特位用于表示正负号.（0是正号,1是负号）
所以最大的数据是：正号+15个比特的1 (2^15)
最小的数据是：负号+15个比特的1 （-2^15)

数据库事务四大特性

分别为：一致性、原子性、分离性、持久性

将持续更新.....