前端面试基础整理

2018-11-08 本文已影响286人猫咪早安晚安

行内元素与块级元素的区别
行内元素设置width、height无效，margin、padding仅左右有效，上下无效。
前端的三层结构
结构层html，表示层css，行为层js
CSS的引入方式，区别是什么
link和@import

从属关系：link是HTML提供的标签，@import是CSS提供的语法规则
加载顺序：link在页面加载过程中会和内容同时加载出来，@import引入会在页面加载完成后才被加载。
需要js控制DOM改变演示时只能使用link，DOM不能控制@import
link无兼容性问题，@import只在IE5以上才能识别
link样式权重高于@import

CSS选择器有哪些
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器
伪类选择器
display:none和visibility:hidden的区别
display:none隐藏对应元素，在文档布局中不给它分配空间，相当于不存在
visibility:hidden隐藏对应元素，但在文档布局中仍保留原来的空间
position的absolute与fixed共同点与不同点
共同点：改变行内元素的呈现方式，让元素脱离普通流，不占据空间
不同点：absolute是根元素可以设置的，fixed的根元素固定为浏览器窗口
显示
block：像块类型元素一样显示
inline：像行内元素一样显示
inline-block：像行内元素一样显示，但内容像块类元素一样显示
list-item：像块类元素一样显示，并添加样式列表标记
absolute、fixed、relative、static
absolute：绝对定位，相对static以外的第一个祖先元素
fixed：绝对定位，相对浏览器窗口
relative：相对定位，相对普通流中的位置
static：默认值，没有定位，处于正常流中
CSS3中的新特性
圆角border-radius
阴影box-shadow
文字阴影text-shadow
线性渐变gradient
旋转transform
清除浮动技巧

使用空标签定义css clear:both;缺点添加了无意义的标签
overflow:hidden;

减少页面加载时间的方法
压缩CSS、JS文件
优化图片
图片格式选择
优化CSS
标明宽高
减少http请求
减少DOM操作
undefined和null的区别
undefined表示无，null表示尚未存在

变量声明未赋值为undefined
调用函数，函数参数未提供为undefined
函数没返回值，默认返回undefined
null系统会回收，可用于释放内存

优雅降级和渐进增强
优雅降级：最开始针对新式浏览器进行完整功能构建，再对低版本浏览器进行兼容。
渐进增强：针对低版本浏览器进行构建，逐步添加新式浏览器才支持的功能，当浏览器支持时自动呈现并发挥作用。
下面三条语句的区别
function show(){}
var show=function(){}
var show=new Function()
函数，函数表达式，函数对象
JS输出数据的方式
使用 window.alert() 弹出警告框
使用 document.write() 方法将内容写到 HTML 文档中
使用 innerHTML 写入到 HTML 元素
使用 console.log() 写入到浏览器的控制台
下面的代码输出什么

var y = 1;
if (function f(){}) {
    y += typeof f;
}
console.log(y);//1undefined

var k = 1;
if (1) {
    eval(function f(){});
    k += typeof f;
}
console.log(k); //1undefined

var k = 1;
if (1) {
    function f(){};
    k += typeof f;
}
console.log(k); //1function

JavaScript 中 undefined 和 not defined 的区别
未声明的变量直接使用会抛出异常var name is not defined，如果没有异常处理，代码就会停止运行。
但是使用typeof并不会产生异常，会直接返回 undefined。

var x;// 声明 x
console.log(x); //undefined 
console.log(typeof y); //undefined
console.log(z); //抛出异常:ReferenceError: z is not defined

JavaScript怎么清空数组

var arr=['a','b','c']
//方法1
arr=[]
//方法2
arr.length = 0;
//方法3
arr.splice(0,arr.length)

判断一个object是否是数组(array)
方法1：使用 Object.prototype.toString精确判断对象类型

function isArray(obj){
    return Object.prototype.toString.call( obj ) === '[object Array]';
}

console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]

方法2：使用原型链

function isArray(obj){
    return obj.__proto__ === Array.prototype;
}

JavaScript中如何检测一个变量是否是String类型

typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String

21.列举ES6的新特性

类的支持，引入class关键字
字符串模板``
解构
默认参数，不定参数，拓展参数
let关键字
for of

不同浏览器的兼容性区别
1.标签默认外边界和内填充不同
解决办法：margin:0;padding:0;
2.块属性float+横向margin在IE6中margin显示比设置的大
解决办法：display:inline;
3.标签高度设置较小(<10px)在IE6、7中高度显示比设置的大
解决办法：overflow:hidden;或者设置line-height<height
4.多个图片标签设置在一起，某些浏览器默认有间距
解决办法：为图片使用float
5.火狐不支持hand，ie支持pointer
解决办法：统一使用cursor:pointer;
6.small字体大小不同
解决办法：使用指定的字体大小
JavaScript数组反转

var arr = [5,1,4,7,2];
console.log(arr.reverse())//[ 2, 7, 4, 1, 5 ]

JavaScript数组的排序

var arr = [5,1,4,7,2];
console.log(arr.sort())//[ 1, 2, 4, 5, 7 ]

var arr = [5,1,4,7,2];
console.log(arr.sort().reverse())//[ 7, 5, 4, 2, 1 ]

JavaScript的基本类型
字符串、数字、布尔、数组、对象、Null、Undefined
let和const的区别

都只在声明所在的块级作用域内有效
let声明的变量可以改变值/类型等，const声明的变量不可改变值，const声明同时必须初始化

relative、absolute、fixed 定位原点

absolute：相对不是static的第一个父元素
relative：相对其正常位置
fixed ：相对浏览器窗口

前端面试基础整理

猜你喜欢

热点阅读