面试笔记（2）

面试笔记（2）

1.我看你简历上写了你h5的新增标签有了一定的了解，你可以跟我大致说几个新增的标签还有他们的用法？

		H5主要新增的标签的语义化的标签，包括就是视频video音频audio、nav、article、header、section、footer，表示用来写底部或头部，还有用的比较多的就是progress进度条、包括menu菜单，svg定义矢量图，对那种小图标使用的比较方便。还有一个用的比较多的是Canvas，canvas算是一个功能比较强大的组件。还有就是新增了一些input类型，比如email、date、number、tel、search和一些表单属性placeholder提示文本、multiple多选文件提交(要是细问答不上来，不要强答，可以说这个我不太记得了但是这个我看过，并且自己有写过 )

2.然后你给我介绍一下你对css盒子模型的理解吧

	盒子模型可以把HTML页面中的布局元素把它理解成一个个盒子，从里到外一次是内容content，再是内边距padding，再是border边框，然后再是外边距margin。标准的css盒子模型宽高就是内容区宽高；低端IEcss盒子模型宽高 内边距 + 边框 + 内容区；

3、你给我介绍一下css的选择器、还有优先级

首先选择器有id选择器、标签选择器、类选择器、行内样式、！important.!important是优先级最高的，再是行内样式，再是id选择器，再是类选择器、标签选择器、通配符选择器。他们之内还有些组合。

4、我看你简历上写了你对flex布局有一些了解，你可以跟我介绍一下吗

	Flex就是弹性流布局，他又一个主轴和交叉轴，用flex可以很方便的做一些纵向居中、横向居中，自动分配剩余空间。需要注意的是当我们为父盒子设定flex布局以后，子元素的float、clear、vertical-align将失效。主要是涉及的css属性有那些？
	父元素display设置为flex，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。默认是横向是主轴，纵向是交叉可以通过flex-direction来设置它的主轴和交叉轴的位置。Flex可以很方便的实现横向或者纵向的居中，包括一些自适应布局，让他们自动分配剩余空间，用到的横向居中是justify-content,纵向居中是align-items。Flex是由三个属性合并的包括flex-grow、flex-shrink flex-basis。可以定义空间不足时候的缩放比例，缩小比例，空间多余时的放大比例，还有basis就是基础比例

5.display有那些值？

		inline、block、inlin-block、none、flex、inherit。block,inline和inline-block概念和区别	
		block是定义块元素，会独占一行，可以设置宽度和高度外边距和内边距，没有宽度时，默认是父级宽度的100%，里面可以放块级元素或者行内元素，文字类标签不能放块级元素（p、h1-h6)。Inline-block是行内块元素，在正常的页面流他会从左到右的排列，可以定义宽高，默认内容撑开宽度、它的大小是内容元素或者文本(a可以放块元素)

（出现空白间隙的原因是，元素被当成行内元素排版的时候，元素之间的空白符(空格、回车换行等)都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。）
1、通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行，可以去除元素间的空白，或者将两个inline-block元素间加上空白注释，或者不写元素的闭合标签等
2.父元素设置font-size为0，子元素单独再设置字体大小
3.设置margin-right为负值
4.给inline-block元素加float或者flex
常见的块级元素有DIV，FORM，TABLE，P，H1~H6，DL，OL，UL等
常见的inlin-block有img、input
常见的行内元素有span、a、lable、button、i、em

块级元素水平居中：margin：0 auto;
行内元素或者行内块元素水平居中：给父元素添加text-aling:center

外边距合并问题：
1.相邻块元素外边距合并：上面元素有下外边距，下面元素有上外边距，两者之间的垂直距离不是两者相加二十取两者值中较大的那个，尽量只给一个盒子添加外边距
2.嵌套块元素垂直外边距塌陷：两个嵌套关系的块元素，父元素上有上外边距子元素也有上外边距，此时父元素会塌陷较大的外边距
1.可以给父盒子设定格透明的外边距
2.可以给父元素添加一个内边距
3.给父元素添加一个overflow：hidden

6.我看到你简历上写了响应式网页，你知道的响应式网页的实现方式有那些？

	媒体查询@media screen and 通过(minwidth、maxwidth:px)定义它在不同分辨率上面的样式区分
	rem 在手机端用的比较多，他没有em（相对父节点）灵活，但是因为他是相对根节点单位
	Vw视口宽度单位1vw = 1%视口宽度
	Vh视口高度单位 1vh = 1%视口高度
	屏幕视口当前 375

7，什么是原型，原型链

		每一个构造函数他都有一个属性叫prototype原型对象、可以通过原型对象共享方法。每一个对象都有一个属性叫proto指向我们构造函数的原型对象，所以我们可以通过一个对象的proto然后找到它的构造函数，然后通过这个构造函数的prototype原型对象的proto可以找到它的上一个构造函数，这样说相当于是一个链状的最终指向的是object。这个形状相当于一个链状，我们可以通过这个原型链来找到不是定义在这个对象上面的属性和方法。
		构造函数是上面？
			可以通过new方法，新建一个对象

