H5C3,js,ES6面试高频考点

H5C3

1. H5C3和Html，css相比有什么变化

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

基本选择器

属性选择器

伪类选择器

CSS3边框与圆角

CSS3圆角border-radius

盒阴影box-shadow

CSS3背景background-image

CSS3渐变 定义：可以在两个或者多个指定颜色之间显示平移的过渡

CSS3过渡 定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。

CSS3变换 定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。

CSS3动画 定义：使元素从一种样式逐渐变化到另外一种样式的效果。

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

一.块级元素 block

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

二.内联元素 inline

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

三.内联块状元素 inline-block

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点.

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

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

1. 使用定位的方式

让左右两边的盒子绝对定位，左边盒子left:0,右边盒子：right:0,绝对定位盒子不占位置，中间的盒子padding左右宽度为左右两边盒子的宽度保留左右盒子的位置

1. 使用浮动加calc计算属性

让所有盒子左浮动，左右两边的盒子宽度固定，中间盒子的宽度通过calc计算属性动态计算得出即中间盒子的宽度为100%减去左右两边的盒子总宽度

1. 使用flex布局

通过父元素设置flex布局，让盒子在一行显示，左右两边的盒子固定宽度，而父元素的剩余宽度则为中间盒子的宽度flex:1

4.使用calc（100%-宽度）

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

flex-direction 设置内部项目的排列方向

row、row-reverse、column、column-reverse

flex-wrap 设置一行放不下的话是否换行

flex-flow 上面两种属性的简写，推荐使用

justify 项目在主轴（X轴）上的对齐方式

align-items 项目在交叉轴（Y轴）上的对齐方式

align-content 有多根轴线时的对齐方式。如果项目只有一根轴线，那么该属性不起作用

order 项目的排列顺序，数字越小越靠前

flex-grow 项目放大的比例

flex-shrink 项目缩小的比例

flex-basis 项目占据的主轴空间

flex flex-grow，flex-shrink和flex-basis的简写，推荐使用

align-self 设置个别项目在交叉轴（Y轴）上的对齐方式

justify-content（子元素排列方式及间隔样式）：  flex-start、flex-end、center、 spacing-between、spacing-around、spacing-evently

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

box-sizing：content-box；（普通盒模型、默认）          标准盒模型：设置的宽度就等于内容的宽度

box-sizing：border-box；（怪异盒模型、IE盒模型）       怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

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

图片旋转可以用计时器也可以设置css中的动画属性，装帧可以添加点击事件来使期位置发生改变

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

浮动：就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）

用法：float:left或者right或者none或者inherit；left：让元素向左浮动；right：让元素向右浮动；none：让元素不浮动；inherit：让元素从父级继承浮动属性

用途：布局网页并定位网页元素、让块元素可以通过浮动来左右相邻

问题：父元素高度塌陷，高度无法撑开、与元素同级的非浮动元素会紧随其后(遮盖现象)、如果一个元素浮动，则该元素之前的元素也需要浮动;否则会影响页面显示的结构

清除方法：在浮动元素末尾添加空标签（不推荐）、为父级元素添加overflow：hidden；（局限于浮动类）、伪元素清除浮动（推荐）、双伪元素清除浮动、 .clearfix {* zoom：1；}

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

：link     未访问时的表现

：visited  访问过后的表现

：hover    鼠标移入的表现

：active   鼠标单机的表现

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

设置字体大小为零，设置成为行内块在浮动

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

文本水平居中：设置text-align：center；文本的垂直居中：可以设置line-height：xxpx；

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

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

单行显示省略号：white-spacing：nowrap；

规定某行显示省略号：-webkit-line-climp：n；

overflow：hidden；display：-webkit-box；

text-overflow：ellipsis；

-webkit-box-orient：vertical；

    overflow：hidden；

JS+ES6

1. js数据类型有哪些

基本类型：数字类型（NUMBER）、字符串类型（String）、布尔类型（Boolean）、空型（null）、未定义型（undef）、唯一值型（symbol）

引用数据类型：数组、函数、对象、set、map

1. 内置对象有哪些

