Fsskay面试题整理

HTML部分

1.语义化
是什么:举例<p><section><table><footer>
为什么:易读易维护,有利于seo
怎么做:少用div

2.meta viewport 是做什么用的，怎么写？
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
适应移动端屏幕

3.HTML5新特性
智能表单input,绘图画布SVG Canvas,多媒体Audio Video,地理定位,数据储存,多线程

CSS部分

1.盒模型

W3C盒模型 纯content模型:盒宽度是指content的 ，box-sizing:content-box
IE盒子模型 border以内的模型::盒宽度是指(content+padding+border)的 IE的被称为“border-box”

2.居中/垂直居中

• 水平居中：

行内元素：父容器身上写 text-align:center;
块级元素：
*

1. (1)有宽度:margin和width实现水平居中(margin:0 auto)
   margin-left: auto; margin-right: ;width:100px
   (2)无宽度(变行内元素):子元素display:inline-block,父元素text-align:center

2. 使用定位,父相对定位,子绝对定位,子元素left:50%.
   (1)有宽度:子元素的 margin-left: -元素宽度的一半px;
   (2)无宽度:transform: translateX(-50%);

3. 使用flex,父元素写 display: flex; justify-content: center;

• 垂直居中：

单行行内元素: line-height
多行行内元素:display:table-cell;vertical-align:middle
块级元素:

1. 使用inline-block,无宽度(变行内元素):子元素display:inline-block,父元素vertical-align:middle

2. 使用定位,父相对定位,子绝对定位,子元素top:50%.
   (1)有宽度:子元素的 margin-top: -元素宽度的一半px;
   (2)无宽度:transform: translateY(-50%);

3. 使用flex,父元素写 display: flex; align-content: center;

无论是水平还是垂直,水平垂直居中就结合着使用:
记一下都有inline-block,position,flex三种方法

3.选择器优先级
选择器越具体，优先级越高。 #xxx 大于 .yyy
同样优先级，写在后面的覆盖前面的。
color: red !important; 优先级最高。

4.BFC是什么?
块格式化上下文
https://www.jianshu.com/p/0d713b32cd0d
第一个作用：使 BFC 内部的浮动元素不会到处乱跑。

第二个作用：使 BFC 内部的浮动元素产生边界

如何创建BFC
1、 float:left ------------- float的值不是none。
2、 position:fixed -------------- position的值不是static或者relative。
3、 display:inline-block --------display的值是inline-block、table-cell、flex、table-caption或者inline-flex 等弹性元素
4、 overflow:hidden ------ overflow的值不是visible

浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素
overflow 值不为 visible 的块元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）

6.清除浮动

1.   overflow: hidden 
2.  .clearfix 
 	.clearfix::after{
     content: ''; display: block; clear:both;
	 }

7.外边距重叠
margin重叠,方法一:加空标签 方法二:调整margin距离

8.padding值包含到元素的宽高中
css3的box-sizing,三个属性值：如下

box-sizing：content-box | border-box | inherit
其中border-box就是规定padding所占有像素也归并进我们设置的width值里去

9.display:none不占位置与visibility:hidden占位置的区别
1、作用不同

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。
2、使用后HTML元素有所不同

visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

10.CSS元素选择器和动画属性
元素\ID\类\子\兄弟 选择器,
transition/animation/transform/rotate

JS部分

1.数据类型

2.Promise

背代码 Promise 用法

 function fn(){
     return new Promise((resolve, reject)=>{
         成功时调用 resolve(数据)
         失败时调用 reject(错误)
     })
 }
 fn().then(success, fail).then(success2, fail2)
 
背代码 Promise.all 用法

 Promise.all([promise1, promise2]).then(success1, fail1)
promise1和promise2都成功才会调用success1

背代码 Promise.race 用法

 Promise.race([promise1, promise2]).then(success1, fail1)
promise1和promise2只要有一个成功就会调用success1；
promise1和promise2只要有一个失败就会调用fail1；
总之，谁第一个成功或失败，就认为是race的成功或失败。

3.AJAX,异步javascript与XML

let a = new XMLHttprequest();
a.open('GET',URL,TRUE)

a.onreadystatechange= ()=>{
 if(a.readystate === 4 && a.status ===200){
 	console.log(a.responseText)
 }
}
a.send();

JQuery

$.ajax({
    url: 'xxx.php',
    method: 'GET',
    data: {
        name: 'Byron',
        age: 24,
        sex: 'Male'
    }
}).done(function(result){
    console.log(result);
}).fail(function(jqXHR, textStatus){
    consloe.log(textStatus);
});