8.js怎么实现继承？还有他们的优缺点是什么？

		方法一：原型链继承
		方法二：借用构造函数继承
		方法三：组合继承
		方法四：寄生组合继承
		方式五：实例继承
		方式六：寄生式继承
		ES6基本上就是用extends

9.js什么是闭包？

		先定义一个函数，在函数里面定义一个内部函数。函数里面有函数作用域，内部函数引用了外级函数里面作用域的变量，然后再通过一定的方式比如return或者赋值让内部函数传递出去，让它在外部函数之外的地方调用，就实现了在全局作用域或者是其他函数作用域里面能够访问到你定义的函数的外级函数里面变量。这样就实现了一个闭包。
		作用是在函数作用域以外访问函数作用域里面的变量，有个特点：一般的函数调用完之后内存会销毁，但是如果形成了闭包，这个外部函数的它的作用域里面的变量是不会被销毁的。延申了变量的作用范围，闭包会占用了一定的内存，所以闭包不能滥用

10.解释一下作用域吧

全局作用域、块级作用域、函数作用域

11.怎么实现异步

	像es6里面异步就是使用Async、await还有就是promise，在es6之前想实现异步一般都是通过回调函数
	Promise理解有那些？
	Promise相当于一个状态机，初始状态是pending，异步代码实现完成了就是resolve可以理解为成功，如果失败了会变成reject，状态一旦改变了就不会更改了。
	怎么写？
	new一个promise定义一些请求一些异步代码，

promiseDemo.then((result)) => {
console.log(result)
}) //只接收成功状态
promiseDemo.catch((result) = > {
console.log(result)
}) // 只接受失败状态，可以看成第三种的简写形式
如果成功状态变成resolve就会执行.then里面的代码，如果状态变成reject就会执行.Catch里面的代码

12、什么是面向对象的概念？

		不管是js还是其他的语言中，万物皆对象，对象里面有他的属性和方法。像es6里面的对象就是用class关键字声明一个对象 封装继承多态

13、js里面怎么操作dom

获取元素document.getElementById("time")
		document.querySelectorAll(".box")

		document.getElementsByTagName("li")
		document.getElementsByClassName("box")

14、this指向有那些场景

		this是对于函数而言的，正常情况下函数的this指向指向的是函数的调用位置。

比如在全局里面定义一个function fn() {} 调用fn(); 这个时候this指向全局的对象window
比如我定义了一个var obj = {}; 这个时候this指向obj。
里面有一个特殊的就是箭头函数，箭头函数的外层第一个不为箭头函数的函数的this指向

15、let的用法

声明一个对象可以用const、let、var。
Var和let是定义变量的，const是定义常量。
Const定义的量是不能再赋值的。(特殊案例如果const定义的是一个引用类型，比如object、function、array、date、regexp)Let和const是es6引入的关键字。
Var定义的变量有变量提升，let定义的变量不会有变量提升。这样可以使我们写代码更规范，变量必须声明过后才能使用，如果在let声明之前调用了这个变量，他会报错，报undefined。

类型七种内置类型：基本类型和引用类型
基本类型包括null、undefined、Boolean、number、string、symbol（es6新增的数据类型，本质是一种唯一的标识符，声明一个全局唯一的变量名）
NAN属于number类型并且不等于自身

16、vue和react的了解

		它们都引入了虚拟dom的概念。当我们删除了一个节点，，会重绘和重排，重绘是改变了一些非物理属性，比如只改变标签颜色外观，只会触发重绘也就是局部刷新。重拍就是改变了页面上某一个元素的物理属性，比如大小，缩进，会让页面整个布局变化了，他就会重拍，浏览器的GPU就hi从上到下，从页面的根节点开始重新排列重新渲染一遍，所以重拍的代价要比重绘大很多
		虚拟dom的概念就是伪类提升性能，他会把你真实的dom树抽象成一个虚拟dom，虚拟dom类似于一个对象，它里面有一些属性和样式，虚拟dom触发的一些重新渲染，他会先去操作你的虚拟dom，把你的虚拟dom生成好，然后一次性更新到你的正式dom上，这样就减少了页面的重排。比如你写了递呈任务每一百毫秒

17.

18、npm基本命令

		npm install   -下载我们当前项目依赖的包到node_modules
		npm run       -run一个脚本

19、git常用命令有那些

	Git clone地址
	Git git checkout-b 分支名
	Git add.提交代码.全部更改
	Git add -all
	git commit -s 	签名
	git commit -m	备注提交信息 
	git push origin master 	往远处仓库推一个分支
	git log 查看
	git log-p 查看修改记录

20、定位

定位 = 定位模式 + 边偏移

静态定位：position:static;
相对定位: position:relative;   相对于自身位置移动
固定定位: positon:fixed;			浏览器可视区
粘性定位: position:sticky;       浏览器可视区
绝对定位:position:absolute;		带有定位的父级

相对定位 和 粘性定位不脱标
绝对定位 和 固定定位脱标

