【前端高频面试题——精简系列1】H5C3Js面试知识点

1.H5C3新增了哪些

h5新增了画布Canvas/3D转化器/音视频/语义化/拖拽释放，c3新增了阴影/边框/过渡transtion/媒体查询meta/渐变-liner-gradient/自定义动画/边框

base 标签
base 可以设置整体链接的打开状态
base 写到 之间把所有的连接
都默认添加 target=“_blank”

<base target="_blank" />

2.标签元素分类，和特点

基本分为：行内标签，块级标签，行内块标签
行内标签(block)：不会独占一行，基本为内容撑起，和文本一行
不能设置宽高，上下内外边距不能设置，左右内外边距可以设置
常见的有：span/a/i/b/strong/lable

块级标签(inline)：会独占一行，不管内容多少，可以设置内外边距，宽高，宽度会自适应父级标签，高度由内容撑起。
常见的有：h1-h6/div/p/ul/ol/dl/table

行内块标签(inline-block)：可以设置内外边距/宽高，和行内标签在一行
常见的有：img/input/

3.圣杯布局（双飞翼布局）有哪几种实现方式

常见的有两种：1.弹性盒子布局2.定位
弹性盒子：利用扩张因子，基于父级设置成弹性盒子，左右两端对齐，实现三个在一行，
再给左右两个定宽后，中间部分设置flex=1的扩张因子。
定位：在基于父级相对定位后，左右两边绝对定位定位两边，中间盒子居中，左右两边边距设置成左右两边的宽度

4.弹性盒模型有哪些属性和属性值，什么效果

1.box-orient属性用于设置或者检索弹性盒模型对象的子元素的排列方式，但是使用弹性盒模型时，
需先把父容器的display属性设置为box或inline-box
2.justify-content=“space-between”决定子级对齐方向，默认左对齐left
3.flex=：“1”扩张因子，默认0
4.flex-direction决定主轴方向及项目其他方向，默认row水平对齐
5.align-items起点对齐方向，默认交叉对齐
6.flex-wrap决定是否换行，默认nowrap不换行

5.常见的盒子模型有哪些，有什么区别

有标准模型，和非标准模型（也叫怪异盒模型）
标准盒模型：1.给标签添加：box-sizing:content-box；(元素默认)
2.这个标签就转换为了标准盒模型
3.标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
非标准模型：
1.给标签添加：box-sizing:border-box；
2.这个标签就转换为了怪异盒模型
3.标签得实际宽度 = 设置的宽度
4.如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。

6.写一个网易云播放动画，图片旋转+撞针来回拨动

<style>
.rotate360{
      
      
animation:rotate36020s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
animation-play-state:paused;
}
@keyframesrotate360{
      
      
from{
      
      
rotate:0deg;
}
to{
      
      
rotate:360deg;
}
}
</style>
撞针来回动画：
<style>
.needleGo{
      
      
animation:needleGo0.7s;
animation-fill-mode:forwards;
animation-timing-function:linear;
animation-iteration-count:1;
}
.needleBack{
      
      
animation:needleBack0.7s;
animation-fill-mode:forwards;
animation-timing-function:linear;
animation-iteration-count:1;
}
@keyframesneedleGo{
      
      
from{
      
      
transform:rotate(0deg);
}
to{
      
      
transform:rotate(-16deg);
}
}
@keyframesneedleBack{
      
      
from{
      
      
transform:rotate(-16deg);
}
to{
      
      
transform:rotate(0deg);
}
}
</style>

7.说一下对浮动的理解，（什么是浮动，有什么用,怎么用，有什么问题，怎么清除浮动）

浮动：就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的
外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）
用法：float:left或者right或者none或者inherit；left：让元素向左浮动；right：让元素向右浮动；
none：让元素不浮动；inherit：让元素从父级继承浮动属性
用途：布局网页并定位网页元素、让块元素可以通过浮动来左右相邻
问题：父元素高度塌陷，高度无法撑开、与元素同级的非浮动元素会紧随其后(遮盖现象)、
如果一个元素浮动，则该元素之前的元素也需要浮动;否则会影响页面显示的结构
清除方法：在浮动元素末尾添加空标签（不推荐）、为父级元素添加overflow：hidden；
（局限于浮动类）、伪元素清除浮动（推荐）、双伪元素清除浮动、 .clearfix {* zoom：1；}（IE6、7专
有）

8.伪类有哪些，作用和书写顺序

