前端面试总结（自己总结的）

1.给出一个数组如何去掉重复的项？

var arr = [1,2,3,4,5,6,1,5,6];

function removeRepeat(arr) {

var i,tempArr = [];

for(i in arr){ //一种for循环写法

if(tempArr.join(',').indexOf(arr[i])=== -1){

//join() 方法用于把数组中的所有元素放入一个字符串 ()传入拼接规则

//indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置不存在的话返回 -1

tempArr.push(arr[i])

console.log(tempArr)

}

return tempArr;

}

console.log(removeRepeat(arr));

语言描述：首先声明一个空的数组，然后遍历数组，用join()方法把数组每个元素转换成一个字符串，同用indexOf()方法把数组的每个元素和字符串对比，如果不存在就把数组每个元素添加到空数组里保存，这样就得到了没有重复的数组了

2. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了，$(DOM 对象)

如： var v = document.getElementById("v"); //DOM 对象

var $v = $(v); //jQuery 对象

转换后，就可以任意使用 jQuery 的方法。

3. jQuery 对象转成 DOM 对象

(1) jQuery 对象是一个数据对象，可以通过 [index] 的方法，来得到相应的 DOM 对象（描述）

var $v = $("#v");

console.log($v);//假设这个是个数组对象

var v = $v[0];

console.log(v);

(2) jQuery 本身提供，通过.get(index) 方法得到相应的 DOM 对象（描述）

var $v = $("#v");

var v = $v.get(0); // get()方法获得由选择器指定的 DOM 元素。

console.log(v);

4.jq 常见选择器？

$("*") 匹配页面所有元素

$("#id") id选择器

$(".class") class选择器

$("div") 标签选择器

扩展

$("p:first") first选择器

$("p:last") last选择器

$("p:odd") odd选择器奇数选择器 [ɑd]

$("p:even") even选择器偶数选择器

5.bind 和 live 的区别?

live方法其实是bind方法的变种，其基本功能就同bind方法的功能是一样的，都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后生成的元素也可以绑定相应的事件。

自己理解：

（1）$("div").bind("click",function(){});

（2）$("div").live("click",function(){});

bind执行绑定事件是只对绑在当前标签上生效，而对后来的标签比如父标签不生效

live执行绑定事件不仅仅对当前标签上生效，对后来的标签也生效

6.this指向问题

看这个网页详解

https://www.cnblogs.com/pssp/p/5216085.html

6对象取值

var obj = {T1:[{'naem' : 'jack'},{'naem' : 'jack'},{'naem' : 'jack'}]}

console.log(obj.T1) //拿到数组

7 学习不知道的新东西的方法

｛

1. 菜鸟教程:

http://www.runoob.com/ 或者 W3school

http://www.w3school.com.cn/

2. (备用)

http://www.w3cplus.com/

github.com

去搜索你要的东西, 然后点进去可能会有API

npmjs.com 去搜索你要的东西, 注意看更新日期和星数.

｝

8 vue生命周期

它可以总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,

beforeMount(载入前),

mounted（载入后）,

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

destroyed（销毁后）

9.React脚手架搭建

npm init react-app react-my

安装router模块

npm install --save react-router-dom

安装axios模块

npm install --save react-router-dom

{this.state.obj.map((item,index)=>{

return <div style={div_text}>

<div>

{item.title}

</div>

})

}

map是遍历数组方法，不能遍历对象

'https://images.weserv.nl/?url='+ item.cover.url

其实是豆瓣限制了图片的加载，我自己用了一个办法把图片缓存下来：

只要在请求到的图片链接前面加上‘https://images.weserv.nl/?url=’即可（注：这是一个专门缓存图片的网址），可能会有点慢。

10. div居中问题

水平垂直居中

《方法1》

</div>

《方法2》

</div>

水平居中

</div>

11. 颜色表示对方法

① rgb(0,255,0), ② 通过十六进制（Hex）的颜色值排序 #00FF00 ③英文单词表示比如red，white

12.图片、文字居中问题

图片垂直居中

</div>

文字水平垂直居中

<span>傻瓜不会死它</span>

</div>

图片水平垂直居中

给div设定text-align:center;可使图片水平居中，再给图片img设定 vertical-align:middle;即可达到垂直居中（切记，是给图片加，不是div，很多人容易搞错）

</div>

13.

1.解释一下display的几个常用的属性值，inline ， block， inline-block

inline:

1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
2. 不能更改元素的height，width的值，大小由内容撑开.
3. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.

block:

1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
2. 能够改变元素的height，width的值.
3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block:

1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
2. 用通俗的话讲，就是不独占一行的块级元素。如图:

14.字体适配问题

viewpoint

css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。

“viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大

兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+

15.http状态码意思：

401 查看得知：401 - 未授权: 由于凭据无效，访问被拒绝。代码其中一块需要读写文件,已经去掉只读，然后授权iis_users读写，解决问题。

404 网页不存在

16，谈谈MVC MVVM

https://blog.csdn.net/qq_36228442/article/details/79470408

MVC是一种开发模式，就是一种模型—视图—控制器（MVC）模式。

mvvm的设计思想主要实现页面和数据模型的同步，当view改变的时候会自动将数据同步到model,model改变的时候也会自动将数据同步到view,更新view的动态显示，Model可以简单理解为与网页关联的本地数据引擎。

https://segmentfault.com/a/1190000010756245

MVVM在vue里面使用最多就是一种模型—视图—视图模型器（MVVC）模式。

<!--

帮助我们理解 MVVM M - model V - Val

Val 要在data内定义

-->

使用v-model指令去绑定data里面的key名为Val，然后在h3标签里引入{{Val}}

MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。非常的神奇~

整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提高代码的可重用性。

JavaScript的三个主要组成部分https://blog.csdn.net/qq_36647038/article/details/80315062

17、JavaScript中的3种弹出式消息提醒的命令是什么？ - alert()：带确认按钮的对话框，点击确认按钮，对话框关闭； - confirm()：带有确认和取消按钮的对话框，点击确认和取消按钮都会关闭对话框，只是会返回不同的boolean值，然后可以根据boolean值执行不同的操作； - prompt()：带有确认和取消按钮，还带有输入框

18、float和position:absolute脱离文本流的区别

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。　　

需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。　　

而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它 --------

前端面试总结（自己总结的）

猜你喜欢