行内元素添加绝对定位或者相对定位也可以直接设置宽度和高度，类似于行内块元素

大小默认内容大小
脱标的盒子是不会触发外边距合并的问题

定位叠放的顺序:通过 z-index; 只有定位的盒子才有z-index属性

绝对定位的盒子水平垂直居中：

.box{
/*缩放之后仍然是水平垂直居中*/
position:aboslute;
/*1.left 走50% 父容器宽度的一半*/
left:50%;
/*2.margin 负值 往左边走 自己盒子宽度的一半 */
margin-left:-100px;
top:50%;
margin-top:-100%;
width:200px;
height:200px;
background-color:pink;
/*加了绝对定位的盒子不能通过margin: 0 auto;居中*/
/*margin: 0 auto;*/
}

让盒子实现水平和垂直居中
对行内元素没有作用 不会影响其他元素的位置

p{
	position:absolute;
	top:50%;
	left:50%;
	width:200px;
	height:200px;
	background-color:red;
	/*是写死的
		margin-top:-100px;
		margin-left:-100px;
		*/
	*/用2d转换不用考虑*/
	tansform:translate(-50%,-50%);
	}

21、浮动

Float:left 浮动的元素不会压住下面标准流的文字或者图片 ———— 因为浮动产生的最初目的是文字环绕效果，不是用来布局的
浮动会脱标，一行有浮动的元素没有间隙
行内元素添加了浮动可以直接设置宽度和高度，类似于行内块元素，大小默认内容大小脱标的盒子是不会触发外边距合并的问题
去除浮动 额外标签法 overflow: hidden 伪元素清除法 双伪元素清除法

22、隐藏显示元素

		display:none; display隐藏元素后不再占有原来的位置
		display:block; 还可能是显示元素

	  visibility:hidden;visibility隐藏元素元素后继续占有原来的位置
	  visibility:visible;元素可视

	 overflow:hidden;默认  显示
	 overflow:visible;溢出部分隐藏
	 overflow:scroll;溢出的部分显示滚动条 不溢出也显示滚动条
	 overflow:auto;溢出的时候才显示滚动条 不溢出不显示滚动条

css三角制作 通过border属性

textarea {
		/*1.取消表单轮廓*/
		/*2.防止拖拽文本域*/
		resize:none;
		outline:none;
		}

图片、文字、表单实现对齐效果
Vartical-align 用于设置一个元素的垂直对齐方式，但是只针对于行内元素或者行内块元素
解决图片地测的空白间隙问题
1、给图片添加Vartical-align
2、把图片转换成块级元素

New在执行中会做的四件事

// new关键字执行过程
			// 1.new 构造函数可以在内存中创建一个空的对象
			// 2.this 就会指向刚才创建的空对象
			// 3.执行构造函数里面的代码 给这个空对象添加属性和方法
			// 4.返回这个对象

数组常用的方法
Push()向数组末尾添加新内容
参数：要添加的值，多个可以用逗号隔开
返回值：新增后的数组长度
改变原数组

Pop（）删除数组的最后一项
返回值：被删除的项
改变原数组

Unshift()向数组首位添加新内容
返回值：新数组的长度
改变原数组

Slice()按照条件找出其中部分的内容
参数:arr.slice(n,m)从索引n处开始查找到m处
返回值：一个新数组
不改变原数组

Splice() 对数组进行增删改查
参数:
Array.isArray()
用于确定传递的值是否是一个Array
Array.of()总是返回一个有参数值组成的数组，如果没有参数就会返回一个空数组。
concat()
方式用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
filter()
创建一个新数组，其中包含通过所提供函数实现的测试的所有元素
find()
返回数组中满足提供的测试函数的第一个元素的值
findIndex()
返回数组中满足提供的测试函数的第一个元素的索引
forEach()遍历数组
array.forEach(callback(currentValue,index,array){
//do something
},this)
indexOf()
返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
判断数组是否存在某个元素 返回布尔
includes()

数组转化为字符串
join()
将数组(或一个类数组对象)的所有元素连接到一个字符串中
let a = [‘Wind’,‘Rain’,‘Fire’];
a.join();
// 默认为","
// ‘Wind,Rain,Fire’

toSrting()
返回一个字符串，表示指定的数组及其元素

面试：如何将字符串转化为数组
1、split()方法
split()方法用于把一个字符串分割成字符串数组
stringObject.split(sepatator,howmany)

const text = "abc"
const chars = text.spli
console.log(chars);
//['a','b','c']
https://www.w3school.com.cn/jsref/jsref_split.asp

2、展开运算符

	const text = "abc???";
	const chars = [...text];
	console.log(chars);
	// ["a","b","c","???"]

3、结构赋值
const text = “abc???”
const […chars] = text;
console.log(chars);
//[“a”,“b”,“c”,"???"]

4、Array.from

const text = "abc????";
const chars = Array.from(text)
console.log(chars);
//["a","b","c","????"]
数组去重
set

let s2 = [...new Set（["red","pink","blue","red"]）];
	console.log(s2);

es8