H5C3和js练习题
H5C3
- H5C3和Html，css相比有什么变化
H5新特性：
- 拖拽释放(Drap and drop) API ondrop
- 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
- 自定义属性data-id
- 语义化更好的内容标签(header,nav,footer ,aside, article, section)
- 音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加autoplay
- 画布Canvas
- getContext() 方法返回一个用于在画布上绘图的环境。Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
- cxt.stroke() 如果没有这一步 线条是不会显示在画布上的
- canvas和image在处理图片的时候有什么区别?
image是通过对象的形式描述图片的,canvas通过专门的API将图片绘制在画布上.
- 地理(Geolocation) API
- 本地离线存储localStorage 长期存储数据 浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 表单控件 calendar , date , time , email , url , search , tel , file , number
- 新的技术 webworker, websocket , Geolocation
Css3新特性：
- 颜色: 新增RGBA , HSLA模式
- 文字阴影(text-shadow)
- 边框: 圆角(border-radius) 边框阴影 : box-shadow
- 盒子模型: box-sizing
- 背景:background-size background-origin background-clip
- 渐变: linear-gradient , radial-gradient
- 过渡 : transition 可实现动画
- 自定义动画 animate @keyfrom
- 媒体查询 多栏布局 @media screen and (width:800px) {…}
- border-image
- 2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
- 3D转换
- 字体图标 font-face
- 弹性布局flex
- 伪类选择器
- 标签元素分类，和特点
- 块元素
典型代表,Div,h1-h6,p,ul,li
特点: ★独占一行
★可以设置宽高
★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
2.行内元素
典型代表 span ,a, ,strong , em, del, ins
特点：★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
- 行内块元素
典型代表 input img
特点：★在一行上显示
★可以设置宽高
3.圣杯布局（双飞翼布局）有哪几种实现方式
- padding值
第一步：大盒子中包含三个子盒子
第二步：大盒子宽度100%，相对定位且设置左右padding值
第三步：左右两个子盒子固定宽高，且绝对定位到两边
第四步：中间盒子设置宽100%（自适应）
- magin值
第一步：大盒子中包含三个子盒子
第二步：大盒子宽度100%，相对定位
第三步：左右两个子盒子固定宽高，且绝对定位到两边
第四步：中间盒子不要设置宽，设置左右magin值
- flex布局
第一步：大盒子中包含三个子盒子
第二步：大盒子宽度100%，display：flex；
第三步：左右两个子盒子固定宽高
第四步：中间盒子 设置 flex：1； （占据大盒子剩余空间）
4. calc函数
第一步：大盒子中包含三个子盒子
第二步：大盒子宽度100%，相对定位
第三步：左右两个子盒子固定宽高，且绝对定位到两边
第四步：中间盒子设置宽 calc（100% - 两边子盒子宽度和） 绝对定位到挨着左边盒子/右边盒子
- 弹性盒模型有哪些属性和属性值，什么效果
1:flex-direction: ; 指定容器中弹性元素的排列方式
可选值：
row 默认值，弹性元素在容器中水平排列（左向右）
主轴-自左向右
row-reverse 弹性元素在容器中反向水平排列（右向左）
主轴-自右向左
column 弹性元素纵向排列（自上向下）
主轴-自上向下
column-reverse 弹性元素纵向排列（自下向上）
主轴-自下向上
主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向的称为侧轴
2.弹性容器属性
1: flex-direction:;
2: flex-wrap: ;设置弹性元素是否在弹性容器中是否自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
3:flex-flow:wrap和direction的简写属性，且没有顺序要求
默认值 row nowrap
4:justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素的两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧（兼容性差一些）
3.弹性容器属性
1: flex-direction: row;
2:flex-wrap:wrap-reverse;
3: flex-flow:row wrap;
4: justify-content:space-around;
5: align-items 在辅轴上如何对齐-元素间的关系
可选值：
stretch 默认值，将同一行元素的长度设置为相同的值
flex-start 元素不会拉伸， 沿着辅轴起边对齐
flex-end 元素不会拉伸， 沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐（用的不对）
6: align-content: ;辅轴空白空间的分布
可选值：
flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴终边排列
center 元素居中排列
space-around 空白分布到元素的两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧（兼容性差一些）
二：弹性元素的属性
1、order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2、flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3、flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，
即项目的本来大小。
5、flexflex：属性是flex-grow, flex-shrink 和 flex-basis的简写，
默认值为0 1 auto。后两个属性可选。
6、align-self：允许单个项目有与其他项目不一样的对齐方式，
可覆盖align-items属性。默认值为auto，
表示继承父元素的align-items属性，如果没有父元素，
则等同于stretch。
5.常见的盒子模型有哪些，有什么区别
在Css中有两种盒子模型，一种是内容盒子，也可以叫标准盒模型，一种是边框盒子，又叫怪异盒模型。内容盒子是默认盒子，在创建一个新盒子时盒子类型默认为内容盒子
内容盒子：
在给标签（默认情况下，也就是内容盒子）设置宽高时，width和height设置的是盒子模型中的content的width和height,边框以及内边距是往外挤压的，这些部分会占据外面没有定义给当前盒子的部分
第二种盒子模型是边框盒子 border-box 两种盒子的转换需要用box-sizing来实现
边框盒子最大的特点就是它的border和内边距padding都是向内挤压的，即它只会占据设置给它的width和height
6．写一个网易云播放动画，图片旋转+撞针来回拨动
@keyframes rotateA
{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
transition: transform 2s linear;
-webkit-transition: transform 0.5s linear;
transform-origin: left top ;
transform: rotate(-15deg);7．说一下对浮动的理解，（什么是浮动，有什么用，怎么用，有什么问题，怎么清除浮动）
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。
应用：让多个块级盒子（div）水平排列成一行；实现两个盒子的左右对齐，可以让多个块级元素一行内排列显示
浮动的特性:
- 浮动元素会脱离标准流（脱标）
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
浮动造成的问题：
- 父级高度塌陷（这也是一个严重的问题）
- 宽、高变成自适应子元素，但宽、高的设置有效
解决方法：
1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。
2、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
3、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
4、给父元素添加 overflow：hidden；
-
- 通过伪类::after清除浮动
8.伪类有哪些，作用和书写顺序
：link 未访问时的表现
：visited 访问过后的表现
：hover 鼠标移入的表现
：active 鼠标单机的表现
9.如何去掉相邻两个图片中间的白边
转为块级元素在浮动，为父元素添加font-size：0；
10.如何实现文字垂直水平居中，盒子垂直水平居中
文本水平居中：设置text-align：center；文本的垂直居中：可以设置line-height：xxpx；
盒子的水平居中：设置宽度后，设置margin：auto；盒子的垂直居中：通过弹性布局改变主轴方向以及设置justify-content：center；
11.单行文本溢出显示省略号，多行文本溢出显示省略号
单行显示省略号：white-spacing：nowrap；overflow：hidden；
text-overflow：ellipsis；
规定某行显示省略号：-webkit-line-climp：n；display：-webkit-box；
-webkit-box-orient：vertical；overflow：hidden；
JS+ES6
12.js数据类型有哪些
基本类型：数字类型（NUMBER）、字符串类型（String）、布尔类型（Boolean）、空型（null）、未定义型（undef）、唯一值型（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 (原数组不受影响)：该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串 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：找到符合条件的项的下标,并且返回第一个
15.数组去重几种方式
1、定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。 2、先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。 3、利用对象属性存在的特性，如果没有该属性则存入新数组。 4、利用数组的indexOf下标属性来查询。 5、利用数组原型对象上的includes方法。 6、利用数组原型对象上的 filter 和 includes方法。 7、利用数组原型对象上的 forEach 和 includes方法。 8、利用数组原型对象上的 splice 方法。 9、利用数组原型对象上的 lastIndexOf 方法。 10、利用 ES6的set 方法。
16.数组深拷贝几种方式
-
- for循环实现 2、slice方法 3、concat方法 4、ES6扩展运算符实现
17.对象深拷贝几种方式
1、通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。当值为undefined、function、symbol会在转换过程中被忽略。 2、es6解构赋值，只能深度拷贝对象的第一层，如果对象中的属性也是对象的话，没有办法进行深度拷贝的。 3、for in 循环遍历对象，只能深度拷贝对象的第一层 4、Object.assign() 对象的合并，第一个参数必须是空对象，只能深度拷贝对象的第一层 5、利用循环和递归的方式，在循环递归中需要注意设置临界值（typeof obj[key] == ‘object’），否则会造成死循环。
- 定时器有几种，有什么区别
分为setTimeout、setInterval、requeTanimationFrame（动画API） setTimeout只执行一次、setInterval可以执行多次；清除setTimeout，clearTimerout、清除setInterval，clearInterval
- 说下对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， 只是代表形式上的一个异步操作；什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是它做什么具体的异步事情，目前还不清楚
- 说下对模块导入导出的理解
ES6模块化导入与导出有三种方式，1默认导入导出，2按需导入导出，3默认导出和整体导出一起使用 优点：避免命名冲突，更好分离，更高复用，可维护性高，更好实现高内聚低耦合
- 箭头函数和普通函数的区别
箭头函数比普通函数更加简洁 箭头函数没有自己的this，它只会在自己作用域的上一层继承this 箭头函数继承来的this指向永远不会改变 call()、apply()、bind()等方法不能改变箭头函数中this的指向 箭头函数不能作为构造函数使用 箭头函数没有自己的arguments 箭头函数没有prototype
- Js实现约瑟夫环问题（m个人留1个或者留n-1个）
function countOff(num,m,n){
let players=[];
for(let i=1;i<=num;i++){
players.push(i);
}
let flag=0;
while(players.length>n){// 剩下一人，结束条件
let outPlayerNum=0,len=players.length;
for(let i=0;i
- 数组排序的几种写法
1、利用sort（）方法排序 2、冒泡排序法 3、选择排序法：选一个最大或最小的进行比较排序 4、插入排序法：选定一个数据，遍历数组不断比较