css
css选择器:
bfc:
(猿辅导)
css 中的盒模型,怎么切换
flex布局的理解,居中的方式
[答: ]
我们传统的布局方式是基于在盒子模型下的,依赖于display属性的,position属性的或者是float属性的,但是在传统的布局上面并不好布局;
Flex 容器有如下6个属性
flex-direction :该属性决定主轴的方向(即项目的排列方向)。row从左到右,row-reverse相反,column从上到下,column-reverse相反
flex-wrap:控制伸缩容器是单行还是多行,nowrap默认单行显示不换行,wrap换行,第一行在上方,wrap-reverse伸缩容器多行显示,第一行在下方
flex-flow:该属性是flex-direction伸缩项目主轴方向属性和flex-wrap 换行属性的简写形式
justify-content:定义伸缩项目在主轴上的对齐方式 center,flex-start/end,space-between两端对齐
align-items: 伸缩项目在y轴对齐方式,主轴x轴,交叉轴就是y轴, justify-content和align-items是一对,前者分别定义主轴和侧轴的 方向,后者分别定义主轴和侧轴中项目的 对齐方式
align-content:调准伸缩行在伸缩容器里的对齐方式,flex-start交叉轴起点对齐 flex-end交叉轴终点对齐。center交叉轴中点对齐
清除浮动
方法一:使用带clear属性的空元素
在浮动元素后使用一个空元素如
.clear{clear:both;}。属性即可清理浮动
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;
方法三:使用CSS的:after伪元素
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动
.clearfix:after{ display: block; height: 0; clear: both; visibility: hidden; }
解释下css3 的 Flexbox ( 弹性盒布局模型) 以及适用场景?
css 中动画的相关属性 ( 红包雨的实现)
css3新属性动画 animation,和摇骰子动画类似
加css transation样式,trasation 里面加 animation 定义执行动画的轨迹和时长,
具体介绍下红包雨的实现方式
@keyframes
0% {
transform: translateY(-300px);
-ms-transform:translateY(-300px);
-webkit-transform:translateY(-300px);
}
JavaSctipt
(美团 start)
重绘 和 重排
参考https://segmentfault.com/a/1190000016990089
什么适合重绘
callback 改写成 promise
参考实例 https://blog.csdn.net/fuweilian1/article/details/78965783
https://www.jianshu.com/p/8fd80c368570
【答】
把传统的callback回调改写成es6中promise风格
1.传统的callback回调方式
let callFn = (arg1,arg2,cb)=>{//如果arg1>arg2回调正常,否则回调错误信息
setTimeout(function(){
if(arg1>arg2){
cb(null,arg1+arg2);
}else{
cb(new Error('err'),null);
}
},5000);
}
//调用
callFn(1,2,function(err,data){
if(err){
//错误处理
}else{
//正确处理
}
});
2.使用es6来写上面的功能
let promiseFn = (arg1,arg2)=>{
return new Promise((resole,reject)=>{
if(arg1>arg2){
resole(arg1+arg2);
}else{
reject(new Error('err'));
}
});
};
//调用
promiseFn(1,2).then(data=>{
//正确处理
}).catch(err=>{
//错误处理
});
延伸
将 jquery 的 ajax 方法封装为 Promise 方法
function post (url, params) {
return new Promise(
(resolve, reject) => {
jQuery.ajax({
url,
data: {...params},
type: "post",
success: function (res) {
resolve(res)
},
error: function (res) {
reject(res)
}
})
}
)
}
异步请求,使用 then 和 catch
function asyncPost () {
console.log('==== 异步请求 start =====')
post(
'http://removeUrl',
{
foo: 'qwwerwer'
}
).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
console.log('==== 异步请求 end =====')
}
同步请求,使用 async 和 await
async function syncPost() {
try {
console.log('==== 同步请求 start =====')
let res = await post(
'http://removeUrl',
{
foo: 'qwwerwer'
}
)
console.log(res)
console.log('==== 同步请求 end =====')
} catch (e) {
console.log(e)
}
}
promise 的三种状态,以及转换
promise有三种状态: pending未决定、reslove成功、rejected拒绝
catch() 后面跟一个 then 会怎么执行
【参考】promise链式调用 https://www.jianshu.com/p/dc61ea153874
【答】
发生的异常被catch捕获到之后,执行完catch中的代码后,还是会继续执行.then中的代码。
如果想要阻止后续代码继续执行,可以使用 throw new Error() 向外抛出错误,或者使用promise的reject()。
**1、正常执行的代码如果第一句出现异常,就不会执行第二句以及后面的所有正常代码
2、对于 try catch
finally而言,无论是否出现异常,异常是否被catch捕获,finally中的代码都会被执行,
即使 try 或者 catch 中有 return 语句,finally 中的代码还是会执行,finally 执行完后,如果try中的异常被catch捕获,就会继续执行try
catch外面的其他无关代码,如果没有被捕获,就会继续向外抛出异常,即中断执行后续所有代码。 **
如下所示:
try{
正常执行的代码
}catch (e){
出错后执行的代码
}finally{
无论正常执行还是出错,之后都会执行的代码
} //跟上面try catch无关的代码
给一个array 的对象增加一个 max 方法,用math.max 来写
给 array 的构造函数来增添这个 max 方法
事件冒泡
【参考】https://www.cnblogs.com/moqing/p/5590216.html
【答】
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){alert(1);};
div1.onclick = function(){alert(2);};//父亲
//html代码
<div id="div1">
<div id="div2"></div>
</div>
就是两个父子关系的div,然后分别加了点击事件,当我们在div2里面点击的时候,会发现弹出了一次1,接着又弹出了2,这说明点击的时候,不仅div2的事件被触发了,它的父级的点击事件也触发了,这种现象就叫做冒泡。
并且点击事件给页面显示出来的位置是没关系的,而是跟html代码中的位置有关系
如何解决事件冒泡 有两种方式
标准的W3C 方式:e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法,调用即可
非标准的IE方式:ev.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性,设为true就可以了
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
当需要阻止浏览器默认行为时,可以使用
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}
call apply bind 的区别
v8 中的垃圾回收?
js的基本数据类型,有哪些判断类型的方法?
原型链? 如何继承? 有哪些方式? (常考)
作用链域 ? (常考)
什么是闭包 (closure),为什么要用它 ?
promise 的工作原理是怎么样的?
【参考】https://blog.csdn.net/weixin_45073548/article/details/102867617
什么是Promise
Promise是ES6新增的解决异步(非阻塞)中存在的问题而产生的构造函数
Promise中的三种状态
pending(进行中) resoved(成功后) rejected(失败后)
Promise.prototype.then : 当promise的状态返回resove时,则调用then() 方法
Promise.prototype.catch :当promise的状态返回reject时,则调用catch()方法
构建promise的格式
new Promise(function(resolve,reject){
处理语句;
if(成功){
resolve();
}else{
reject();
}
}).then(function(){
执行语句;
}).catch(function(){
执行语句;
})
(美团 end)
(拼多多二面基础)
ES6 的新增特性:
[答]
字符串扩展
ES6为字符串扩展了几个新的API:
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
数组新增了map reduce 方法
map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)
打印: {"1","20","-5","3"}
[1,20,-5,3]
promise 我们可以通过Promise的构造函数来创建Promise 对象,并在内部封装一个异步执行的结果。
语法:
const promise = new Promise(function(resolve, reject) {
/执行异步操作/
if ( /异步操作成功/){
resolve(value); /调用resolve,代表Promise将返回成功的结果/
} else {
reject(error); /调用reject,代表Promise会返回失败结果/
}
});
如果我们想要等待异步执行完成,做一些事情,我们可以通过promise的then方法来实现,语法:
promise.then(function(value){
// 异步执行成功后的回调
});
如果想要处理promise异步执行失败的事件,还可以跟上catch:
promise.then(function(value){
// 异步执行成功后的回调
}).catch(function(error){
// 异步执行失败后的回调
})
示例:
const p = new Promise(function (resolve, reject) {
/这里我们用定时任务模拟异步/
setTimeout(() => {
const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
resolve("成功!num:" + num)
} else {
reject("出错了!num:" + num)
}
}, 300)
})
p.then(function (msg) { /调用promise/
console.log(msg);
}).catch(function (msg) {
console.log(msg);
})
模块化
模块化就是把代码进行拆分,方便重复利用。类似java中的导包:要使用一个包,必须先导包。
而JS中没有包的概念,换来的是 模块。
模块功能主要由两个命令构成:export 和 import。
export命令用于规定模块的对外接口,
import命令用于导入其他模块提供的功能。
export
我可以使用 export 将对象导出:
const util = {
sum(a,b){
return a + b;
}
}
export util;
/简写方式/
export const util = {
sum(a,b){
return a + b;
}
}
/export不仅可以导出对象,一切JS变量都可以导出。/
/比如:基本类型变量、函数、数组、对象。/
/export输出/
var name = "jack". var age = 21
export {name,age}
/导入前面导出的name和age /
import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了")
import
/无需声明对象的名字/
export default {
sum(a,b){
return a + b;
}
}
/导入util/
import util from 'hello.js'
/调用util中的属性/
util.sum(1,2)
set和map
ES6 还有哪些对象? (proxy 和 reflect )
【参考】https://www.jianshu.com/p/9e07f182859b
symbol 类型有什么特点 ? 与 Number, String 有什么不同?
symbol 类型的唯一性怎么理解 ?
set, map怎么理解?
从 set 转成 一个数组怎么做 ?
set 元素的特点 ?
两个 NaN 恒等的吗?为什么?
两个 symbol 类型的值是一样的,这两个 symbol 相等吗?
promise 的 then 为什么是 异步的 ?(从 微任务 和 宏任务 解释 )
DOM 的 api 分为几级?
常用的 dom 的 操作方法?
事件捕获和事件冒泡 怎么理解 ?
怎么阻止 事件的冒泡 ?
项目中用到了什么样式? 使用的 css 还是 less ?
对 css 动画有了解吗? 序列帧 怎么定义 ?
样式里的 清除浮动 怎么设置 ? 为什么这样设置?
浏览器缓存有哪几种 ?
html5 新特性有哪些了解
localstorage 和 cookie 的区别
1 localStorage拓展了cookie的4K限制 5M
2 localStorage会可以将第一次请求的数据直接存储到本地,
这个相当于一个5M大小的针对于前端页面的数据库,
相比于cookie可以节约带宽,
但是这个却是只有在高版本的浏览器中才支持的
3 localStorage有setItem、getItem、removeItem、clear等方法,
cookie需要我们自己来封装setCookie、getCookie、removeCookie
4 每次访问都要传送cookie给服务器,浪费带宽。
生命周期:localStorage:localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。
了解单点登陆吗?
块作用域 你了解吗?
块作用域 和函数作用域的 区别是什么 ?
了解闭包吗?
type 和 interface 的区别是什么?
interface 可以 merge 可以 extends 但是 type 不行
框架面试题: vue & react
vue和react 区别(美团)
mvc 和 mvvm 区别
如何实现双向数据绑定
假设 a 组件( b 组件,c组件),如何实现 b ,c 组件的通信
生命周期:
vue :
react:
react 里面的高阶组件怎么理解?
有过高阶组件的使用场景马?
redux 使用connect 包裹出来的不是高阶组件吗?
reactHooks 了解哪些?
讲讲 redux 是用来做什么的?
用户发出action, 然后 store 自动电用 reducer,并且传入两个参数: 当前 state 和 收到的 action, reducer 会返回新的 state, state 一旦有变化, store 就会 调用监听函数, listener 可以通过 sotre.setstate() 得到当前状态,如果 使用的是 react ,这是可以 触发重新渲染 view
网络 (美团)
计算机网络七层 是 哪七层 ,七层分别的作用是啥
应用层、表示层、会话层、传输层、网络层、数据链路层、物理层
应用层 :
表示层:
会话层:
传输层:
网络层:
数据链路层:
物理层:
http,tcp 的作用是啥
tcp 和 udp 的区别,什么适合用udp
浏览器访问页面的过程
什么是跨域,如何解决, jsonp ,cors, jsonp 原理
算法 & 编程 (美团)
**数据结构学了哪些 ?
**了解哪些排序悬法? 时间空间复杂度, 以及稳定性?
**写一个队列
**二叉树的最大深度?
实现一个 bind
笔试: js实现反转字符串 (拼多多)