js阶段高频面试题

前端面试题

1、盒子塌陷的原因？解决方式

原因: 1. 浮动导致的塌陷,浮动会脱落标准流
		 2. 嵌套的两个盒子,子盒子设置margin-top会导致父盒子一下下移
解决方法:第一种情况 1 清除浮动;  2 给父盒子加高度;  3 给父元素添加overflow:hidden
		第二种情况 1 给父元素加上边框; 2 给父元素添加overflow:hidden

2、不定宽高的div水平垂直居中

答: 1、父元素添加 position: relative
		div{
			position:absolute;
			top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
		}
	2、div {
	   display: flex;
       justify-content:center; //子元素水平居中
       align-items:center; //子元素垂直居中
	 }
      
    3、#box {
        width: 100px;
        height: 100px;
        position: relative;
    }

    #content {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

3、css写一个三角形

答: div {
      width: 0;
      height: 0;
      border: 20px solid transparent;
      border-width: 40px 20px 0 0;
      border-right-color: #f99;
    }

4、css选择器的优先级

答: !important>行内样式>id选择器>类/属性/伪类选择器>伪元素/标签选择器>通配符选择器*

5、px、em和rem的区别

答: px 是固定单位,  
    em 是相对单位,相当于当前文字的大小,如果没有就找父元素
    rem 也是相对单位,相对于html的fontsize的大小

6、什么是重绘和重排

答:
	重排: 当DOM元素影响了元素的几何属性（例如宽和高），浏览器需要重新计算元素的几何属性，同样其它元素的几何属性也会和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。
	重绘: 完成重排后，浏览器会重新绘制受影响的部分到屏幕上中，该过程称为“重绘”。
	
	当我们改变DOM的大小，增加删除都会导致重排，当给DOM元素改变颜色的时候，会导致重绘，重排一定会重绘，重绘不会重排。重排会影响性能，所以我们尽快能的减少重排的操作

7、flex常用的容器属性

答:
1. flex-direction: 设置容器中的主轴方向
2. flex-wrap: 项目在主轴方向上是否换行显示
3. justify-content: 设置容器中的项目在主轴上的对齐方式
4. align-items: 单行项目在侧轴上的排列方式
5. align-content: 多行项目侧轴上的对齐方式
6. flex-flow: 是flex-direction和flex-wrap的合写, 默认值为row nowrap

8、如何设置比12px更小的字体

答:
   p {
    	font-size:12px;
		-webkit-transform:scale(0.8);
    }

9、H5新增了那些特性

答: 
1. 语义化标签: header nav section article aside footer
2. 多媒体标签: video audio
3. 表单控件: number search email tel date time file url
4. 本地离线存储 localStorage 长期存储数据,改变浏览器数据不会丢失
			  sessionStorage 浏览器关闭数据会丢失
5. 自定义属性 data-*
6. 画布 Canvas
7. 拖拽释放 (Drap and Drap) API ondrop
8. 新的技术文本 webworker
9. 地理位置 (Geolocation) API

10、C3新增了那些特性

答:
1. 圆角 border-radius
2. 盒子模型 box-sizing
3. 阴影 box-shadow 盒子阴影  text-shadow 文字阴影
4. 过渡 transition
5. 2D转换transform  translate(平移) scale(缩放)  skew(斜切) rotate(旋转) transform-origin 控制转换中心点
6. 3D转换 perspective(透视距)  transform-style(3D控件效果)
7. 渐变 linear-gradient radial-gradient
8. 弹性布局 flex
9. 媒体查询 @media screen and () {...}
10. 边框图片 border-image
11. 自定义动画 @keyframes    animation
12. 颜色 新增RGBA HSLA模式
13. 背景 background-size   background-origin   background-clip

11、js的数据类型有哪些

答: 简单数据类型: number string boolean undefined   null
	引用数据类型: object  function  array

12、typeof返回的数据类型

答: number string boolean undefined  object  function 
   特殊情况：
   typeof null -->object
   typeof array -->object
   typeof typeof 任何类型  -->string

13、返回false的情况有哪些