：link 未访问时的表现
：visited 访问过后的表现
：hover 鼠标移入的表现
：active 鼠标单机的表现
伪类需要遵循优先顺序，他们的本质是同等优先权规则写后边的会覆盖前边的，必须遵循
:link 为访问 :visited已访问 :hover鼠标划过 :active鼠标选中后 的顺序，伪类也不区分大小写

扩展
标签:frist-child 获取标签的第一个孩子标签 与标签 : nth-child(1)方式一样

8.1 谈谈你对伪元素的理解

伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection

:first-letter
　指定一个元素第一个字母的样式
　[注意1]所有前导标点符号应与第一个字母一同应用该样式
　[注意2]只能与块级元素关联
　[注意3]只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-letter中存在连接符的原因

div:first-letter{color: red;}

9.如何去掉相邻两个图片中间的白边

文本水平居中：设置text-align：center；文本的垂直居中：可以设置line-height：xxpx；
盒子的水平居中：设置宽度后，设置margin：auto；盒子的垂直居中：通过弹性布局改变主轴方向以及设置justify-content：center；

10.如何实现文字垂直水平居中，盒子垂直水平居中

文本水平居中：设置text-align：center；文本的垂直居中：可以设置line-height：xxpx；
盒子的水平居中：设置宽度后，设置margin：auto；盒子的垂直居中：通过弹性布局改变主轴方向以及设置justify-content：center；

11.单行文本溢出显示省略号，多行文本溢出显示省略号

单行显示省略号：white-spacing：nowrap； 规定某行显示省略号：-webkit-line-climp：n；
overflow：hidden； display：-webkit-box；
text-overflow：ellipsis； -webkit-box-orient：vertical；
overflow：hidden；

具体或其他的方法，作者也有写，链接奉上大致都是h5常用但记不住的知识点。

12.js数据类型有哪些

基本类型：数字类型（NUMBER）、字符串类型（String）、布尔类型（Boolean）、空型（null）、未定义型（undef）、es6新增了 唯一值型（symbol）
引用数据类型：数组、函数、对象、set、map

如果这里有忘的话，作者也有写，链接奉上

13.内置对象有哪些

值属性类：Infinity、NaN、undefined、null等；函数属性类：eval()、parseFloat()、parseInt() 等；基本对象类：Object、Function、Boolean、Symbol、Error 等；
数字和日期对象类：Number、Math、Date等；字符串类：String、RegExp等；可索引的集合对象类：Array；使用键的集合对象类：Map、Set、WeakMap、WeakSet等；
矢量集合类：SIMD ；结构化数据类：JSON ；控制抽象对象类：Promise、Generator 等；反射类：Reflect、Proxy；其他：arguments；

14.数组方法有哪些

如果这里不查看可以在这里查看，如果写的好点点赞呗！
数组最全方法，即详解-链接奉上

join (原数组不受影响)：该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串
slice 截取（原数组不受影响）：该方法可以从数组中截取指定的字段,返回出来；返回值:返回截取出来的字段,放到新的数组中,不改变原数组
concat（原数组不受影响）：该方法可以把两个数组里的元素拼接成一个新的数组；返回值: 返回拼接后的新数组

reverse 翻转数组（改变原数组）：结构:arr.reserse()
sort（改变原数组）：该方法可以对数组进行排序.默认从大到小，其中的参数是一个函数
shift（改变原数组）：该方法可以在数组的最前面,删除一个元素；结构: arr.shift()；返回值: 返回的是刚才删除的元素
splice（改变原数组）：结构1: arr.splice(start,deletedCount) 纯删除；从start下标开始,删除几个
结构2: arr.splice(start,deletedCount,item) 替换；从start下标开始,删除几个,并在该位置添加item
结构3: arr.splice(start,0,item) 纯添加；从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动

indexOf：该方法用来查找元素在数组中第一次出现的位置；结构: arr.indexOf(元素)
map()：映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等
filter()：filter方法: 有返回值, 过滤出符合条件的元素
some：判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false

15.数组去重几种方式

1、定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。
2、先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。
3、利用对象属性存在的特性，如果没有该属性则存入新数组。
4、利用数组的indexOf下标属性来查询。
5、利用数组原型对象上的includes方法。
6、利用数组原型对象上的 filter 和 includes方法。
7、利用数组原型对象上的 forEach 和 includes方法。
8、利用数组原型对象上的 splice 方法。
9、利用数组原型对象上的 lastIndexOf 方法。
10、利用 ES6的set 方法。