值属性类：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；

1. 数组方法有哪些

join (原数组不受影响)：该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串

split (原数组不受影响)： 该方法是用过指定的分隔符,将字符串分割成数组。返回值:返回一个新的数组

push（改变原数组）：该方法可以在数组的最后面,添加一个或者多个元素；结构: arr.push(值)；返回值:返回的是添加元素后数组的长度.

pop（改变原数组）：该方法可以在数组的最后面,删除一个元素；结构: arr.pop()；返回值:返回的是刚才删除的元素.

unshift（改变原数组）：该方法可以在数组的最前面,添加一个或者几个元素；结构: arr.unshift(值)；返回值: 返回的是添加元素后数组的长度

shift（改变原数组）：该方法可以在数组的最前面,删除一个元素；结构: arr.shift()；返回值: 返回的是刚才删除的元素.

reverse 翻转数组（改变原数组）：结构:arr.reserse()

sort（改变原数组）：该方法可以对数组进行排序.默认从大到小，其中的参数是一个函数

concat（原数组不受影响）：该方法可以把两个数组里的元素拼接成一个新的数组；返回值: 返回拼接后的新数组

slice 截取（原数组不受影响）：该方法可以从数组中截取指定的字段,返回出来；返回值:返回截取出来的字段,放到新的数组中,不改变原数组

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(元素)

lastIndexOf：该方法用来查找元素在数组从后往前第一次出现的位置；结构: arr.lastIndexOf(元素)

forEach()：该方法等同于for循环,没有返回值

map()：映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等

filter()：filter方法: 有返回值, 过滤出符合条件的元素

some：判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false

every：判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false

find：找到符合条件的项,并且返回第一项

findIndex：找到符合条件的项的下标,并且返回第一个

1. 数组去重几种方式

1、定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。

2、先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。

3、利用对象属性存在的特性，如果没有该属性则存入新数组。

4、利用数组的indexOf下标属性来查询。

5、利用数组原型对象上的includes方法。

6、利用数组原型对象上的 filter 和 includes方法。

7、利用数组原型对象上的 forEach 和 includes方法。

8、利用数组原型对象上的 splice 方法。

9、利用数组原型对象上的 lastIndexOf 方法。

10、利用 ES6的set 方法。

1. 数组深拷贝几种方式

1、for循环实现

2、slice方法

3、concat方法

4、ES6扩展运算符实现

1. 对象深拷贝几种方式

1、通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。当值为undefined、function、symbol会在转换过程中被忽略。

2、es6解构赋值，只能深度拷贝对象的第一层，如果对象中的属性也是对象的话，没有办法进行深度拷贝的。

3、for in 循环遍历对象，只能深度拷贝对象的第一层

4、Object.assign() 对象的合并，第一个参数必须是空对象，只能深度拷贝对象的第一层

5、利用循环和递归的方式，在循环递归中需要注意设置临界值（typeof obj[key] == ‘object’），否则会造成死循环。

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

分为setTimeout、setInterval、requeTanimationFrame（动画API）

setTimeout只执行一次、setInterval可以执行多次；清除setTimeout，clearTimerout、清除setInterval，clearInterval

1. 说下对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， 只是代表形式上的一个异步操作；什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是它做什么具体的异步事情，目前还不清楚

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

ES6模块化导入与导出有三种方式，1默认导入导出，2按需导入导出，3默认导出和整体导出一起使用

优点：避免命名冲突，更好分离，更高复用，可维护性高，更好实现高内聚低耦合

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

箭头函数比普通函数更加简洁

箭头函数没有自己的this，它只会在自己作用域的上一层继承this

箭头函数继承来的this指向永远不会改变

call()、apply()、bind()等方法不能改变箭头函数中this的指向

箭头函数不能作为构造函数使用

箭头函数没有自己的arguments

箭头函数没有prototype

1. 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)

1. 数组排序的几种写法

1、利用sort（）方法排序

2、冒泡排序法

3、选择排序法：选一个最大或最小的进行比较排序

4、插入排序法：选定一个数据，遍历数组不断比较