前端第二阶段测试(25道）【html，css,JavaScript】

2022前端第二阶段测试答案

1.var name='vava';
var obj={
   name:"lala",
   sayName(){
      return function(){
         console.log(this.name)
   		}
   }
}
var temp=obj.sayName();
temp();

上面代码输出的值是什么
答案:undefined vava

2.用递归的方式实现1-100以内的求和
function recursive(n){
	if(n==1){
		return 1
	}
	return recursive(n-1)+n
}
console.log(recursive(100));

3.简述盒子水平垂直居中的方案？
	1.给父元素设置display:flex;justify-content:center;align-items:center;
	2.给父元素设置display:grid;justify-content:center;align-items:center;
	3.给父元素设置display:flex;给子元素设置margin:auto
	4.子绝父相;配合属性全部为0,margin:auto
	5.子绝父相;top:50%;left:50%;margin-left:-width/2;margin-top:-height/2
	6.给父元素设置border 给子元素设置margin:width/2
	7.给父元素设置border-box 设置padding:width/2

4.简述http协议
http协议是超文本传输协议
客户端(一般指的是浏览器)和服务器端进行交互遵循的通信协议
请求报文：浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体。
响应报文：服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，
浏览器会对响应报文进行解析，进而显示出来。
响应报文中包含响应行、响应头、响应体。

5.简述web存储，并说明它们的特点？
  1.分为cookie和WebStorage,WebStorage分为sessionStorage和localStorage
  2.cookie特点产生于服务器端,保存在客户端，同一服务器下得cookie共享的,传输数据最大为4kb
  3.sessionStorage会话存储 针对于选项卡 选项卡关闭或者浏览器关闭 会话失效 传输数据可以达到5M
  4.localStorage本地存储,将数据存到本地磁盘中 即使选项卡关闭或者浏览器关闭 数据依旧存在 传输数据可以达到5M
  5.方法：cookie存储使用set 获取使用get 清除使用remove
 	 	sessionStorage存储使用setItem 获取使用getItem 清除部分使用removeItem 清除全部使用clear
  		localStorage存储使用setItem 获取使用getItem 清除部分使用removeItem 清除全部使用clear

6.重构数组filter方法，例如arr.myFilter()等同于arr.filter()效果
var arr=[1,2,3,4,5];
Array.prototype.myFilter=function(fun,obj){
	let newArr=[]
	for(let i=0;i<this.length;i++){
		if(obj?fun.call(obj,this[i]):fun(this[i])){
			newArr.push(this[i])
		}
	}
	return newArr
}
var res=arr.myFilter(function(item,index,arr){
	console.log(this);
	return item>2
},{name:'zhangsan'});
console.log(res);

7.var arr=['hello',1,2,'hello',4,2]给定一个重复的数组，尽可能多的使用数组api进行数组去重？
// 1.双层for循环
function unique(arr){
	// 第一层for循环控制第一个数
	for(let i=0;i<arr.length;i++){
		// 第二层循环控制第二个数
		for(let j=i+1;j<arr.length;j++){
			// 判断前后是否相等
			if(arr[i]===arr[j]){
				arr.splice(j,1);
				// 修正下标
				j--;
			}
		}
	}
}
// 2.indexOf() 3.lastIndexOf()
function unique(arr){
	let newArr=[];
	for(let i=0;i<arr.length;i++){
		if(newArr.lastIndexOf(arr[i])===-1){
			newArr.push(arr[i])
		}
	}
	return newArr
}
console.log(unique(arr));
//4.includes
//参数:想要查找的数组元素 返回值:false/true
var arr=[1,2,3,4];
console.log(arr.includes(6));
var arr=[1,2,3,3,2,'hello','hello'];
function unique(arr){
	let newArr=[];
	for(let i=0;i<arr.length;i++){
		if(!newArr.includes(arr[i])){
			newArr.push(arr[i])
		}
	}
	return newArr
}
console.log(unique(arr));
//5.forEach＋indexOf
function unique(arr){
	let newArr=[];
	arr.forEach(function(item){
		if(newArr.indexOf(item)===-1){
			newArr.push(item)
		}
	})
	return newArr;
}
console.log(unique(arr));
// 用filter+indexOf/includes
var arr=[1,2,3,3,2,'hello','hello'];
function unique(arr){
	let newArr=[];
	return arr.filter(function(item){
		return newArr.includes(item)?"":newArr.push(item)
	})
	return newArr;
}
console.log(unique(arr));
7.set去重  成员是唯一的
var arr=[1,2,3,3,2,'hello','hello'];
let set=new Set(arr);
console.log(set);
console.log(Array.from(set));
console.log([...set]);

8.编写代码实现数组扁平化输出，例如：输入[[1,2,3],[4,5,6,[7,8]],[9,10],[11,12,[13]],5],输出为[1,2,3,4,5,6,7,8,9,10,11,12,13,5]
function mout(arr){
	return arr.join().split(',').map(function(item){
		return Number(item)
	})
}

9.简述浏览器的重排和重绘？
	重排:当dom的变化影响了元素的几何信息(位置),浏览器需要计算元素的几何属性，
	将其安放在界面中的正确位置,这个过程叫做重排,表现为重新生成布局,重新排列元素。
	重绘:当一个元素(颜色 字体颜色)的外观被改变,但是没有改变布局，重新把元素外观绘制出来的过程，
	叫做重绘,表现为某些元素的外观被改变；
	重排和重绘会消耗浏览器的性能(会去计算浏览器的内存空间 占据cpu)会造成页面卡顿,ui展示迟缓。
	相比之下,重排性能影响更大,两者无法避免选择重绘.
	重绘不一定出现重排，但是重排一定出现重绘.
	触发重排和重绘:
	1.添加、删除（重排）、更新节点（重绘）
	2.通过display:none（重排）
	3.通过visiblity:hidden（重绘）
	4.添加动画（重排）
	5.添加一个样式表（重排）
	6.用户行为（重排或者重绘）

10.简述盒子模型种类和区别？
        盒子种类: 1.w3c盒子 内容盒子 标准盒子 
        2.边框盒子 IE盒子 怪异盒子
        1.w3c盒子width设置给内容区的
        2.边框盒子的width设置给盒子的

11.什么是闭包？如何解决闭包内存泄露问题，以及使用闭包的优缺点？
		1.嵌套函数
		2.存在对外部函数变量的引用
		3.变量可以被保存在内存中不会被垃圾回收回收
		4.返回内部函数
	优点:防止变量污染,内部维持变量可以做缓存;
	缺点:变量不会被垃圾回收机制回收，造成内存泄露，造成性能问题
    是用完变量赋值为null

12.如何实现一个对象的深拷贝？
		1.let temp={...obj}
		2.JSON.stringify(JSON.parse(obj));
		3.lodash _.cloneDeep()

13.简述js函数的this指向问题？
this:执行环境上下文对象 取决于什么时候调用 被谁调用
	在方法中，this 表示该方法所属的对象。
	如果单独使用，this 表示当前模块。
	在函数中，this 表示全局对象。
	在事件中，this 表示接收事件的元素。

14.在js中面向对象中继承方式有几种，分别进行描述.
	1.借用构造函数继承 /经典继承
		Animal.call(this)
	2.原型链继承
		Dog.prototype=new Animal();
	3.组合继承

15.在js中如何判断一个数据类型？
	1.typeof
    2.instanceof 
    3.isArray 
    4.isNaN

16.写出你熟悉的几个Git命令？   
		初始化仓库 git init 
        git add . / git add * 跟踪文件有无修改
        将本地仓库和远程仓库进行绑定 
        git add origin master xxx.git远程地址
        提交文件到暂存区 git commit -m '[xxx]修改了功能'
        提交文件到远程仓库master分支 git push origin master
        git push -u origin master 强制推送
        更新远程仓库变动
        git pull origin master
        首次使用全局配置 
        git config --global user.name "willsonkang1"
        git config --global user.email "2681091754@qq.com"
        git status 查看git提交状态 查看那些东西可以提交
        git log 查看git提交日志
        git reflog 查看git所有提交日志
        git remote -v 查看绑定的远程仓库

17.伪元素::after有哪些常见用法?
    常用于清除浮动

18.数组中哪些方法是修改原数组的？那些方法是不修改原数组的？
	修改:sort reverse splice pop push shift unshift 
    不修改:slice concat indexOf lastIndexOf toString join 迭代方法

19.简述css选择器的优先级机制
	1.!important 优先级别最高
    2.style属性 特征值1000
    3.id标签选择器 特征值 100
    4.class类选择器/伪类 特征值 10
    5.标签选择器 特征值1
    6.通配符选择器 特征值0

20.简述flex布局
	1、核心概念：主轴、交叉轴、伸缩盒容器、伸缩盒元素
	2、常用规则：
    2.1、伸缩盒容器相关规则：display、flex-wrap、flex-direction、align-items、justify-content
   	2.2、伸缩盒元素相关规则： flex-basic、flex-grow、flex-shrink、flex
    3、使用技巧：
       伸缩盒容器常用于列级布局，与浮动布局类似可以将多个块元素在一行中显示，
    伸缩盒更简单一些，只需要为容器盒子添加display:flex属性，这个容器盒子就变成了伸缩盒容器，
    其子元素伸缩盒元素就会沿着主轴来排列，默认主轴是x轴，可以通过flex-direction来改变主轴。

21.如何使用css绘制一个三角形
	div1{
			width: 0;
			height: 0;
			border: 100px solid transparent;
			border-bottom: 100px solid red;
	}

22.em与rem的区别？
	 1.em相对长度单位 相对于当前元素的字体大小而言的 
		默认1em=16px 
	 2.rem相对长度单位 默认1rem=16px  相当于html元素的字体大小而言的

23.什么是块级元素，块级元素有什么特点?
    块级元素：div section aside nav header footer p h1-h6 table ul li ol li dl dd
        1.独占一行
        2.宽度默认100%
        3.高度默认由内容撑起
        4.根据css设置宽高
	行内元素：span a img b i em strong mark cite strike
        1.宽高由自身决定
        2.与其他元素共享一行
        3.无法根据css设置宽高
        4.行内元素不建议嵌套块级元素

24.Linux中远程登录命令、远程文件传输命令、查看Java进程命令分别是什么？
	ssh root@ip
	scp 文件绝对路径 用户名@ip:目录
    scp -r 文件夹绝对路径 用户名@ip:目录
    ps -ef|grep java
    nohup java -jar xxtx.jar &

25.相对定位、绝对定位、固定定位、粘滞定位、静态定位有什么区别？
	0.静态定位 static
        特点:默认文档流定位
   1.相对定位 relative 
        特点:不脱离文档流 相对于自身在浏览器中的位置定位
	2.绝对定位 absolute
		特点:1.脱离文档流 原先位置不保留
            2.默认定位元素，无论有没有祖先元素，相对于body定位
            3.祖先元素设置了定位,相对于祖先元素定位（就近原则）
	3.固定定位 fixed
		特点:1.脱离文档流 原先位置不保留
			2.相对于浏览器视口区域
	4.粘滞定位 sticky 
		特点:1.不脱离文档流 
		2.没有达到阈值前相对定位
		达到阈值就是固定定位