前端面试总结(秋招篇)

HTML篇

HTML标签

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

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

响应式布局相关

<meta name="view-port" content = "width = device-width,initial-scale = 1 ,user-scalable=no">
  • 使用百分比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;i<len;i++){
        if(str.charCodeAt(i)>255){
            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)

数据库事务四大特性

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

将持续更新.....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容