广东砺云教育科技前端面试

2021.03.11 广东砺云教育科技有限公司

CSS布局

float

属性：left（向左浮动），right（向右浮动），none（默认不不浮动）

清除浮动clear：left、right、both(清除左右浮动的影响)

子元素浮动会造成父元素高度塌陷

1、在父元素添加一个新的元素为其设置clear：both

2、为父元素添加overflow：hidden属性

3、为父元素添加伪类：after，对其设置clear：both

清除浮动的几种方式

1）父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2）父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好

3）结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

flex弹性布局

box需要添加弹性布局的父元素；item弹性容器中的每一个子元素

给父元素添加display：flex（块级元素）或者display：inline-flex（行级元素）属性，可使容器内容采取弹性布局显示

作用于容器的属性：flex-direction：row默认；flex-wrap：nowarp默认不换行；justify-content主轴对齐：flex-start、flex-end、center、space-between、space-around；align-items交叉轴对齐：stretch默认占满整个高度；

作用于项目的属性：order项目排序、flex-grow项目放大比、flex-shrink项目缩小比

promise

早期JS会陷入回调地狱(callback hell)，获取第一份数据之后再获取第二份数据，获取到第二份数据后再获取第三份数据…这样的嵌套回调太多了就特别乱，就像地狱一般，回调地狱是因为嵌套函数存在耦合性，一旦有所改动就会牵一发而动全身

假设多个请求存在依赖，可能代码就会如下：

function firstAjax(){
 ajax(url,()=>{
 	//处理逻辑
 	secondAjax()
 })
}
function secondAjax(){
 ajax(url2,()=>{
 	//处理逻辑
 })
}
ajax(url,()=>{
	//处理逻辑
	firstAjax()
})

嵌套的回调地狱的问题导致了promise的出现，也就是说promise的出现，解决了callback嵌套的回调地狱(callback hell)问题

promise解决了上述的回调地狱问题

ajax(url).then(res=>{
	console.log(res)
	return ajax(url1)
}).then(res=>{
	console.log(res)
	return ajax(url2)
}).then(res=>{
	console.log(res)
})

Promise有哪三种状态？如何变化？

Promise三种状态：pending、fulfilled、rejected

状态变化：

1.pending–>fulfilled(成功了)

2.pending–>rejected(失败了)

状态变化是不可逆的

状态的表现

1.pending状态，在过程中，没有结果，不会触发then和catch

2.fulfilled状态的Promise会触发后续的then回调函数

3.rejected状态的Promise会触发后续的catch回调函数

then和catch改变状态

then正常返回fulfilled的Promise对象，里面有报错则返回rejected的Promise对象

catch正常返回fulfilled的Promise对象，里面有报错则返回rejected的Promise对象

resolve---->then
then 中是一个正常return ，得到resolve ，可以继续执行 .then里面的内容
then 中是一个throw error，得到reject，不能执行后面的 .then
rejected---->catch
catch 中是一个正常return ，得到resolve可以继续执行 .then里面的内容
catch 中是一个error，得到reject ，不能执行后面的 .then，可以执行catch

Promise.reject(reason)返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法catch

Promise.resolve(value)返回一个状态为成功的Promise对象，并将成功信息传递给对应方法then

resolve状态的Promise会触发后续的then回调函数

var p = Promise.resolve().then(()=>{
  return 100
})
//Promise.resolve()返回fulfilled状态的Promise对象，然后then执行完不报错，还是返回一个fulfilled状态的Promise
console.log(p)   //100 Promise { <state>: "fulfilled", <value>: 100 }
p.then((res)=>{
  console.log(res)   //传进来p返回的100
})      Promise { <state>: "fulfilled", <value>: undefined }
p.then(()=>{   // 传进来p返回的100，但是没有使用，打印123
  console.log(123)
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xscJCwL-1617416224365)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444485430.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dxQLPExo-1617416224371)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444692327.png)]

var p1 = Promise.resolve().then(()=>{
  throw new Error("then erroe")
})
//Promise.resolve()返回fulfilled状态的Promise对象，然后then执行完报错了！返回一个rejected状态的Promise
console.log(p1)  Promise { <state>: "rejected", <reason>: Error }
p1.then(()=>{   // rejected状态的Promise后续会触发catch而不是then,所以输出111111
  console.log(123456)  
}).catch(()=>{
  console.log(111111); Promise { <state>: "fulfilled", <value>: undefined }
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8IXHw2h-1617416224375)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444927457.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bHDi4qFi-1617416224382)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444933828.png)]

