前端面试、笔试中常见但又容易让人忘记忽略的知识点

前一段时间忙着做项目和做面试的准备、一度忘记了更新博客、之前在刷面试题的时候就会遇到很多知识点感觉是既陌生又熟悉,这种感觉还是挺难受的,所以我就把前一段时间刷题后根据答案整理出来了一些知识点,这些都是在平常很容易忽略又忘记的,但很多面试和笔试都又有可能出现,所以我觉得还是挺重要的,就打算分享给广大的朋友们,后面也会继续更新

1.JavaScript实现继承共6种方式:
原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

2.prototype与__proto__之间的关系
Object.prototype只是一个普通对象,它是js原型链的最顶端
 Object.prototype.proto=== null;//true
 Object.prototype.prototype === undefied;//true
Object.prototype只是一个普通对象(普通对象没有prototype属性,所以值是undefined),Object.prototype是js原型链的最顶端,
它的__proto__是null(有__proto__属性,但值是null,因为这是原型链的最顶端)。
Ø 在js中如果A对象是由B函数构造的,那么A.proto === B.prototype。
javascript中对象是由Object创建的,函数是由Function创建的。
Ø 内置的Object是其实也是一个函数对象,它是由Function创建的。
Object.proto === Function.prototype;
Ø js中每一个对象或函数都有__proto__属性,但是只有函数对象才有prototype属性。

//函数对象
function Person()
{
}

// 普通对象
var obj = {};
obj.proto === Object.prototype;//true
obj.prototype === undefined;//true
Person.proto === Function.prototype;//true
Person.prototype !== undefined;//true

原型链是基于__proto__形成的,继承是通过prototype实现的。
Ø Function.prototype是个特例,它是函数对象,但是没有prototype属性。其他所有函数都有prototype属性。
Function.prototype.prototype === undefined;//true
Ø 内置的Function也是一个函数对象,它是通过自己来创建自己的。
Function.proto=== Function.prototype;//true
Ø 函数也是对象,因为Function.prototype__proto__指向Object.prototype。
typeof Function.prototype.proto) === “object”;//true
Function.prototype.proto=== Object.prototype;//true

3.通过修改document.domain来跨子域

4.使用window.name来进行跨域

5.阻止默认事件:
e.preventDefault()
e.returnValue = false (IE)
阻止冒泡:
e.stopPropagation()
e.cancelBubble = true (IE)

6.ES5
forEach(), filter(), reduce(), every() 和some()都会跳过空位。
map()会跳过空位,但会保留这个值
join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
ES6 中都会将空位当做undefined

7.如何垂直居中一个
#container{
display:table-cell;
text-align:center;
vertical-align:middle;
}
8.session与cookie的区别
Session是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在集群、数据库、文件中;
Cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息,也是实现Session的一种方式。

9.children与childNodes之间的区别
children 属性与 childNodes 属性的差别 childNodes 属性返回所有的节点,包括文本节点、注释节点;
children 属性只返回元素节点; 注:IE6 到 IE8 完全支持 children 属性,但是,返回元素节点和注释节点,
IE9 以上版本只返回元素节点。

10.HTML 音频/视频 方法
load() 重新加载音频/视频元素。
play() 开始播放音频/视频。
pause() 暂停当前播放的音频/视频。
addTextTrack() 向音频/视频添加新的文本轨道。
canPlayType() 检测浏览器是否能播放指定的音频/视频类型。

11.HTML中 元素为元素定义参数

12.
在 JS 中,只有 0,-0,NaN,"",null,undefined 这六个值转布尔值时,结果为 false,

13.
使用new运算符调用函数时,会返回一个对象。
A:String()作为普通函数使用时,将值转为字符串,不是对象,默认返回是一个空对象,原型为匿名函数的prototype。
String(new function(){ return String(‘foo’); })
“[object Object]”
B:String()作为构造函数来用时,返回了一个字符串包装对象。
String(new function(){ return new String(‘foo’); })
“foo”

14.
一个页面只能存在一个title元素,main元素可以多个,但只能显示一个(其他的隐藏)

15.
DHTML是Dynamic HTML的简称,就是动态的html,它只是HTML、CSS和客户端脚本(js)的一种集成

16.
能用来设置网页数值的单位有:%、px、rem

17.
在 CSS 规范中,有4种类型的可用视口单位: vw — 1vw 等于视口宽度的 1% vh — 1vh 等于视口高度的 1%
vmin — vw 和 vh 中的较小值 vmax — vw 和 vh 中的较大值 视口,即浏览器屏幕大小,1vw 等于浏览器宽度的 1%,
100vw 即整个浏览器的宽度。

18.回流和重绘
改变页面元素的大小、位置、是否隐藏等都会引起回流;
如果只改变外观、风格,不影响布局,会引发重绘

19.什么是BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与,
它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
BFC触发的条件:

  1. float: left / right
  2. position: absolute / fixed
  3. overflow: auto / scroll / hidden
  4. 根元素
  5. display: inline-block / table-caption / table-cell

20.–Set 无重复列表类型

特点:

1.没有下标,不是按照下标存储,但是是有序的,因此不能使用下标循环遍历

2.没有重复元素,任何元素存在唯一性,因此可以用来作去重处理(支持基本数据类型和引用数据类型),
存储不重复的数据,

3.插入速度和删除速度非常快,遍历查找速度也非常快,但是略低于键值对类型。

4.支持方法:add(添加) delete(删除) has(查找) forEach(遍历)

属性: size 长度,只读的,没有length,

21.–map 是一种有长度的键值对数据类型

特点

1.hashMap 键值对的数据类型 map对象是关联型的对象,类似php中关联型的数组结构

2.具备数组的长度紧密型,又具备对象的键值对方法

