前端常见面试题

142 阅读4分钟
1.数组的常用方法有哪些?
合并数组:concat();
将数组元素转化成字符串拼接join();
删除数组的最后一个元素pop();
在数组的最后增加一个元素push();
在数组的最前面添加一个元素unshift();
删除数组最前面的元素shift();
splice(要操作的元素索引,要删除的元素个数,要增加的元素);
数组.indexOf(‘值’)如果找到就返回找到的元素开头所在的索引,找不到就返回-1;
数组.length返回数组的长足;
数组.sort(function(a,b){
return a-b;
//从小到大排序
});

2.JavaScript字符串的常用方法有哪些?
charAt()返回在指定位置的元素;
concat()连接字符串;
replace(a,b)将a替换成b;
replaceAll()会把所有的目标元素全部替换
split()把一个字符串分割成字符串数组;
indexOf()返回指定的某个元素在字符串中首次出现的位置;
match() 可以在字符串内检索指定的值,并一数组的形式返回o在字符串内的信息
toUpperCase把字符串转化成大写
toLowerCase把字符串转化成小写

3.== 和 ===区别,分别在什么情况使用?
==号只比较值,在只判断值的属性是使用;
===号既比较值也比较元素类型,在需要对比元素类型是值是使用

4.说说你对闭包的理解?
闭包是函数套函数,使内部的函数一直调用外部函数中定义的变量,这样函数执行后不会把变量丢弃,
使得该变量一直在调用中,这样就可以在函数外部也调用该变量。

5.Javascript本地存储的方式有哪些?区别及应用场景?
cookie,有时间和大小限制,一般可以存储4kb的数据,到达设置的过期时间后会自动清除,
会将保存的数据发送给服务器,可用于用户登录数据的存储;
sessionStorage,一般可以存储3m数据,在页面关闭后会自动清除,可用于问卷调查页面等;
localStorage ,一般可存储3m数据,将数据存储在本地,不过主动清除即使关闭页面也不会
消失的数据,可用于存储比较重要的信息等。

6.css选择器有哪些?优先级?哪些属性可以继承?
.class(类选择器),#id(ID选择器),标签选择器,
id>class>标签
子元素会继承父元素的样式如字体,字号,颜色,文本缩进等

7.css中,有哪些方式可以隐藏页面元素?区别?
使用opacity属性,将其调到0,该元素会变成透明,但仍然存在,仍会与其他元素形成交互,
而且会对该元素的子元素也产生影响;
设置displaynone会将所有效果全部清除;
设置visibility:hidden;该设置不会影响到任何用户交互,在读屏软件中也会被隐藏。

8.元素水平垂直居中的方法有哪些?如果元素不定宽高呢?
1.
position:absolute;
 left:50%;
 top:50%;
magin-left:-元素宽度的一半;
magin-top:-元素高度的一半;
2.
position:absolute;
 left:50%;
 top:50%;
transform:translate(-50%,-50%);
3.
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
magin:auto;
4.
display: flex;
justify-content: center;
align-items: center;

9.CSS3新增了哪些新特性?
rgba,透明度,background属性,word-wrap属性;text-shadow属性,font-face属性,border-radius
属性,border-image属性,box-shadow属性,媒体自查。

10.谈谈 JavaScript 中的类型转换机制
Number(),将目标元素转换成数字类型,但若含有任意一个字符无法被转换成数字类型就会整个变成NaN;
parseInt()将目标元素转化成数字类型,遇到无法转换的元素时会停下;
String()转换为字符串元素;
Boolean()转换为布尔值;
在比较运算(==,!=,<,>)和算数运算(+,-,*,/,%)时会自动转换为布尔值
在拼接字符串时,会将元素自动转换为字符串类型。
11.请简述盒模型、

IE6盒子模型与W3C盒子模型。

文档中的每个元素被描绘为矩形盒子。盒子有四个边界:外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。

CSS3中有个box-sizing属性可以控制盒子的计算方式,

content-box:paddingborder不被包含在定义的widthheight之内。对象的实际宽度等于设置的width值和borderpadding之和。(W3C盒子模型)

border-box:paddingborder被包含在定义的widthheight之内。对象的实际宽度就等于设置的width值。(IE6盒子模型)