4.闭包
通过一个函数内在设一个函数,获取内部的变量,将变量保存在内存里

function A(){
	let n =999;
	function B(){
		console.log(n)
	}
	return B
}

var result = A()
result()
// 999

5.this
1.全局环境:this指window
2.构造函数中,this指实例对象 new Promise
3,在函数中，this 表示全局对象。 function myFunction() {return this;}
在函数中，在严格模式下，this 是未定义的(undefined)。
4.对象的方法,属性或方法“当前”所在/所属的对象。
5.事件中,this 表示接收事件的HTML元素。 如button

6.立即执行函数

(function () {alert("我是匿名函数")}())   //用括号把整个表达式包起来
(function () {alert("我是匿名函数")})()  //用括号把函数包起来
!function () {alert("我是匿名函数")}()  //求反，我们不在意值是多少，只想通过语法检查
+function () {alert("我是匿名函数")}() 
-function () {alert("我是匿名函数")}() 
~function () {alert("我是匿名函数")}() 
void function () {alert("我是匿名函数")}() 
new function () {alert("我是匿名函数")}() 

作用:
1.不必为函数命名，避免了污染全局变量
2.立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量
3.封装变量

7.async/awaite语法
async是Generator函数的语法糖
async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await

await的两种情况:1.await命令后面是一个 Promise 对象，返回该对象的结果

在线账本中的代码

目的是什么？把异步代码写成同步代码。

8.浅拷贝深拷贝

基本数据类型(一般存储在栈中,可理解为别墅)：number，string，boolean，null，undefined，symbol等；
引用数据类型(一般存放在堆中,可理解为公寓)：object（{}对象，数组[]），function函数等；

A.基本数据类型


结果是不影响

B.引用数据类型–属性名存在栈内存中，属性值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值
下面的就是浅拷贝

如何深拷贝?
1.JSON方法

 var a = {...}
 var b = JSON.parse( JSON.stringify(a) )

缺点：JSON 不支持函数、引用、undefined、RegExp、Date……

2.递归拷贝
object如果是对象,先给object2一个容易,然后遍历clone

 function clone(object){
     var object2
     if(! (object instanceof Object) ){
         return object
     }else if(object instanceof Array){
         object2 = []
     }else if(object instanceof Function){
         object2 = eval(object.toString())
     }else if(object instanceof Object){
         object2 = {}
     }
     for(let key in object){
         object2[key] = clone(object[key])
     }
     return object2
 }

9.数组去重new Set()
ES5
一个值如果在新数组内不存在,那么他的indexOf输出为-1

function 去重(targetArray){
    var newArray = [];
    for (let i=0;i<targetArray.length;i++){
        if(newArray.indexOf(targetArray[i])===-1){
            newArray.push(targetArray[i])
        }
    }
    return newArray
}

ES6语法 let set=new Set()

10.如何使用正则实现string.trim()
首先string.trim()是删除字符串的头尾空白符 /^\s+|\s+$/g

function myTrim(x) {
  return x.replace(/^\s+|\s+$/gm,'');
}

**11.JS原型是什么 prototype JS继承呢? prototype /extends **
举例
var a = [1,2,3]
只有0、1、2、length 4 个key
为什么可以 a.push(4) ，push 是哪来的？
a.proto === Array.prototype
push 就是沿着 a.proto 找到的，也就是 Array.prototype.push
Array.prototype 还有很多方法，如 join、pop、slice、splice
Array.prototype 就是 a 的原型（proto）

12.捕获与冒泡
JS冒泡 (冒泡就是捕获的反向)
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。
　　在前端开发中，有时我们需要阻止冒泡和阻止默认事件的发生。
　　一、event.stopPropagation()
　　阻止事件的冒泡，不让事件向documen上蔓延，但是默认事件任然会执行，当调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。
　　二、event.preventDefault()
　　阻止默认事件的方法，调用此方法时，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
　　三、return false；
　　这个方法比较暴力，会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return
false就等于同时调用了event.stopPropagation()和event.preventDefault()。

<div><p>Hello world</p></div>
// 点击以后的结果
// Tag: 'DIV'. EventPhase: 'capture' 捕获阶段
// Tag: 'P'. EventPhase: 'target' 目标阶段
// Tag: 'P'. EventPhase: 'target' 目标阶段
// Tag: 'DIV'. EventPhase: 'bubble' 冒泡阶段

13.区分slice切片、splice拼接、split分割字符串为字符串数组、join字符串变数组方法

slice数组 arrayObject.slice(start,end)

