前言
年末研发组解散失业, 选择回去学车了,也顺利拿到了驾照，最近回归大深圳,开始踏上漫漫的找工作之路。
拉勾上吊一百年不匹配, BOSS直聘日夜没反应。
题目范围涵盖我最近遇到的笔试题和面谈的(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React)
emm,这里不列举哪些公司了, 若是你完整的阅读一遍,相信你有不少的收获,谢谢阅读
- 问题截止日期(2018/3/23)，我去面的创业,中大型皆有。
- 期间死在各种一面/二面/三面/四面皆有之,也拿到部分和推掉部分
offer,还有一些后续不清楚的
问题汇总,想到就写
Q: CSS 有哪些样式可以给子元素继承!
- 可继承的:
font-size,font-weight,line-height,color,cursor等 - 不可继承的一般是会改变盒子模型的:
display,margin、border、padding、height等
更加全面的可以到引擎找
Q: 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- 行内:
input,span,a,img以及display:inline的元素 - 块级:
p,div,header,footer,aside,article,ul以及display:block这些 - void:
br,hr
Q: CSS3实现一个扇形
- 思路跟画实体三角形一个道理,只不过多了一个圆角属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>扇形</title>
<style>
.sector {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: #f00 transparent transparent;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="sector"></div>
</body>
</html>
Q: box-sizing常用的属性有哪些? 分别有啥作用?
box-sizing有两个值:content-box(W3C标准盒模型),border-box(怪异模型),
这个css 主要是改变盒子模型大小的计算形式
可能有人会问padding-box,这个之前只有 Firefox 标准实现了,目前50+的版本已经废除;
用一个栗子来距离,一个div的宽高分别100px,border为5px,padding为5px
<style>
.test {
box-sizing: content-box;
border: 5px solid #f00;
padding:5px;
width: 100px;
height: 100px;
}
</style>
<div class="test"></div>
<!--
content-box的计算公式会把宽高的定义指向 content,border和 padding 另外计算,
也就是说 content + padding + border = 120px(盒子实际大小)
而border-box的计算公式是总的大小涵盖这三者, content 会缩小,来让给另外两者
content(80px) + padding(5*2px) + border(5*2px) = 100px
-->
Q: 清除浮动的方式有哪些?比较好的是哪一种?
常用的一般为三种.clearfix, clear:both,overflow:hidden;
比较好是 .clearfix,伪元素万金油版本,后两者有局限性…等会再扯
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<!--
为毛没有 zoom ,_height 这些,IE6,7这类需要 csshack 不再我们考虑之内了
.clearfix 还有另外一种写法,
-->
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
<!--
用display:table 是为了避免外边距margin重叠导致的margin塌陷,
内部元素默认会成为 table-cell 单元格的形式
-->
clear:both:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了,
比如相邻容器的包裹层元素塌陷
overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷
Q: CSS 中transition和animate有何区别? animate 如何停留在最后一帧!
这种问题见仁见智,我的回答大体是这样的…待我捋捋.
transition一般用来做过渡的, 没时间轴的概念, 通过事件触发(一次),没中间状态(只有开始和结束)
而animate则是做动效,有时间轴的概念(帧可控),可以重复触发和有中间状态;
过渡的开销比动效小,前者一般用于交互居多,后者用于活动页居多;
至于如何让animate停留在最后一帧也好办,就它自身参数的一个值就可以了
animation-fill-mode: forwards;
<!--backwards则停留在首帧,both是轮流-->
让我们来举个栗子,.自己新建一个 html 跑一下,.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Box-sizing</title>
<style>
.test {
box-sizing: border-box;
border: 5px solid #f00;
padding: 5px;
width: 100px;
height: 100px;
position:absolute;
/*
简写的姿势排序
@keyframes name : 动画名
duration 持续时间
timing-function 动画频率
delay 延迟多久开始
iteration-count 循环次数
direction 动画方式,往返还是正向
fill-mode 一般用来处理停留在某一帧
play-state running 开始,paused 暂停 ,.
更多的参数去查文档吧..我就不一一列举了
*/
animation: moveChangeColor ease-in 2.5s 1 forwards running;
}
@keyframes moveChangeColor {
from {
top:0%;
left:5%;
background-color:#f00
}
to{
top:0%;
left:50%;
background-color:#ced;
}
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
Q: 块级元素水平垂直居中的方法
我们要考虑两种情况,定宽高和不定宽高的;
方案 N 多种,我记得我很早写过这类的笔记
传送门:网页元素居中攻略记
Q: 说说样式权重的优先级;
!important > 行内样式 > id > class > tag
样式权重可以叠加, 比如 id>class
Q: 对HTML语义化的理解
简言之:就是不滥用标签(比如 DIV)/随意嵌套(比如 span>div) ,
类的命名要合理, 利于浏览器解析乃至引擎收录,也利于团队协作和维护
Q: JS有几种数据类型,其中基本数据类型有哪些!
七种数据类型
- Boolean
- Null
- Undefined
- Number
- String
- Symbol (ECMAScript 6 新定义)
- Object
(ES6之前)其中5种为基本类型:string,number,boolean,null,undefined,
ES6出来的Symbol也是原始数据类型 ，表示独一无二的值
Object 为引用类型(范围挺大),也包括数组、函数,
Q: null和undefined的差异
大体说一下,想要知其所以然请引擎搜索
相同点:
- 在
if判断语句中,值都默认为false - 大体上两者都是代表无,具体看差异
差异:
null转为数字类型值为0,而undefined转为数字类型为NaN(Not a Number)undefined是代表调用一个值而该值却没有赋值,这时候默认则为undefinednull是一个很特殊的对象,最为常见的一个用法就是作为参数传入(说明该参数不是对象)- 设置为
null的变量或者对象会被内存收集器回收
Q: JS 的DOM 操作(Node节点获取及增删查改);
- 获取(太多了,有
document.getElementById/ClassName/Name/TagName 等,或者 querySelector)
// example
// get Node
var element = document.querySelector('#test');
// 追加
element.appendChild(Node);
// 删除
element.removeChild(Node);
// 查找
element.nextSibling // 获取元素之后的兄弟节点 , 会拿到注释文本,空白符这些
element.nextElementSibling // 等同, 获取标签(不会拿到注释文本这些)
element.previousSibling // 和上面同理,往前找兄弟节点
element.previousElementSibling
// 改动,比如 属性这些
element.setAttribute(name, value); // 增加属性
element.removeAttribute(attrName); //删除属性
// 来一个简易的练习题,随便一个网页追加插入一块DOM(非覆盖:不能 innerHTML);
/*
<div id="test">
<span>Hello, World</span>
</div>
*/
// 以上面的例子为例
var test = document.createElement('div'); // 创建一个块级元素
test.setAttribute("id","test"); // 设置其id 属性
var span = document.createElement('span'); // 创建一个 span
span.innerText = "Hello,world"; // 插入 span 的文本内容
test.appendChild(span); // 组合节点
element.appendChild(test); //追加到某个节点区域
Q:Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty,这个更多的是用来区分自身属性和原型链上的属性。
Q: 给一个 DOM添加捕获和冒泡的两种写法的事件点击,谁先执行?
分情况分析:
- 有拿到节点的,优先捕获,没有才往上冒泡寻找
- 若是通过
node.addEventListener('event',callback,bubble or capture); 谁先调用谁先执行
stackoverflow 有相关的探讨:
Q: 谈谈你对ajax 的理解,以及用原生 JS 实现有哪些要点需要注意;
ajax全称是异步 javascript 和 XML,用来和服务端进行数据交互的,让无刷新替换页面数据成了可能;
至于有哪些要要点,来一个简短的ajax请求
var xhr = new XMLHttpRequest(); // 声明一个请求对象
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
// readyState 4 代表已向服务器发送请求
if(xhr.status === OK){
// // status 200 代表服务器返回成功
console.log(xhr.responseText); // 这是返回的文本
} else{
console.log("Error: "+ xhr.status); // 连接失败的时候抛出错误
}
}
}
xhr.open('GET', 'xxxx');
// 如何设置请求头? xhr.setRequestHeader(header, value);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(null); // get方法 send null(亦或者不传,则直接是传递 header) ,post 的 send 则是传递值
更为详细的可以阅读此处;
Q: JS 实现一个闭包函数,每次调用都自增1;
这里主要考察了闭包,函数表达式以及 IIFE(立即执行表达式)
var add = (function() {
// 声明一变量,由于下面 return所以变量只会声明一次
var count = 0;
return function() {
return console.log(count++);
};
})();
add(); // 0
add(); // 1
add(); // 2
Q: [‘1’,‘2’,‘3’].map(parseInt) 输出什么,为什么?
['1','2','3'].map(parseInt); // [1,NaN,NaN]
// 刨析
// map有三个参数:数组元素，元素索引，原数组本身
// parseInt有两个参数,元素本身以及进制
// 理清了这两个就好办了,
// ['1','2','3'].map(parseInt); 等于如下
['1','2','3'].map(function(item,index,array){
return parseInt(item,index); // 是不是一目了然
});
// parseInt("1",0); => 1
// parseInt("2",1); => NaN
// parseInt("3",2); => NaN
Q：如何实现浏览器内多个标签页之间的通信?
WebSocket、localstorge、cookies都可以。
要考虑浏览器无痕模式的话用WebSocket会更好，不然功能基本失效或者报错。
Q：webSocket如何兼容低浏览器？
最常见的就是轮询XHR
Q: 什么是window对象? 什么是document对象?
window对象是指浏览器打开的窗口。
document对象是HTML 文档对象的一个只读引用，window对象的一个属性。
Q: 对数组 [‘2018-03-05’, ‘2013-06-12’,‘2019-03-12’,‘2018-03-05’,‘2014-02-22’] 去重且排序
我这里用的是结合 ES6的,代码量很短
//很好理解, Set 具有值唯一性(但不是所有值,等会我抛出我的另外一篇文章)
// 结合,解构,可以把可迭代(比如 arguments/nodelist 等)的转为数组
// sort 里面传入 两个值比较,返回-1和1是因为1代表这个数大排后(相对),-1代表小(相对),0为相等
let arr = [,new Set(['2018-03-05', '2013-06-12','2019-03-12','2018-03-05','2014-02-22'])].sort(function(a,b){
return a<b ? -1:1; // 这里返回的是升序的,降序改下返回值就好了.所以是相对
})
// ["2013-06-12", "2014-02-22", "2018-03-05", "2019-03-12"]
对于数组去重的,有兴趣的可以看下我这篇水文:
Q: 对数组[1,2,3,4,5,'6',7,'8','a','b','z']进行乱序
// 我们依旧可以用上面的 sort 的原理实现乱序
let tempArr = [1,2,3,4,5,'6',7,'8','a','b','z'].sort(function(){
return Math.random() > 0.5 ? -1 : 1;
})
// 因为里面有随机数,所以答案没有标准答案,我这边跑了一次是输出这个
//["6", "z", 3, "b", 5, 2, 7, "8", "a", 1, 4]
上面和这道题逗涉及到数组顺序的问题,想了解下为什么 a-b,a>b这类可以更改排序
可以看看知乎对于这块的探讨: 传送门:javascript排序return a-b?
Q: 求[1, 10, 11, -1,'-5',12, 13, 14, 15, 2, 3, 4, 7, 8, 9]内最大值与最小值之差
// 来一个很粗糙的版本,只当传入是数组且可以隐性转为数字的
function MaxMinPlus(arr) {
// 返回最大值与最小值之差
return Array.isArray(arr) ? Math.max.apply(Math, arr) - Math.min.apply(Math, arr) : console.log('传入的不是数组亦或者未能解决的错误')
}
// 结果是 20
// 若是要完善的话,要考虑传入的是非数组,
//传入字符串的时候要判断,然后切割为数组..
// 都要考虑进去代码量不短
Q: 请给Array实现一个方法,去重后返回重复的字符(新数组)
var testArr = [1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3];
Array.prototype.extraChar = function(){
var cacheExtraChar = []; // 缓存重复出现的字符
var that = this; // 缓存 this;
this.map(function(
最低0.47元/天 解锁文章
3046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
