毕业半年,坐标上海 有着一颗去BBA的心,可是技术却很渣。12月份开始投简历,出去试了大概有四家公司,主要的都是中小型的公司,前端面试大概就是js基础,es6偶尔还带上了算法的基础。遇到一个vue相关就是多语言的配置,仅此而已。下面是19年下半年出去面试所遇到的题目,希望对你有所帮助。大神轻喷
js部分
说一说: js的基本数据类型
js的基础数据类型为:undefined Null Boolean String Number
附:js的复杂数据类型 object
基本类型:undefined null boolean number
引用类型:Object Array Function
说一说:var let const 的区别
var定义的变量,没有块的概念,可以跨块访问,不能跨函数访问。
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问
const用来定义变量,使用时必须初始化(即必须赋),只能在块作用域内访问,不能修改
(function A() {
var d = 5;
let e = 6;
const f = 7;
console.log(d); // 5
console.log(e); // 6
console.log(f); // 7
})();
// console.log(d); // 报错
// console.log(e); // 报错
// console.log(f); // 报错
附:在es6中新增了块级作用域的概念,由{}包括,if语句和for语句的{}也属于块级作用域
说一说:typeof和instanceOf的区别
typeof和instanceof 判断一个变量是否为空
typeof返回的 ‘number’,’string’ ‘boolean’ ‘object’ ‘function’ ‘undefined’。
typeof无法判断 Array 和 object //typeof(array) => object
instanceof来检测某个对象是不是另一个对象的实例 他的判断就是根据原型链进行搜寻
说一说:‘==’ 和 ‘===’的区别
var a=12;
var b='12';
alert(a==b);//返回结果为 true
alert(a===b);返回结果为false
'==' 仅仅比较两个变量的值,不管数据类型
'===' 在比较值和数据类型,必须同时满足才能为true
说一说map和forEach的区别
map对一个数组操作,一般是生成一个新的数组,可以在map中限制新数组生成的条件,返回一个新的数组
foreach方法:一般是对原有数组进行操作,没有返回值
附:filter():是对一个数组进行过滤,filter()方法会创建一个新的数组,包含通过过滤的元素
说一说 浅拷贝和深拷贝的实现
浅拷贝和深拷贝都只针对于引用数据类型,浅拷贝只复制指向某个对象的指针,而不复制对象本身,和旧对象还是共享同一块内存。但深拷贝会创造一个一摸一样的对象,新对象跟原对象不会共享内存,修改新对象也不会改到原对象。
区别:浅拷贝只复制对象的第一层属性,浅拷贝可以对对象的属性进行递归的复制
浅拷贝的实现:Object.assign() 实现浅拷贝
let obj1 = {
a: {
b: 1
},
c: 2
}
let obj2 = Object.assign({},obj1)
obj2.a.b = 3;
obj2.c = 3
console.log(obj1.a.b); // 3
console.log(obj2.a.b); // 3
console.log(obj1.c); // 2
console.log(obj2.c); // 3
深拷贝的实现 利用递归
function deepCopy(obj1){
var obj2 = Array.isArray(obj1) ? [] :{}
if(obj1 && typeof obj1 === 'object'){
for(var i in obj1){
// 判断obj 是否有i 这个属性
if(obj1.hasOwnProperty(i)){
// 如果子属性为引用数据类型,递归复制
if(obj1[i] && typeof obj1[i] === 'object'){
obj2[i] = deepCopy(obj1[i])
} else {
// 如果只是简单的数据类型 ,简单的复制
obj2[i] = obj1[1]
}
}
}
}
return obj2
}
var obj1 = {
a: 1,
b: 2,
c: {
d: 3
}
}
var obj2 = deepCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
console.log(obj1.a);// 1
console.log(obj2.a); // 3
console.log(obj1.c.d); // 3
console.log(obj2.c.d); // 4
对闭包的理解
闭包是指有权访问另一个函数作用域中变量的函数(通过闭包可以在函数外部能访问到函数内部的变量)
作用域的定义:是一套规则,用于确定在何处以及如何查找变量(标识符)
两种工作模型: 词法作用域:作用域是在编写代码的时候确定
动态作用域:作用域是在代码运行的时候确定 注:javascript使用的是词法作用域
css部分
说一说:在不知宽高的情况下,垂直居中的办法
第一种:display:table-cell
组合使用display:table-cell 和 vertical-align,text-align,使氟元素的所有行业元素水平垂直居中,内部div设置display:inline-block
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
<div class="cell">
<p>我爱你</p><p>亲爱的中国</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
</div>
第二种 transform:translate(-50%,-50%)
结合position:absolute top:50% left:50% transform:translate(
-50%
,
-50%
);
.content {
padding:10px;
background:green;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
//版本兼容
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
}
第三种: 利用弹性布局实现垂直左右居中
display:flex justify-content:center 定义在主轴(水平方向)居中对齐 align-items:center 定义在交叉轴上居中对齐
附:已知宽高水平居中的办法
方法一: 绝对定位+margin
合并两个数组 a和b
方法一:concat() 连接两个或更多的数组,并返回结果
var c = a.concat(b)
问题:数据量大的时候不合适,消耗内存。
方法二:遍历一个数组加到另一个数组
for(var i in b){
a.push(b[i]
)
方法三 利用apply
a.push.apply(a,[4,5,6])
实现字符串反转 简单的代码实现
实现将 'this is my book' => 'book my is this'
function reverseString(strings){
return strings.split(' ').reverse().join(' ')
}