【前端】我的刷题记录（4）

1、结果输出是什么？

var a=[0];
if(a){
    console.log(a==true);
}
else{
    console.log("xxx");
}

答：false。
知识点：

• 布尔值为false的五种情况：数字0、特殊值的 null、NaN、undefined、字符串""，其他均为true。
• "=="的隐式类型转换：
  A.首先看双等号前后有没有NaN，如果存在NaN，一律返回false。
  B.再看双等号前后有没有布尔，有布尔就将布尔转换为数字。（false是0，true是1）
  C.接着看双等号前后有没有字符串, 有三种情况：

1. 对方是对象，对象使用toString()或者valueOf()进行转换；
2. 对方是数字，字符串转数字；
3. 对方是字符串，直接比较；
4. 其他返回false

D.如果是数字，对方是对象，对象取valueOf()或者toString()进行比较, 其他一律返回false
E.null、undefined不会进行类型转换, 但null==undefined

2、css 属性能够设置盒模型的内边距为上 10px 、下 20px 、左 30px 、右 40px 的合并写法。
答：

padding：10px 40px 20px 30px;

3、当块级元素设置 box-sizing:border-box 属性时，该块级元素的 width 包含哪几个部分？
答：content、padding 和 border

4、列举出 3 个 JS 中的基本数据类型。
知识点：
基本数据类型：string,number,boolean,undefined,null 一共5种
5中基本类型中，只有string,mumber,boolean 有构造对象（有属性和方法）
object属于引用类型

5、input 的 type 属性值列举 3 个。
答：text, password，file，checkbox，radio，submit，email

6、移动浏览器中，触摸一下屏幕会依次触发哪些事件？
答：触摸事件有 touchstart touchmove touchend touchcancel 四种
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

7、'5'+3=？、'5'-3=？
答：53、2

8、常见的浏览器端的存储技术有哪些？
cookie：放在http请求头中，伴随数据传输而传输，数据传输大小有限制，有过期时间
localstorage：存储在本地，不会伴随数据传输，生命周期为永久
sessionstorage：浏览器中，浏览器关闭则消失，即使在同源浏览器中也不能共享

9、非严格模式下写出下面表达式结果。
parseInt("123a")=？
答：123

10、判断输出结果。

var a=[1,2,3,4,5];
a.splice(1,3,5,2,1);
console.log(a);

答：[ 1, 5, 2, 1, 5 ]
知识点：array.splice(删除位置，删除个数，替换内容)

11、简述css中position属性为absolute和relative的区别。
答：
1、position：relative 相对定位
特点：
1）不影响元素本身的特性；
2）不使元素脱离文档流（元素移动之后原始位置会被保留）；
3）如果没有定位偏移量，对元素本身没有任何影响；
4）提升层级。
注：定位元素位置控制：top/right/bottom/left 定位元素偏移量
2、position：absolute 绝对定位
特点：
1）使元素完全脱离文档流；
2）使内嵌支持宽高；
3）块属性标签内容撑开宽度；
4）如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
5）相对定位一般都是配合绝对定位元素使用；
6）提升层级

12、简述domready和onload事件的区别？图片的onload和domready和页面onload的先后顺序，并简述原因。
答：
DOM文档加载的步骤为：
1.解析html结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码
4.dom树构建完成 // DOMContentLoaded
5.加载图片等外部文件
6.页面加载完毕 // window.onload
可以通过addEventListener测试一下结果
先DOMContentLoaded也即domready；
然后img的ready；
最后window的ready。

13、描述一个你在实际项目中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？
知识点：
文档布局（text）
文档流本质是 nomal flow （普通流、常规流）
元素在文档中的特点 块级元素，和内联元素。
块级元素：是自带有这行效果，在文档中独占一行的效果，块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默认被内容撑开。
内联元素：内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。在文档流中，内联元素的宽度和高度默认都被内容撑开。 什么是文档流（文档布局）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。
缺点：在移动端不可以使用pc端的页面，两个页面的布局是不一致的，移动端需要自己再设计一个布局并使用不同的域名呈现

浮动布局（float）
浮动一般用于让块级元素排成一行在同一行显示
任何元素都可浮动，如一个元素设置为浮动元素，浮动元素无论最初是什么都会变成一个行块级元素，拥有disolay：inline-block属性float：left沿着父容器顶部向左推入容器，如果卡住推不动，判断当前位置能否全部显示该子容器，如果能完成 如果不能继续找空档往里推
缺点：脱离文档流，需要清除浮动，高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素）。
优点：兼容性好，计较简单容易上手
清除浮动
清除浮动是为了父级元素所在容器中的block-level box布局不产生影响所以在浮动布局情况下，让父级得适合的高度
最后在同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局浮动布局的盒子宽度在没有设定时会自适应内容宽度

定位布局（position）
relative属性：脱离文档流，但保留占位符，其偏移位置是相对于本身在正常文档流中时的位置， 脱离文档流是说设置了relative属性之后，元素不在z-index：0；的正常文档流中，其z-index的值>0但保留占位符，就是在正常文档流中位置依旧保留着，后续元素不能占位，然后相对于本身正常位置进行偏移。
absolute：完全脱离文档流，不保留占位符，其元素定位是相对于其父级以上，一直追溯至设置了position：relative或fixed属性的外层元素（也包含块元素），如果其外层元素均匀未设置position属性，则定位是相对于HTML文档进行的绝对定位，并不是相对于body的定位
缺点：脱离文档流，会导致后续元素全部脱离文档流，可用行差。
优点： 就是 让元素拥有了 inline-block 宽高限制

