2024前端面试个人总结经验_前端应聘的个人总结

2019前端面试个人总结经验

我个人是2020届毕业生，这些都是我个人在面试前端开发工程师中，面试官面的一些问题，有一些是笔试中遇到的，也有面试中口头提问的，然后我总结归纳了的一些问题。希望能给对前端开发感兴趣的同学一些帮助：

1. jquery对dom节点的操作：

创建dom节点
	var txt=$(“1234”);
	创建元素节点：
　　　　　　$li1=$("<li></li>")
	追加dom节点：
　　　　　　$("ul").append($li1); 
　　　　　　1.prepend()方法将每匹配的元素内部前置要添加的元素，方法如下：
								$(target).prepend(element);例：
　　　　　　2.prependTo()方法将元素添加到每一个匹配的元素内部前置，方法如下：
								$(element).prependTo();例：
　　　　　　3.after()方法向匹配的元素后面添加元素，新添加的元素做为目标元素后的紧邻的兄弟元素。方法如下：
								$(target).after(element);例:
　　　　　　4.insertAfter()方法将新建的元素插入到查找到的目标元素后，做为目标元素的兄弟节点。方法如下：
								$(element).insertAfter(target);例:
　　　　　　5.before()方法在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点。方法如下:
								$(target).before(element);例：
　　　　　　6.insertBefore()方法将新建元素添加到目标元素前，做为目标元素的前一个兄弟节点，方法如下:
								$(element).insertBefore(target);例:
	删除dom节点：
	　				$span=$("span").remove();
　　　			empty()方法：清空dom节点
	操作样式：
						1.$("p").attr("title");该示例用于获得p元素的title属性值。
　　　　　　 		$("p").attr("title","你最喜欢的水果");该示例设置p元素的title属性值为"你最喜欢的水果";
　　　　　　2. removeAttr()方法用于删除特定的属性，方法是在参数中指定属性名。例：
　　　　　　	$("p").removeAttr("name");该方法就是移除p元素的name属性。

2.JavaScript操作dom树

（1）创建新节点
		createDocumentFragment() //创建一个DOM片段
		createElement() //创建一个具体的元素
		createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
		appendChild() //添加
		removeChild() //移除
		replaceChild() //替换
		insertBefore() //插入
（3）查找
		getElementsByTagName() //通过标签名称
		getElementsByName() //通过元素的Name属性的值
		getElementById() //通过元素Id，唯一性

3.JavaScript数组操作函数

Array 		对象方法
			方法			描述
			----concat()	连接两个或更多的数组，并返回结果。
			----isArray()	判断对象是否为数组。
			----join()	把数组的所有元素放入一个字符串。
			----keys()	返回数组的可迭代对象，包含原始数组的键(key)。
			----map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
			----pop()	删除数组的最后一个元素并返回删除的元素。
			----push()	向数组的末尾添加一个或更多元素，并返回新的长度。
			----reverse()	反转数组的元素顺序。
			----shift()	删除并返回数组的第一个元素。
			----slice()	选取数组的的一部分，并返回一个新数组。
			----sort()	对数组的元素进行排序。
			----splice()	从数组中添加或删除元素。
			----unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
			----find()	返回符合传入测试（函数）条件的数组元素。
			----filter()	检测数值元素，并返回符合条件所有元素的数组。
			copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
			entries()	返回数组的可迭代对象。
			every()	检测数值元素的每个元素是否都符合条件。
			fill()	使用一个固定值来填充数组。
			findIndex()	返回符合传入测试（函数）条件的数组元素索引。
			forEach()	数组每个元素都执行一次回调函数。
			from()	通过给定的对象中创建一个数组。
			includes()	判断一个数组是否包含一个指定的值。
			indexOf()	搜索数组中的元素，并返回它所在的位置。
			lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
			reduce()	将数组元素计算为一个值（从左到右）。
			reduceRight()	将数组元素计算为一个值（从右到左）。
			some()	检测数组元素中是否有元素符合指定条件。
			toString()	把数组转换为字符串，并返回结果。
			valueOf()	返回数组对象的原始值。

4.注释

html:<!--注释的内容-->
css:/\*注释的内容\*/
js:	单行注释：//注释的内容；
　　  块级注释：/\*注释的内容\*/

5.快排（中间取值，分割对比）、冒泡排序（依次对比）
6.数组转换树形结构

• 定义数组
  • 用id为key值存储
    • 检查pid为id的子项是否存在
    • 存在作为孩子节点

7.ES6标准（几个简单的概念讲一下）

• 箭头函数
• 块级作用域
• 结构
• promise可以用来解决“回调地狱”的问题

8.原型链
简单解释一下原型链的概念
9.cookie和session的区别

• cookie存在客户端，session再服务器端 cookie一般不超过4k
• cookie一般有服务器设置过期时间，session浏览器关闭就失效

10.Cookie 与SessionStorage 、LocalStorage 的区别(共同点：都是保存在浏览器端，且同源的。)

• cookie一般不超过4k，localStorage sessionStorage一般不超过5M
• cookie一般由服务器生成，可以设置过期时间；local Storage除非被清理否则一直存在；session
  Storage页面关闭就清理
• cookie每次与服务器通信都会携带在 header 中，对于请求性能影响；local Storage和session
  Storage不通信

11. post和get请求方法的区别

• GET方法提交的数据会放在URL之后，以?分割URL和传输数据。POST方法是把提交的数据放在HTTP包的request body中。
• GET方法提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制。
• GET比POST更不安全，因为参数直接暴露在url中，但是POST方法提交的参数也可以通过F12查看，从安全性考量区别不大。
• GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，
  服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，
  服务器响应200 ok（返回数据）。在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。
  而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。
  并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

12. alt和titile区别

• alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
• title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

13. 如何用原生js给一个按钮绑定两个onclick事件？

	//事件监听 绑定多个事件
		var btn = document.getElementById("btn");
		btn.addEventListener("click",hello1);
		btn.addEventListener("click",hello2);
14.Ajax
	js:var a=new XMLHttpRequest();
			a.open("POST","/try/ajax/demo\_post.php",true);
			a.send();
			a.onreadystatechange=function()
			{
				if(a.readyState==4&&a.state==200)
				{
					//执行成功操作
				}
			}
	jquery:
		$.ajax(
			{
				url:"demo\_test.txt",
				type:"post",
				dataType:"json",