答: 0  ""   null  false  NaN  undefined  不成立的表达式

14、对this的理解

答: this是个关键字,它的指向和函数的调用方式有关
1. 函数调用模式, this指向window
2. 构造函数调用模式, this指向新创建的实例对象
3. 方法调用模式, this指向调用该方法的对象
4. 上下文调用模式, call和apply方法中, this指向方法内的第一个参数
                  bind方法中, bind创建的新函数的this绑定为bind方法中新的函数
5. 在事件处理函数中,this指向触发事件的当前元素
6. 定时器中,this指向window
7. 箭头函数中没有this指向问题,它的this和外层作用域的this保持一致
8. 匿名函数中的this总是指向window

15、和=的区别

答：== 表示是相等，只比较内容
   === 表示是全等，不仅比较内容，也比较类型

16、null和undefined的区别

答：null 表示空值 没有获取到。typeof null 返回"object"
   undefined 表示未定义，没有声明值。typeof undefined 返回"undefined"

17、localStorage、sessionStorage和cookie的区别

答: 共同点: 都可以用来存储数据。
	区别: 
	1. 请求不同: cookie在浏览器和服务器间来回传递。
		sessionStorage 和 localStorage不会自动把数据发给服务器，仅在本地保存。
	2. 存储大小限制也不同: 
		cookie 数据不能超过4k，因为每次http请求都会携带cookie，所以cookie适合保存如会话标识等数据，sessionStorage和localStorage约5M 。
	3. 数据有效期不同: 
		 sessionStorage：在当前浏览器窗口关闭前有效 
		 localStorage：始终有效
		 cookie只在设置cookie的过期时间之前一直有效，即使窗口或浏览器关闭。 

18、js的运行机制是什么

答：js是单线程执行的，页面加载时，会自上而下执行主线程上的同步任务，当主线程代码执行完毕时，才开始执行在任务队列中的异步任务。具体如下  
    1.所有同步任务都在主线程上执行，形成一个执行栈。
    2.主线程之外，还存在一个"事件队列(eventloop队列或者消息队列)"。只要异步任务有了运行结果，就在"事件队列"之中放置一个事件。
    3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"事件队列"，查看有哪些互相对应的事件与异步任务，于是结束等待状态，异步任务进入执行栈，开始执行。
    4.主线程不断重复上面的第三步。

19、怎么理解面向对象

答：1、把程序看作一个对象，把属性和方法封装其中，以提高代码的灵活性、复用性、可扩展性。
   2、面向对象有三大特性：封装、继承、多态。
       多态：一个函数或方法拥有多种运行方式的能力
   3、js中对象是一个无序的数据集合，可以动态的添加属性和方法。

20、伪数组和真数组的区别

伪数组：
1、拥有length属性
2、不具有数组的方法
3、伪数组是一个Object，真数组是Array
4、伪数组的长度不可变，真数组的长度是可变的

21、那些情况会得到伪数组

1、arguments，
2、DOM 对象列表、childNodes
3、jQuery 对象

22、let、const、var的区别

1、var声明存在变量提升，let和const不存在
2、var声明不存在块级作用域，let和const存在
3、var声明允许重复，let和const在同一作用域不允许
4、var和let声明变量可以修改，const不能

23、怎么理解事件循环机制

	1、JavaScript 是一门单线程语言.单线程可能会出现阻塞的情况，所以js分了同步任务和异步任务。
    2、同步任务进入主线程执行，异步任务进入 Event Queue（事件队列）执行 。主线程内的任务执行完毕后，会去 Event Queue 读取对应的任务，推入主线程执行。 上述过程的不断重复就是 Event Loop (事件循环)。

###24、什么是作用域链

在访问一个变量时，首先在当前作用域中找，如果找不到再到外层作用域中查找，这样一层一层的查找，就形成了作用域链。

###25、for in 和 for of 的区别

1、for…in是遍历数组、对象的key
2、for…of是遍历数组的value
例如：
let arr = ["a","b"];
  1）for (let key in arr) {
  console.log(key);  //0 1
  }
  2）for (let value of arr) {
  console.log(value);  //a b
  }