rejected状态的Promise会触发后续的catch回调函数

var p2 = Promise.reject("my error").catch(err=>{
  console.log(err);   //my error
})  //p2是一个reject，但是执行了catch，而且正常执行了，返回resolved
console.log(p2)  Promise { <state>: "fulfilled", <value>: undefined }
p2.then(()=>{
  console.log("p2之后触发了then")   //p2之后触发了then
})   Promise { <state>: "fulfilled", <value>: undefined }

p2.catch(()=>{
  console.log("p2之后触发了catch")   //不执行catch的内容
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V6egxi53-1617416224392)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455096795.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JaDF0NYk-1617416224399)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455104722.png)]

var p3 = Promise.reject("my error2").catch(err=>{
  throw new Error("err")  //p3是reject，执行catch，但是catch中报错了，返回reject
})
console.log(p3)//Promise { "rejected" } <state>: "rejected"<reason>: Error: err
p3.then(()=>{
  console.log("p3之后触发的then")  //不执行
})     Promise { <state>: "rejected", <reason>: Error }
p3.catch(()=>{
  console.log("p3之后触发的catch")  //p3之后触发的catch
})     Promise { <state>: "fulfilled", <value>: undefined }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GuJWrpKR-1617416224407)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455541478.png)]

Promise.resolve().then(()=>{
    console.log(1);
}).catch(()=>{
    console.log(2);
}).then(()=>{
    console.log(3);
})
//1 3

resolve().then()执行成功返回的是resolve()只会执行then()而不会执行catch()

Promise.resolve()返回一个fulfilled状态的Promise后续触发then回调，然后打印1，then执行完返回fulfilled状态的Promise，然后再执行then，打印3，返回返回fulfilled状态的Promise。因为没Error，没有rejected状态的Promise，所以不会触发catch回调。

Promise.resolve().then(()=>{
    console.log(1);
    throw new Error("err")
}).catch(()=>{
        console.log(2);
}).then(()=>{
    console.log(3);
})
//1 2 3

第一个then中有throw err 出错了，相当于reject，reject执行catch，所以catch里面的内容正常执行，catch正常执行了，相当于resolve，resolve会执行then

Promise.resolve()返回一个fulfilled状态的Promise后续触发then回调，然后打印1，执行throw new Error(‘erro1’);返回一个rejected状态的Promise，触发catch回调函数，打印2，接着返回fulfilled状态的Promise，触发后面then的回调，打印3，返回一个fulfilled状态的Promise。

Promise.resolve().then(()=>{
    console.log(1);
    throw new Error("err")
}).catch(()=>{
        console.log(2);
}).catch(()=>{
    console.log(3);
})
// 1 2 

第一个then执行，里面有err ,相当于reject，执行catch，catch成功执行了，相当于resolved，执行then，不执行catch，所以2执行，3不执行

打印2之后返回的是fulfilled状态的Promise，后面没有then，所以不打印3。catch里面只要没报错Error，那么就是fulfilled状态的Promise。

不要忽略最后的返回值，返回值会链式传递给下一个回调，只不过我们这里的例子没有强调返回值，等于return undefined；如果then/catch回调函数有形参，而上一个回调函数有返回值，那么返回值会作为下一个回调的形参。

网络请求的原理（看书了解多一点）

前端发起一个网络请求

• 传入基本参数（url，请求方式）
• 请求参数、请求参数类型
• 设置请求头
• 获取响应的方式
• 获取响应头、响应状态、响应结果
• 异常处理
• 携带cookie设置
• 跨域请求

前端进行网络请求的方式

• form表单、ifream、刷新页面
• Ajax - 异步网络请求的开山鼻祖
• jQuery - 一个时代
• fetch - Ajax的替代者
• axios、request等众多开源库

原生 Ajax 的用法

var xhr = new XMLHttpRequest();
xhr.open('post','www.xxx.com',true)
// 接收返回值
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 ){
        if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(xhr.responseText);
        }
    }
}
// 处理请求参数
postData = {"name1":"value1","name2":"value2"};
postData = (function(value){
var dataString = "";
for(var key in value){
     dataString += key+"="+value[key]+"&";
};
  return dataString;
}(postData));
// 设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 异常处理
xhr.onerror = function() {
   console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;
// 发出请求
xhr.send(