slice (字符串) stringObject.slice(start, end)

splice (数组)
arrayObject.splice(start, deleteNumber, item1,… )
注：该方法会改变原数组

split分割字符串为字符串数组
stringObject.split(separator, maxLength)
参数
separator (必选) ：分割字符串的指定位置（字符串或正则表达式），为（”）空字符时，字符串的每个字符都将被分割。

maxLength(可选) ： 返回字符串数组的最大长度（number）, 需返回数组的一部分使用此项。没有时，返回整个字符串分割的数组，不考虑长度。

join (数组)
arrayObject.join(separator指定的分割符)
join(" “)可以转为"123456”

15.document.write和innerhtml的区别
document.write重写整个页面
innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

16.Javascript 中 null，NaN和undefined的区别
null：值为空或者对象为空
NaN:不是数字类型
undefined：未定义，意思就是使用的属性 对象 等未声明的意思

17.数字与字符串的运算
‘11’+2 直接字符串拼接
‘11’+‘2’ 转为数字相加

18.
var A = [‘THIS’,‘IS’]
var B = [‘BAIDU’,‘GOOGLE’]
通过JQUERY拼接为’‘THIS IS GOOGLE’’, $.merge(A,B[1]).join(" ")

19.字符串反转
var str = “abcdefg” 反转输出 “gfedcba”, 记一下第一种方法就好

    //第一种方式，利用数组的reverse()方法
       var str="abc";
       var strarr=str.split('').reverse().join('');
       console.log(strarr);


    //第二种方式
       var str2="abc";
       var str2arr=str2.split('');
       console.log(str2arr);
       var arr=[];
      for(var i=str2arr.length-1;i>=0;i--){
            arr.push(str2arr[i]);
      }
      console.log('反转后的字符串为:',arr.join(''));

    //第三种方式
    var str3="abc";
    var str3arr=str3.split('');
    var arr3=[];
    for(var i=0;i<str3arr.length;i++){
          arr3.unshift(str3arr[i]);
    }
    console.log('反转后的字符串为:',arr3.join(''));

20.原生JS给奇数偶数设置不同的ID

21.[3＞2＞1]为false，[1＜2＜3]为true

首先，我们需要知道，在js中0 == false 和1 == true
由左往右运算
3>2 为false 即0 ,0>1为false;
1<2为true即1 ,1<3为true

22.localStorage和sessionStorage区别
时效性区别;localStorage本地长期保存 ,sessionStorage关闭网页消失

23.遍历与setTimeout异步

https://blog.csdn.net/Fsskay/article/details/115521610
看这个

## 一些折磨王的题

```javascript
 var a = {n:1};
 var b = a;
 a.x = a = {n:2};

问 a.x 是多少？ //undefined
问 b.x 是多少? //{n:2}

https://segmentfault.com/a/1190000008475665
--------------------------------------分割线-------------------------------

map加parseInt

 [1,2,3].map(parseInt)

 parseInt(1,0, array) // 1
 parseInt(2,1, array) // NaN
 parseInt(3,2, array) // NaN

parseInt(s,radix)解析一个字符串，并返回一个整数。radix：表示其它进制转十进制的基数，范围在2~36，不在这个范围的返回NaN。该参数可以省略或为0，这种情况会根据字符串的开头来判断基数，而且字符串string中的数字不能大于radix才能正确返回数字结果值。

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。具体规则如下：

如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。

如果 string 以 0 开头，版本低于ECMAScript 5的，基数为8。版本为ECMAScript 5的，基数为10。

如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

map方法的回调函数 function callbackfn(value, index, array1) 数组的值，值对应的索引，原数组。

["1","2", "3"].map(parseInt)

[0]=parseInt("1",0);//十进制1

[1]=parseInt("2",1);//radix不在2~36的返回NaN

[2]=parseInt("3",2);//二进制数没有3，只有0 1 ，所以NaN 

--------------------------------------分割线-------------------------------

"1 2 3".replace(/\d/g, parseInt)
// 1 NaN 3
"123".replace(/\d/g, parseInt)
// 1NaNNaN

这道题考察的两个点,一个是replace()回调函数的四个参数,另一个是parseInt()的第二个参数是进制

--------------------------------------分割线-------------------------------

(a ==1 && a== 2 && a==3) 可能为 true 吗？
a = {
  value: 0,
  toString(){
    a.value += 1
    return a.value 
  }
}

用==号进行比较时,会将类型转为同一个再比较
Object与Number比较,Object转为Number比较
对象转为Number,使用Object.valueOf()和Object.toString()来获取对应的数字基本类型。