这里就不细分了，想看的话找他 最全的13种方法—链接奉上

16.数组深拷贝几种方式

1、for循环实现
2、slice方法
3、concat方法
4、ES6扩展运算符实现
5、for…in…

详细数组代码-链接奉上

17.对象深拷贝几种方式

1、通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。
当值为undefined、function、symbol会在转换过程中被忽略。
2、es6解构赋值，只能深度拷贝对象的第一层，如果对象中的属性也是对象的话，没有办法进行深度拷贝的。
3、for in 循环遍历对象，只能深度拷贝对象的第一层
4、Object.assign() 对象的合并，第一个参数必须是空对象，只能深度拷贝对象的第一层
5、利用循环和递归的方式，在循环递归中需要注意设置临界值（typeof obj[key] == ‘object’），否则会造成死循环。

对象代码-链接奉上

18.定时器有几种，有什么区别

分为setTimeout、setInterval、requeTanimationFrame（动画API）
setTimeout只执行一次、setInterval可以执行多次；清除setTimeout、清除setInterval

19.说下对Promise的理解

1、Promise是一个构造函数，可以通过 new Promise()得到一个 Promise 的实例；
2、在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数） ；
3、在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到这个 .then() 方法 ；
4、Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
5、既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：
过程不可逆
状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；
状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；
6、由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来将成功 或 失败的结果，返回给调用者；
7、我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，预先为 这个 Promise 异步操作，指定成功（resolve） 和 失败（reject） 回调函数；
8、我们 new 出来的 Promise， 只是代表形式上的一个异步操作；什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是它做什么具体的异步事情，目前还不清楚

20.说下对模块导入导出的理解

ES6模块化导入与导出有三种方式，1默认导入导出，2按需导入导出，3默认导出和整体导出一起使用
优点：避免命名冲突，更好分离，更高复用，可维护性高，更好实现高内聚低耦合

21.箭头函数和普通函数的区别

箭头函数比普通函数更加简洁
箭头函数没有自己的this，它只会在自己作用域的上一层继承this
箭头函数继承来的this指向永远不会改变
call()、apply()、bind()等方法不能改变箭头函数中this的指向
箭头函数不能作为构造函数使用
箭头函数没有自己的arguments
箭头函数没有prototype

22.Js实现约瑟夫环问题

（m个人留1个或者留n-1个）

如果想具体的了解思路， 链接奉上

方法一：数组解决

function countOff(num,m){
  let players=[];
  for(let i=1;i<=num;i++){
    players.push(i);
  }
  let flag=0;
  while(players.length>1){// 剩下一人，结束条件
    let outPlayerNum=0,len=players.length;
    for(let i=0;i<len;i++){
      flag++;
      if(flag===m){
        flag=0;
        console.log("出局："+players[i-outPlayerNum]);
        players.splice(i-outPlayerNum,1);
        outPlayerNum++;
      }
    }
  }
  // return players[0];
  console.log("剩下："+players[0]);
}
// console.log("剩下："+find(100,5))
countOff(100,5)

方法二：循环队列实现

队列数据结构是遵循先进先出（也可以说成先来先服务）原则的一组有序的项。队列的尾部添加新元素，并从顶部（头部）移除元素。最新添加的元素必须排在队列的末尾。

function MyCircularQueue() {
  var items = [];
  //向队列插入元素
  this.enQueue = function (value) {
    return items.push(value);
  }
  //删除元素
  this.deQueue = function () {
    return items.shift();
  }
  //查看队列长度
  this.size = function () {
    return items.length;
  }
}

function countOff(m, n) {
  var queue = new MyCircularQueue();
  //将名单存入队列
  for (var i = 1; i <= m; i++) {
    queue.enQueue(i);
  }
  var loser = '';
  while (queue.size() > 1) {
    for (var i = 0; i < n - 1; i++) {
      queue.enQueue(queue.deQueue());
    }
    loser = queue.deQueue();
    console.log('被淘汰的人为：' + loser);
  }
  // return queue.deQueue();
  console.log('获胜者：' + queue.deQueue());
}
// console.log('获胜者：' + countOff(100, 5));
countOff(100, 5)

23.数组排序的几种写法

1、利用sort（）方法排序
2、冒泡排序法
3、选择排序法：选一个最大或最小的进行比较排序
4、插入排序法：选定一个数据，遍历数组不断比较

数组最全方法，即详解

人总要往前看，斩断过去，迎取未来。