2019前端面试个人总结经验

最新推荐文章于 2024-06-29 16:57:52 发布

雨名无

最新推荐文章于 2024-06-29 16:57:52 发布

阅读量207

点赞数

文章标签： javascript jquery css

本文链接：https://blog.csdn.net/qq_37601881/article/details/104461492

版权

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",
				success:function(result){
				$("#div1").html(result);
				}
			}
			);

15.基本类型有六种： null，undefined，boolean，number，string，symbol。NaN 也属于 number 类型，并且 NaN 不等于自身。
16.typeof 对于基本类型，除了 null 都可以显示正确的类型。
typeof null // ‘object’
17.闭包的作用
它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
18. 判断一个字符串中出现次数最多的字符，统计这个次数

var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
 if(!json[str.charAt(i)]){
 		json[str.charAt(i)] = 1;
 	}else{
 		json[str.charAt(i)]++;
 }
};
var iMax = 0;var iIndex = '';for(var i in json){
 if(json[i]>iMax){
 		iMax = json[i];
 		iIndex = i;
 }
}

19. $(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

console.log(‘出现次数最多的是:’+iIndex+‘出现’+iMax+‘次’);
20.CSS实现隐藏页面元素的方法有哪些？

	display:none;  
	visibility: hidden;
	opacity:0;  
	position:absolute;
	left:-10000px;

21.HTML5文档类型和字符集是？

<!DOCTYPE html>

<meta charset="UTF-8">

22.样式选择

	.a，.b｛“，”指相同的css样式｝；
	.a .b｛“ ”指后代元素｝；
	.a>.b｛“>”指子代所有元素｝；
	.a + .b｛这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”

雨名无

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
2019前端面试个人总结经验

2019前端面试个人总结经验我个人是2020届毕业生，这些都是我个人在面试前端开发工程师中，面试官面的一些问题，有一些是笔试中遇到的，也有面试中口头提问的，然后我总结归纳了的一些问题。希望能给对前端开发感兴趣的同学一些帮助：1. jquery对dom节点的操作：创建dom节点 var txt=$(“1234”); 创建元素节点：　　　　　　$li1=$("<li><...
复制链接

扫一扫