1.父元素伸缩,自元素自适应,10像素间距
2.选择器优先级
3.浏览器对用户呈现出一个页面的过程
4.prevent default
5.事件的属性和方法
6.this指向
7.es5实现继承
8.prototype和构造函数调用关系
9.promise并行三个,将结果存入数组,滑动窗口
10.eventloop对set timeout和promise的处理
11.vue 样式模块化
12.怎样区分伪类和伪元素
13.web存储方式
14.简述instanceOf为什么不是绝对安全?
15.String对象的方法
16.实现千位分隔符 1234567->1,234,567
17.写出3个以上能改变DOM的js native函数
18.call和apply的区别
19.浏览器实现js多线程,提供原生对象是?
20.快速排序
21.二分查找
22.实现布局,子元素宽占父元素的50%,高和宽相等,自适应。
23.keep-alive原理 TCP原理,VUE组件原理
24.vue tab页跳转时, 保存之前的滚动位置
25.window load event和document DOMContentLoaded event的区别
26.给定两个排序好的数组a,b,长度分别为n,m,给出一个高效算法,查找A中的哪些元素存在于B中。
27.实现一个函数,入参是一个字符串,判断是否有重复字母,如果包含,返回第一个重复字母的下标,不包含返回-1。
28.对象数组a=[{x:7,y:6} , {x:1,y:2} , {x:3,y:4}],按照x的大小进行排序。
瓜子二手车
29.阶乘函数
30.call() apply()和bind()的区别?
31.实现tooltip, css画钝角三角形
32.判断一个对象是函数的几种方法。
33.实现商品列表,一行3个,屏幕宽度不定,商品元素间距50px,距离父元素边距50px。
34.向一个数组增加元素的方法
35.盒子模型有哪几种, width100padding10的盒子, 占据宽度是多少?
1.父元素伸缩,自元素自适应,10像素间距
答:https://www.jianshu.com/p/19538a0ffb8c
2.选择器优先级
答:
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器,!important 的属性拥有最高优先级
html
3.浏览器对用户呈现出一个页面的过程
答:dns解析-》tcp链接-》发送HTTP请求-》服务器处理请求并且返回报文-》浏览器解析渲染页面-》链接结束
DNS解析:
是一个将网址解析成IP 地址的过程。
首先从本地域名服务器中查找,如果找不到就继续向上根域名服务器查找,直到顶级域名,这个过程中存在dns优化有的环节。当查找资源时, 会先找缓存,(浏览器缓存-》系统缓存-》路由器缓存等等),也会根据机器的负载量和距离用户的位置进行dns负载均衡。
建立TCP连接:
A.客户端发送syn到服务器要求连接
B.服务端向客户端发送ack
C.客户端收到ack并确认后,向服务端发送ack,连连接建立。
发送HTTP请求:
tcp连接建立之后,开始通过HTTP协议传输资源,根据情况判断是否使用HTTPS,HTTP包括请求行,请求报头,请求正文(post,put客户端向服务器传输数据的情况)。keepalive什么的可以在请求头里添加。
服务器处理请求并返回HTTP报文:
服务端接到请求开始对tcp进行处理,对http进行解析,按照报文格式封装成HTTP request对象。响应报文码(1xx:请求已接受,2XX:成功,3xx:重定向,4xx:客户端错误,5xx:服务端错误)
浏览器渲染页面:
边解析边渲染,首先解析html,构建dom树,然后解析css,构建cssom。
我思考过很久HTML和css谁先渲染。我的理解是,不一定,看位置了,如果dom构建的过程中遇到了css的link,那就会先去加载并构建cssom,这个过程不是一次性的。css和js都是阻塞DOM树渲染的,但不阻塞DOM解析,直到js加载并且执行完毕。遇到阻塞的css也会延迟js的执行和dom构建。(因为js可能会修改dom或者cssom),css同样,当cssom构建时,js也会停止被阻塞,等待cssom构建完成。
这个过程中有两个重要的过成是回流和重绘。计算盒模型的大小位置还有解析颜色字体等 属性,这些都确定下来的时候开始repain,合成一个rendertree渲染树,render-tree中必须同时存在dom和cssom,浏览器开始布局并渲染到屏幕上。首次加载必然会经历回流和重绘的过程。
重排和重绘
无论何时总会有一个初始化的页面布局伴随着一次绘制。(除非你希望你的页面是空白的:))之后,每一次改变用于构建渲染树的信息都会导致以下至少一个的行为:
部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新。这样的更新被称为重绘。
重排和重绘代价是高昂的,它们会破坏用户体验,并且让UI展示非常迟缓。
什么情况会触发重排或重绘?
任何改变用来构建渲染树的信息都会导致一次重排或重绘。
添加、删除、更新DOM节点
通过display: none隐藏一个DOM节点-触发重排和重绘
通过visibility: hidden隐藏一个DOM节点-只触发重绘,因为没有几何变化
移动或者给页面中的DOM节点添加动画
添加一个样式表,调整样式属性
用户行为,例如调整窗口大小,改变字号,或者滚动。
一些重排可能开销更大。想象一下渲染树,如果你直接改变body下的一个子节点,可能并不会对其它节点造成影响。但是当你给一个当前页面顶级的div添加动画或者改变它的大小,就会推动整个页面改变-听起来代价就十分高昂。
每次重排重绘浏览器都会立即执行吗?
浏览器一直致力于减少这些消极的影响,浏览器会创建一个变化的队列,浏览器可以向队列添加或变更这些变化,在一个特定的时间或达到一定的数量时,执行一次重排或重绘,通过这种方式,多次重排或重绘会整合起来最终减少重排或重绘的次数,以节省浏览器渲染的开销。
所以 ,同时set和get样式是非常糟糕的做法
// no-no!
el.style.left = el.offsetLeft + 10 + "px";
如何减少重排重绘呢?
- 离线编辑样式修改,可以通过创建documentFragment临时保存变动,然后一次性更新到dom上。
- 复制要多次更新的节点,在副本上进行操作,然后一次性替换。
一个问题,为什么会遇到浏览器展示页面开始没有样式,过一会样式才可用的情况?
看到的一个答案,有可能是这个原因,但是我不确定。
开发环境会把css都打包到js里,所以要等js加载好了才有样式,因此会出现这种情况;但是在生产环境下,css会生成css文件,并插入到里,因此就不会出现这种情况了。
两个优化点:css先加载,js后加载
js尽量不要修改dom树。
js
4.prevent default
答:取消事件的默认行为,cancelable为true可以使用这个方法。
5.事件的属性和方法
答:type/target/currentTarget/cancancelable/bubbles/defaultPrevented/detail/eventPhace/trusted/view
preventDefault()/stopPropagation()/stopImmediatePropagation()
6.this指向
答:在运行时基于函数的执行环境绑定的,
在事件中,this始终指向currentTarget,
执行环境的层层嵌套形成了作用域链,在作用域链中访问变量只能自底向上搜索。
7.es5实现继承
答:
构造函数,原型,实例之间的关系?
每个构造函数都有一个原型对象,每个原型对象都有一个指向构造函数的指针,每个实例有一个指向原型的指针。继承本质上是重写原型对象,将原型代之以另一个类型的实例。
A.父类构造函数
function SuperType(name){
this.name = name;
this.numbers = [1,2,3,4];
}
B.父类原型添加原型方法
SuperType.prototype.superFunction = function() {
alert (this.name);
}
C.子类构造函数,在构造函数中用call调用父类构造函数,并且定义子类的构早 函数属性
function SubType(name,age){
SuperType.call(this,' nick');
this.age = age;
}
D.子类继承父类的原型方法
SubType.prototype = new SuperType();
E.子类的构造函数自己定义,断开与父类构造函数的关系
SubType.prototype.constructor = SuperType();
F.子类定义自己的原型方法
SubType.prototype.subFunction = function(){
alert (this.age);
}
G.创建子类实例
var instance = new SubType('anne','10');
8.prototype和构造函数调用关系
答:每个构造函数都有一个原型对象,每个原型对象都有一个指向构造函数的指针,每个实例有一个指向原型的指针。继承本质上是重写原型对象,将原型代之以另一个类型的实例。
9.promise并行三个,将结果存入数组,滑动窗口
Promise.all() 并行且按照参数传入顺序输出
/////
var promiseArr = [p1,p2,p3,p4,p5,p6,p7,p8];
var resultArr = [];
for(let i = 0; i < promiseArr.length; i++){
let tempArr = [promiseArr[i * 3] , promiseArr[i * 3+1] , promiseArr[i*3+2]];
resultArr.push(promise.all(tempArr))
}
10.eventloop对set timeout和promise的处理
js是单线程语言,他作为浏览器脚本语言,与用户互动, 以及操作dom,这决定了它只能是单线程语言,否则会有非常麻烦的同步问题。
H5提出了WebWorker标准。允许js脚本创建多个线程。但是子线程完全受主线程控制。且不得操作DOM,所以这个标准并没有改变js单线程的本质。
js执行过程中, 所有的任务分为两种,同步任务和异步任务,同步任务在主线程上形成一个执行栈按顺序执行, 遇到异步任务就将这个异步任务添加到任务队列(task queue)中,一旦执行栈中所有的同步任务执行完毕,系统就会去读task queue,拿到执行栈中执行。异步任务的task queue 分为宏任务队列(macrotask)和微任务队列(microtask),不同的异步任务会进入不同的队列,宏任务包括常见的settimeout,setinterval,setImmediate,UI rendering,requestAnimationFrame等,microtask包括promise ,node 的process.nextTick,等。同步任务执行完毕后,js引擎会先去查看microtask queue,若有待执行的微任务就会先执行所有microtask,然后再去执行一个宏,再去执行所有微。
settimeout会被放进宏任务队列(macrotask队列)一次取出一个执行
Promise会被放进微任务队列(microtask队列)每次循环执行所有microtask。
- vue 样式模块化
答:可以通过在style标签上加scoped属性实现
scoped 和module 区别:
module:
给样式名直接增加hash字符串,直接修改了class的名字来实现全局唯一
类名可以是变量,表达式
css module是个文件需要import,需要css-loader配置
scoped:
在dom标签上和css样式上(类名后面方括号和标签里的标记相同)加唯一不重复的标记。
scoped会使标签选择器变慢
也有办法让父元素可以影响子元素,使用>>>符号。
12.怎样区分伪类和伪元素
答:针对作用选择器的效果,伪类需要添加类来达到效果,而伪元素需要增加元素,所以一个叫伪类,另外一个叫伪元素。
13.web存储方式
大搜车
答:web存储目的是在设备不能上网的情况下依然可以运行应用。
熟知的有cookie,sessionStorage,localStorage。
第一步
离线检测,h5定义了navigator.online属性,但是存在兼容性问题,h5还定义了两个事件,online和offline,网络状态变化时触发。
第二步
应用缓存,(manifest)
appCache是从浏览器缓存分出来的一块区域,使用描述文件列出需要缓存和下载的资源。applicationCache对象的status属性可以查看appcache当前的状况。
第三步
数据存储,
cookie:特定域名下,4kb,server设置cookie,有效时间内, client每次访问相同域名都会携带这个cookie,默认情况下,当浏览器关闭时cookie会被删除,不过也可以自己设置过期时间,因此, cookie可以在浏览器关闭之后依然保存在用户的机器上。为了绕开浏览器单域名下的cookie个数限制, 产生了子cookie,子cookie是存在单个cookie中的更小段的数据。cookieUtil对象操作cookie的存储方法。
Web Storage:以window对象的属性存在。
sessionStorage:存储特定于某个会话的数据,保存到浏览器关闭, 可以跨越页面刷新存在,如果浏览器支持, 浏览器重启后依然可用。
globalStorage:后被localStorage代替
localStorage:不主动清除就永远存在,同域名同协议,同端口。
14.简述instanceOf为什么不是绝对安全?
BOM
答:因为在使用框架的情况下,浏览器会存在多个global对象。每个框架中定义的全局变量,会自动成为框架中window对象的属性。由于每个window对象都包含原生类型的构造函数,因此每个框架都有一套自己的构造函数,这个问题会影响到对跨框架传递的对象使用instanceOf操作符。
- String对象的方法
答:方法名---返回值---参数
- 字符方法 :
- charAt()--给定位置的字符串--一个参数(字符位置)
- charCodeAt()--给定位置的字符编码--一个参数(字符位置)
- 字符串造作方法:(参数为负数时的处理机制不同)
- concat()--新--任意多个参数拼接
- slice()--新--一或两个参数(开始位置,结束位置后一个)
- substring()--新--一或两个参数(开始位置,结束位置后一个)
- substr()--新--一或两个参数(开始位置,个数)
- 字符串位置方法:
- indexOf()--index--1或2个参数(str, index)
- lastIndexOf()--index--1或2个参数(str,index)从后向前
- trim()方法--新--去掉空格
- 字符串大小写转换方法:
- toLowerCase()--新
- toLocaleLowerCase()--新
- toUpperCase()--新
- toLocaleUpperCase()--新
- 字符串匹配方法:
- match()--array--一个参数(正则表达式或RegExp对象)
- search()--第一个匹配项的索引--一个参数(正则表达式或RegExp对象)
- replace()--新--两个参数(RegExp/str , str/function)
- split()--指定分隔符的array(可将string转为数组)--(RegExp/str , number)
- localeCompare()方法--1,0,-1--str
- fromCharCode()方法--转换后的字符串--参数是一系列UTF-16代码单元的数字
16.实现千位分隔符 1234567->1,234,567
彩视
答:
- /(?=(\B\d{3})+$)/g
https://juejin.im/post/5abb5b01f265da237f1e5a92 - (123456789).toLocaleString('en-US')(骚操作)
17.写出3个以上能改变DOM的js native函数
独到科技
答:appendChild() / insetBefore() / replaceChild() / removeChild() / createElement()
18.call和apply的区别
答: 这两个函数都是非继承而来的方法,用途是在特定的作用域中调用函数,设置函数体内this对象的值。
apply()
接收2个参数,第一个是函数运行的作用域,第二个是参数数组,其中,第二个参数可以是Array的实例,也可以是arguments对象。
call()
和apply()区别仅仅是接收参数的方式不同,第二个参数必须逐个列出来。
func.apply(this,[num1,num2]);
func.apply(this,arguments);
func.call(this,num1,num2);
19.浏览器实现js多线程,提供原生对象是?
答:js实现多线程的方式有很多种, ajax,异步回调函数,settimeout setinterval,webworker,多线程webworker是h5标准的一部分,worker是window对象的一个方法。
这一套标准定义了一系列api,允许一段js程序运行在主线程之外的另一个线程中,把一些一步操作交给worker线程,在主线程工作时,worker线程在后台运行,互不干扰,等到worker完成后再将结果返回给主线程。
webworker存在两个限制:
同源限制:worker运行的脚本必须与主线程脚本文件同源。
访问限制:worker的全局对象和主线程的全局对象不是同一个上下文环境,无法使用document,window,parent等,window改写成self.
20.快速排序
彩视
答:
1.选基准,pivot
2.小于的放pivot左边,大于的放pivot右边
3.递归
时间复杂度为O(nlogn)
function quickSort(arr) {
if (arr.lentgh <= 1) {
return arr;
}
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i])
} else {
right.push(arr[i])
}
}
return quickSort(left).concat([pivot], quickSort(right));
}
http://www.ruanyifeng.com/blog/2011/04/quicksort_in_javascript.html
21.二分查找
彩视
答:有序查找
1.找到有序数组的中间元素
2.比较key和中间元素的大小,大于去右边找,小于去左边找
3.大于的情况,把边界low设置为中间元素往后一个,小于的情况,把边界high设置为中间元素往前一个。
O(logn)
//非递归
function binarySearch(arr, key) {
var low = 0;
var high = arr.length - 1;
while (low <= high) {
var mid = parseInt((low + high) / 2);
if (key == mid) {
return mid;
} else if (key > mid) {
low = mid + 1;
} else if (key < mid) {
high = mid - 1;
} else {
return -1;
}
}
}
22.实现布局,子元素宽占父元素的50%,高和宽相等,自适应。
跟谁学
答:原理:padding-top,padding-bottom是根据父元素的宽度计算而不是height。
.a{
width:300px;
height:600px;
background:pink;
font-size:0;
}
.b{
width:40%;
background:#f13a70;
padding-top:40%;
display:inline-block;
}
- keep-alive原理
TCP keep-alive
VUE组件原理
北明软件
答:
- TCP
Connection设置为Keep-alive用于告诉客户端本次HTTP请求结束之后并不需要关闭TCP连接,这样可以使下次HTTP请求使用相同的TCP通道,节省TCP连接建立的时间。
在 HTTP 1.0 时期,每个 TCP 连接只会被一个 HTTP Transaction(请求加响应)使用,请求时建立,请求完成释放连接。当网页内容越来越复杂,包含大量图片、CSS 等资源之后,这种模式效率就显得太低了。所以,在 HTTP 1.1 中,引入了 HTTP persistent connection 的概念,也称为 HTTP keep-alive,目的是复用TCP连接,在一个TCP连接上进行多次的HTTP请求从而提高性能。
HTTP1.0中默认是关闭的,需要在HTTP头加入"Connection: Keep-Alive",才能启用Keep-Alive;HTTP1.1中默认启用Keep-Alive,加入"Connection: close ",才关闭。
- VUE
组件
开发中, 为了优化组件的缓存,切换页面时保存状态,使用keep-alive,keep-alive是vue的一个内置抽象组件,在他的created钩子里面定义了this.cache和this.keys,props定义了include,exclude,max。keep-alive实现了render函数,在keep-alive组件渲染时候会执行。
由于我们也是在keep-alive内部写dom,所以第一步先获取他的插槽$slots,再获取到他的第一个子节点。
const slot = this.$slots.default
const vnode: VNode = getFirstComponentChild(slot)
由于keep-alive只获取第一个子节点,所以一般搭配看component动态组件或者router-view使用。
接下来,判断组件名字和include,exclude的关系。
这里match函数做匹配的逻辑兼容了数组,字符串,和正则的情况。
include的情况,去找缓存。
命中缓存,就从缓存中拿VNode实例,并且调整key的顺序排在最后一个。
未命中,就把VNode设置进缓存,如缓存数量超过了配置的max值, 就删掉缓存队列中的第一个。这里有个判断,就是删掉的节点是不是当前的tag,是就直接删掉,不是的话,要调用缓存的组件实例 的$destroy钩子。
如果是exclude的情况,就直接返回VNode。
24.vue tab页跳转时, 保存之前的滚动位置
答:有两种方式:vue-router的滚动行为和keep-alive
在源码中,对于浏览器默认行为,调用自定义的scrollBehavior函数后传参的savedPosition为保存的position,对于跳转这种则传参的savedPosition为null。
基本我们可以提炼出:通过跳转的是需要进行数据刷新的;而通过默认浏览器行为的是不需要进行浏览器刷新的。
- vue-router 中的滚动行为
滚动行为:这个功能只在支持history.pushState的浏览器中使用,只在通过浏览器触发前进后退按钮时可用。
貌似不能做条件判断是否要保持状态
scrollBehavior 在组件生命周期的mounted后beforeUpdated前执行
savedPosition是个位置对象
const router = new VueRouter({
routes: [],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return {x:0,y:0}
}
}
})
也可以模拟滚动到锚点的行为
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
可以返回一个promise得到预期位置的描述
因为scrollBehavior 在组件生命周期的mounted后beforeUpdated前执行,mounted时期发出的异步请求并没有等到返回,滚动事件已经触发,所以等数据请求回来时会发现滚动 位置不准确。所以必须使用settimeout将滚动事件加到异步队列中,位于异步请求之后。(settimeout是加在了本轮主线程的末尾,但是settimeout中的异步事件放到了和异步请求同一个队列中。)
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
- keep-alive
可以做tab切换,页面跳转时的滚动位置保存。
每次切换新标签时, vue都创建了一个新的currentTabComponent。
路由跳转时,vue-router不保存被切换组件的状态,旧的会被销毁,新组建被创建,走一遍完整的生命周期流程。
要求被包裹的组件有自己的名字,注意不是路由名字。
keep-alive是个抽象组件(或称为功能型组件),存在于initLifeCycle中,实际上不会被渲染在DOM树中。它的作用是在内存中缓存组件(不让组件销毁),等到下次再渲染的时候,还会保持其中的所有状态,并且会触发activated钩子函数。因为缓存的需要通常出现在页面切换时,所以常与router-view一起出现。
可以只缓存一些组件
如果只想渲染某一些页面/组件,可以使用keep-alive组件的include/exclude属性。include属性表示要缓存的组件名(即组件定义时的name属性),接收的类型为string、RegExp或string数组;exclude属性有着相反的作用,匹配到的组件不会被缓存。假如可能出现在同一router-view的N个页面中,我只想缓存列表页和详情页,那么可以这样写:
可以实现条件渲染
上面include的写法不是常用的,因为它固定了哪几个页面缓存或不缓存,假如有下面这个场景:
现有页面:首页(A)、列表页(B)、详情页(C),一般可以从:A->B->C;
B到C再返回B时,B要保持列表滚动的距离;
B返回A再进入B时,B不需要保持状态,是全新的。
具体细节:
https://juejin.im/post/5b407c2a6fb9a04fa91bcf0d
scrollbehavior和keepalive标签有什么区别?
我的理解是,从本质上讲,scrollbehavior是在缓存里记录了上一个页面的滚动位置信息,而keepalive是把不活动的组件保存在内存中, 而不是直接销毁。
scrollbehavior只能控制浏览器的返回前进,没法处理tab切换这种,而keepalive可以。
25.window load event和document DOMContentLoaded event的区别
独到科技
答:
load事件在整个页面全部加载完才会触发,包括所有以来的资源,样式,图片。
load,页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件,简单来说,页面的load事件会在DOMContentLoaded被触发之后才触发。
不同于DOMContentLoaded,一旦DOM加载完,就会触发。
在这里我们可以明确DOMContentLoaded所计算的时间,当文档中没有脚本时,浏览器解析完文档便能触发 DOMContentLoaded 事件;如果文档中包含脚本,则脚本会阻塞文档的解析,而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下,DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。
26.给定两个排序好的数组a,b,长度分别为n,m,给出一个高效算法,查找A中的哪些元素存在于B中。
彩视
答:
- ES7的includes 和 filter 做交并差集
var a = [1,3,5,7,9];
var b = [1,5,6,8,10];
let c = [];
c = a.filter(i => b.includes(i));
- Array.from 和 set不允许重复的特点
var a = [1,3,5,5,7,9,9,10,10];
var b = [1,5,5,6,8,10];
let c = [];
let aSet = new Set(a);
let bSet = new Set(b);
c = Array.from(aSet).filter(i => bSet.has(i))
console.log(c);
- ES5 filter 和 indexOf
此方法不能去重
由于indexOf方法对于NAN始终返回-1,所以有NAN的情况要特殊处理
let a = [1,3,5,5,7,9,9,10,10,'s',NAN];
let b = [1,5,5,6,8,10,'s',NAN];
let ahasNAN = a.some(i => isNAN(i));
let bhasNAN = b.some(i => isNAN(i));
let c = [];
c = (a.filter((i) => b.indexOf(i)>-1)).concat(ahasNAN && bhasNan ? [NAN] : []);//考虑NAN
c = a.filter((i) => b.indexOf(i)>-1);//不考虑NAN
我没成功
27.实现一个函数,入参是一个字符串,判断是否有重复字母,如果包含,返回第一个重复字母的下标,不包含返回-1。
大搜车
答:
let a = [1, 2, 2, 3, 3, 4, 5]
let b = [];
let res = -1;
for (let i = 0; i < a.length; i++) {
if (b.includes(a[i])) {
res = i;
break;
} else {
b.push(a[i]);
}
}
console.log(res);
console.log(b);
28.对象数组a=[{x:7,y:6} , {x:1,y:2} , {x:3,y:4}],按照x的大小进行排序。
瓜子二手车
答:
js page113,Function类型,比较函数,一个函数返回另一个函数
function compare(x) {
return function(obj1, obj2) {
var value1 = obj1.x;
var value2 = obj2.x;
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
}
var objArr = [{x:4,y:10},{x:12,y:2},{x:-3,y:9}];
console.log(objArr.sort(compare('x')));
29.阶乘函数
未经优化的版本
function factorial(num) {
if (num <= 1) {
return 1
} else {
return num * factorial(num - 1);
}
}
console.log(factorial(5));
但问题是这个函数的执行与函数名factorial紧紧耦合了,为了消除这种紧密耦合的现象,可以使用arguments.callee。
arguments对象有个callee属性,callee是个指针,指向拥有这个arguments对象的函数。
但是严格模式下访问arguments.callee会报错
function factorial(num) {
if (num <= 1) {
return 1
} else {
return num * arguments.callee(num-1);
}
}
console.log(factorial(5));
- call() apply()和bind()的区别?
答:call和apply改变了函数的this上下文之后立即执行函数,而bind则是返回改变了上下文后的一个函数。
31.实现tooltip, css画钝角三角形
瓜子二手
答:操作边的宽度就可以实现钝角锐角三角形
32.判断一个对象是函数的几种方法。
// 1.
typeof func == "function" ; //true
// 2.
function isFunction(fn) {
return Object.prototype.toString.call(fn)=== '[object Function]';
}
// 3.
Object.prototype.toString == "function";
33.实现商品列表,一行3个,屏幕宽度不定,商品元素间距50px,距离父元素边距50px。
瓜子二手车
.a {
width: 500px;
height: 500px;
background: #3c3c3c;
padding: 50px;
}
.b-wrap {
width: 100%;
height: 100%;
background: pink;
}
.b {
float: left;
background: #aaaa12;
margin-bottom: 50px;
// 此处注意,减号左右要有空格, 否则计算属性不生效
width: calc((100% - 100px)/3);
padding-top: calc((100% - 100px)/3);
}
.b:nth-child(2) {
margin: 0 50px;
}
然后我发现这个方法不对。。。。
用flex:
这是个遗留问题,我不会了。
34.向一个数组增加元素的方法
瓜子二手车
答:以下三个方法都修改原数组
- push()
- unshift() //从前面添加一个元素
- splice() // 可插入、替换。删除元素项,接受三个参数:起始index,删除的个数,剩下的参数都是用来添加or替换的项
35.盒子模型有哪几种, width100padding10的盒子, 占据宽度是多少?
微店
答:当文档布局时,浏览器渲染引擎会把元素都表示为矩形的盒子。
box-sizing属性有三个值
-
content-box:默认值
包含content,如图,元素最终宽度由width+padding+border决定,width属性设置的只是content部分的宽度。
-
border-box:
包含border+padding+content,width设置的宽度是border+padding+content。
inherit
从父级继承。