3.它的获取,删除,查询,遍历速度很快

4.任何数据类型都可以作为键进行存储,对象存储用的是引用地址进行存储的

5.map的键可以是任意类型 然后weakmap的键只支持对象

在HTML中,标记

的作用是预排版标记。

22.CSS3新增属性用法整理:
1、box-shadow(阴影效果)
2、border-color(为边框设置多种颜色)
3、border-image(图片边框)
4、text-shadow(文本阴影)
5、text-overflow(文本截断)
6、word-wrap(自动换行)
7、border-radius(圆角边框)
8、opacity(透明度)
9、box-sizing(控制盒模型的组成模式)
10、resize(元素缩放)
11、outline(外边框)
12、background-size(指定背景图片尺寸)
13、background-origin(指定背景图片从哪里开始显示)
14、background-clip(指定背景图片从什么位置开始裁剪)
15、background(为一个元素指定多个背景)
16、hsl(通过色调、饱和度、亮度来指定颜色颜色值)
17、hsla(在hsl的基础上增加透明度设置)
18、rgba(基于rgb设置颜色,a设置透明度)

23.
轮廓outline是绘制于元素周围的一条线 位于边框边缘的外围,可起到突出元素的作用。
注释:轮廓线不会占据空间,也不一定是矩形。

24.
“”标签显示文本的加载进度

25.
HTML5的picture标签用于为不同设备提供图像

26.
slideUp()和slideDown都是jQuery函数,slideUp()通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。
slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。

27.web页面级优化:
1.减少HTTP请求的次数
2.进行资源合并和压缩
3.inline images
4.将外部脚本置于低端
5.减少不必要的HTTP跳转

28.
getCurrentPosition()获取用户当前位置放入一个值中保存,getLocation()地图定位

29.
JavaScript语句中“this”默认指向全局对象(window),this绑定的优先级是new>bind>call(apply)>obj.func()>默认绑定。

30.
万维网用URL标识分布因特网上的各种文档。

31.
行内元素: a,b,i,em,span,small,label,select,textarea,input,button,img
块级元素:div,form,p,ul(无序列表),ol(有序列表),dl,table,h1~h5,dl,dd,

32.
在不改变this指向的前提下,this总是指向函数的直接调用者
如果有new关键字,this指向new出来的那个对象
ie中attachEvent中的this总是指向全局对象Windows

33.
数据序列化技术:JSON,Property List,Protocol Buffer

34.
iframe:
用来在网页中插入第三方页面,早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分,这样在切换页面的时候避免重复下载
iframe的创建比一般的DOM元素慢了1-2个数量级
iframe标签会阻塞页面的的加载
iframe不是动态的

35.
hsl(Hue,Saturation,Lightness)/(色调、饱和度、亮度)
hsl(0,100%,100%)
0:红色
120:绿色,
240: 蓝色

36.
background-position:
若只有一个取值,则第二个取值默认为50%
两个取值时
第一个为水平,第二个垂直,
若取值为left,center,right,top,button,取值会颠倒

37.
在HTML5中,为input元素新增了以下一些type属性值:
color:用于指定颜色的控件。
date:用于输入日期的控件(年,月,日,不包括时间)。
month:用于输入年月的控件,不带时区。
week:用于输入一个由星期-年组成的日期,日期不包括时区
time:用于输入不含时区的时间控件。
datetime:基于UTC时区的日期时间输入控件(时,分,秒及几分之一秒)。
datetime-local:用于输入日期时间控件,不包含时区。
email:用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。
number: 用于应该包含数值的输入域。只能输入数字
range:用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel:用于输入电话号码的控件。在移动端输入会显示数字键盘,PC端无效果
url:用于编辑URL的字段。

38.
a 元素可以没有 href 属性,此时为超链接的一个占位符
a元素中的rel 属性有多个值时,使用空格 " " 分隔

39.
css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行

40.简述MVVM的理解
MVVM是 Model-View-ViewModel的缩写,即模型-视图-视图模型。MVVM 是一种设计思想。

模型(Model): 数据保存—存放着各种数据,有的是固定写死的,大多数是从后端返回的数据
视图 (View):用户界面,也就是DOM
视图模型(View-Model):连接View和Model的桥梁,当数据变化时,ViewModel够监听到数据的变化(通过Data Bindings即数据绑定),自动更新视图,
而当用户操作视图,ViewModel也能监听到视图的变化(通过DOM Listeners即dom事件监听),然后通知数据做改动,这就实现了数据的双向绑定。

41.vue中父组件和子组件之间的传值是如何实现的
父组件向子组件传值:
1.子组件在props中创建一个属性,用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性
4.把需要传给子组件的值赋给该属性
子组件向父组件传值:
1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
4.在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。
抓准这两点对于父子通信就好理解了

42.简写vue-router的基本使用
1.引入相关的库文件
2.添加路由连接()
3.添加路由填充位()
4.定义路由组件 (let user = {template:<div></div>})
5.配置路由规则并创建路由实例(routes:[{path:’/user’,component:user}])
6.把路由挂载到vue根实例中(new Vue({router:router}))
简述vuex状态管理机
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
具有五个对象
state:存放状态
getters:state成员操作,派生状态
mutations;:提交状态修改,加工state成员给外界
actions:异步操作
modules:模块化状态管理

43.闭包
闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。
在本质上,闭包是将函数内部和函数外部连接起来的桥梁

双向非操作可以把字符串和数字转换为布尔值。var bool = !!2; alert(bool);//true;

因为这些知识点都是在我平常刷题的时候遇到的,并且自己记录下来的、所以顺序没有规律,有些知识点没有标题,还请大家见谅、但是个个都是精华,抓到就是赚到哦!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值