流式布局（streaming）
元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下不能正常显示
使用百分比定义宽高大多数都是用px来固定住，可以根据可视区域（viewport）和父元素的尺寸进行调整，尽可能的适应各种分辨率，往往max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读页面。这种布局方式在WEB前端开发的时早期历史上，用来应对不同尺寸的pc屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果长度过大，那么在相对其原始设计而言过小或过大的屏幕都不能在屏幕上正常的显示。
因为宽度使用百分比（%）来定义，但是高度和文字大小等大都是用px来固定。所以在大屏幕的手机下显示效果变成有些页面元素宽度被拉的很长，但是高度，文字大小文字还是和原来一样，享受到非常的不协调
缺点：如果尺度过大或者过小在屏幕上就不能正常显示
优点：兼容性比较好，当屏幕分辨率变化时元素大小不变布局也不变

弹性布局（rem/em）
弹性布局是css3引入的布局方式，用来代以前的WEB开发人员的一些复杂易错的hacks方法（如float实现流失布局）
rem是相对于html元素的font-size大小而言的，而em是相对于其父元素，使用rem单位的弹性布局在移动端比较受欢迎使用。
、这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。
浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。
缺点：浏览器的兼容性比较差只能到ie9以及以上。
优点：适应性强，在做不同屏幕分辨率的界面时非常使用，可以随意按照宽度，比列划分元素的宽高，实现快捷，易维护。简单，方便，快速。

自适应布局（adaptation）
自适应布局分辨为不一样屏幕分辨率定义布局，可以创建多个静态布局，每一个静态布局对应一个分辨率范围，屏幕分辨率变化时，页面里面的元素的位置会变化而大小不会变，可使用(@media媒体查询)给不同的尺寸和介质的设备切换不同的样式在优秀的响应范围设计下可以给配范围内的设备最好的体验，在同一个设备下实际还是固定的布局
缺点：如果需要不同页面那么还需要写多页的代码
优点：屏幕分辨率变化时，页面里面元素的位置变化而大小不会变化

响应式布局（ BootStrap）
为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。响应式几乎已经成为优秀页面布局的标准，每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
缺点：媒体查询是有限的，也就是可以枚举出来的，只能 适应主流的宽高，要匹配足够的屏幕大小，工作量比较大，设计也需要多个版本
优点：适应pc和移动端，如果只够的耐心，效果会很完美。

14、Ajax是什么？Ajax的交互模型？同步和异步的区别？如何解决跨域问题？
答：
一、Ajax是什么？
1、Ajax全称asynchronous javascript and xml ，可以说是已有技术的组合。
2、主要用来实现客户端与服务器的异步通信效果，实现页面的局部刷新
3、ajax的实现过程：
a.创建XMLHttpRequest对象，也就是创建一个异步调用对象
b.创建一个新的http请求，并指定该http请求的方法、URL以及验证信息
c.设置响应http请求状态变化的函数
d.发起http请求
e.获取异步调用返回的数据
f.使用javascript 和 dom 实现局部刷新
二、同步、异步的区别
同步:阻塞的 两人吃饭。一人忙，一人等
异步:非阻塞的 两人吃饭。一人忙，另一个不等
三、如何解决跨域问题？
理解跨域的概念:协议、域名、端口都相同是同源，否则都是跨域
解决:动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据。

15、简述instanceof和type的区别？简述[]instanceof Object的值和原因？
答：type 获取对象的基本类型，常用于判断对象是否赋值，instanceof 返回对象的类。
[]instanceof Object 的值为true。

16、编写一个函数isMerge，判断一个字符串str是否可以由其他两个字符串part1和part2组合而成。组合的规则如下：

1. str中的每个字母要么来自于part1，要么来自于part2;
2. part1和part2中字母的顺序与str中字母的顺序相同。
   答：

function isMerge(s, part1, part2) {
    var p1 = part1.split(''),
    p2 = part2.split('');
 
    for(var i = 0;i < s.length; i++){
        if (p1.indexOf(s[i]) > -1) {
            p1.shift();
        } else if (p2.indexOf(s[i]) > -1) {
            p2.shift();
        } else {
            return false;
        }
    }
    return true;
}

17、给 Array 本地对象增加一个原型方法，它用于删除数字数组中重复的数字（可能有多个），返回值是一个包含被删除的重复条目的新数组。
答：Array.prototype.deleteSame = ()=>{return Array.from(new Set(arr))};

18、【编程题】
小 S，小L，小P，小R和小H 五个人排队站在一个出售’克隆可乐’的自动贩卖机前；队伍中除了他们五个没有其他人 。 队形如下 ：
小 S，小L，小P，小R，小H 。队列的第一个人（小S）买了一听可乐，喝下去后变成了两个小S，然后两个小S心满意足的站到了队伍的最后。
此时队形变成了这样： 小 L，小P，小R，小H，小S，小S
然后队列中下一个人 （小L）也买了听可乐，喝下去后变成两个人，站到了队伍最后。以此类推。例如小P第三个喝了克隆可乐，之后队伍变成这个样子：
小 R，小H，小S，小S，小L，小L，小P，小P
请问第 n个喝这个饮料的人是谁？
答：

var arr=['S','L','P','R','H'],temp,count=0;
while(count!=n){
    temp=arr.shift();
    count++;
    arr.push(temp);
    arr.push(temp);
}
console.log( temp);