前端问答题

1、【问答】

linux中 vim有几种模式？如何进行这几种模式的切换

命令行模式、插入模式、底行模式
命令行模式->插入模式 I A O i a o
命令行模式->底行模式 : ?
插入模式->命令行模式 esc
2、【问答】

css3中animation与transition表示什么意思？

animation表示动画：animation-xxx
transition表示过渡：transition-xxx
3、【问答】

css中verticle-align规则有什么作用

设置行内元素的排列方式。
默认取值为baseline，即行内元素默认按照基线来进行排列
4、【问答】

相对定位、绝对定位、固定定位、粘滞定位、静态定位有什么区别？

从相对点、是否脱离文档流来回答
脱离文档流的是：绝对定位、固定定位、粘滞定位
没有定位属性与效果：静态定位
参考点不同：
相对定位：相对原先自己的位置
绝对定位：相对具有定位属性的上层元素
固定定位：相对浏览器窗口定位
粘滞定位：相对定位+固定定位组合，有临界值
5、【问答】

什么是响应式网页？如何实现一个响应式网页

响应式网页可以根据用户的访问设备不同而发生自适应变化。
可以通过@media来进行媒体选择，不同的设备尺寸执行不同的css代码。也可以使用bootstrap第三方库来完成响应式布局
6、【问答】

linux中远程登录命令、远程文件传输命令、查看Java进程命令分别是什么？举例说明

ssh 用户名@ip
scp 本地文件路径 用户名@ip:远程文件路径
或者 ftp 用户名@ip
ps -ef | grep java
7、【问答】

什么是块元素，块元素有哪些特点？

块元素常用于搭建页面框架，常见的块元素有：div、h1~h6、p、ul>li、ol>li、dl>dt,dd、header、article、section等h5新增语义化标签
特点：
独占一行空间；高度由内容决定；可以指定宽高；块元素内允许嵌套其他块元素与行内元素
8、【问答】

em 与rem的区别？

em：相对于当前元素上的字体大小
rem：相对于html元素上声明的字体大小
9、【问答】

如何使用css绘制一个三角形？

不给盒子元素设置宽高，给4个方向分别设置边框，但是颜色都为透明， 设置其中一个方向边框色，例如border-bottom，那么将绘制一个三角朝上的三角形。
#app { width: 0; height: 0; border: 100px solid transparent; border-bottom: 100px solid #ccc; }
10、【问答】

简述flex布局？

伸缩盒布局用于解决块元素在x轴以及y轴上排列的问题
核心概念：主轴，交叉轴，伸缩盒容器，伸缩盒元素
伸缩盒容器规则：(学生需要对各个规则进行描述)
display、flex-direction、flex-wrap、flex-flow、justify-content、align-items
伸缩盒元素规则：
flex-grow、flex-shrink、flex-basis、flex
11、【问答】

js数组中哪些方法是在原值上进行的修改？哪些方法没有对原值进行修改？

回答出方法的给3分，描述每个方法含义的给2分
改变原数组：push()、 pop() 、shift()、 unshift() 、splice()、 sort()、 reverse()
不改变原数组： concat() 、slice()、every()、some()、filter()、map()、forEach()
12、【问答】

请写出让元素垂直居中的多种布局方法？

需要学生写出代码
通过margin、padding挤压
通过相对定位、绝对定位
通过flex布局display:flex align-items:center
https://blog.csdn.net/ziminghuohua/article/details/72795003
13、【问答】

简述css3选择器的优先级机制？

css优先级取决于 权重、顺序、特权
权重规则：不同的选择器权重值不同
1000 style
100 id
10 class、伪类
1 元素、伪元素
当权重相等情况下，后者优先级比前者更大
规则中如果添加!important表示至高无上的权限
14、【问答】

伪元素选择器::after有哪些常见用法？

常用于清理浮动、盒子内部文本垂直居中、插入文本（字体图标）、…(2分)
代码说明（3分）
例如 ul::after{display:block;content:””;clear:both;}
15、【问答】

写出几个你熟悉的 Git 命令？

(每个命令0.5分)
git add
git commit
git push
git remote add origin
git pull
git checkout
git branch
git merge
git config
git reset
16、【问答】

在js中如何判断一个数据类型？

可以通过typeof来判断基本数据类型以及对象，函数 （2分）
通过Array.isArray()来判断引用数据类型是对象还是数组 （1分）
通过instanceof来判断对象是否是某个构造函数的实例对象（1分）
通过Object.prototype.isPrototypeOf(对象)来判断对象是否是某个原型链中的后代（1分）
通过isNaN()、isInfinite()来判断一个数字是否非数值类型，无穷数 （1分）
17、【问答】

在js的面向对象中继承方式有哪几种，分别进行描述？

原型链 2分
借用构造函数 2分
原型链与借用构造函数组合 1分
18、【问答】

简述js函数的this指向问题？

this指向实际操作的对象，如果没有操作对象则指代全局的global或者window对象
19、【问答】

如何实现一个对象的深拷贝？

方法1：使用JSON， var copy = JSON.parse(JSON.stringify(obj));
方法2：第三方库lodash 的cloneDeep
方法3：jQuery 自带的 extend 方法可以用来实现对象的复制
var a = {v1:1, v2:2};
var b = {};
$.extend(b,a);
方法4：自己封装实现
20、【问答】

什么是闭包？如何解决闭包打来的内存泄露问题？

闭包是指有权访问另一个函数作用域中的变量的函数，闭包的创建方式，就是在一个函数内部创建另外一个函数。
内存泄露问题：主动释放内存空间，例如
function showId() {
var el = document.getElementById(“app”)
el.onclick = function(){
aler(el.id)
// 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
}
}

// 改成下面
function showId() {
var el = document.getElementById(“app”)
var id = el.id
el.onclick = function(){
aler(id)
}
el = null // 主动释放el
}
21、【问答】

盒子模型种类及主要区别?

边框盒子/IE盒子/怪异盒子Border-box 内容盒子/W3C盒子/默认盒子content-box
区别：计算尺寸方式不同，
对于边框盒子设置的宽高是包含了border、padding、content的结果
对于内容盒子设置的宽高只是指content
box-sizing: ;可以改变盒子的模型

22、【问答】

简述http协议的报文格式

请求报文：浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体
响应报文：服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。响应报文中包含响应行、响应头、响应体。
23、【问答】

用递归的方法实现1到100求和。

function recursion(n){
if(n==0) return 1;
else return n+recursion(n-1);
}
var result=recursion(100);
console.log(result);
24、【问答】

输入一个字符串和一个字母，输出这个字母在这个字符串中出现的次数，例如：输入 hello,l 输出 2

输入一个字符串，输出这个字符串中出现最多的那个字符和次数。
方法一：
function count(str,char){
var res=0;//次数
for(var i=0;i<str.length;i++){
if(str[i]==char) res++;
}
return res;
}
var result=count(“hello”,“l”);
console.log(result);//2
方法二：
function count(str,char){
var pat=new RegExp(char,‘gm’);
var res=str.match(pat);
return res.length;
}
console.log(count(‘hello’,‘l’));//2
25、【问答】

编写代码实现数组扁平化输出，例如：输入[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5] 输出为[1,2,3,4,5,6,7,8,9,10,11,12,13,5]

方法一：
function mout(arr){
var brr=arr.toString().split(’,’).map(function(item){
return Number(item);
})
return brr;
}
var arr=[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5];
console.log(mout(arr));
// 输出为[1,2,3,4,5,6,7,8,9,10,11,12,13,5]
方法二：递归
function mout(arr){
if(!Array.isArray(arr)) return arr;
var brr=[];
for(var i in arr){
var item=arr[i];
brr=brr.concat(mout(item));
}
return brr;
}
var arr=[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5];
console.log(mout(arr));
// 输出为[1,2,3,4,5,6,7,8,9,10,11,12,13,5]
26、【问答】

使用任意一种排序算法对数组进行排序，例如：输入[3,2,1,6,12,8,9] 输出：[1,2,3,6,8,9,12]

冒泡排序：
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len - 1; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (arr[j] > arr[j+1]) { // 相邻元素两两对比
var temp = arr[j+1]; // 元素交换
arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
选择排序：
function selectionSort(arr) {
var len = arr.length;
var minIndex, temp;
for (var i = 0; i < len - 1; i++) {
minIndex = i;
for (var j = i + 1; j < len; j++) {
if (arr[j] < arr[minIndex]) { // 寻找最小的数
minIndex = j; // 将最小数的索引保存
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
插入排序：
function insertionSort(arr) {
var len = arr.length;
var preIndex, current;
for (var i = 1; i < len; i++) {
preIndex = i - 1;
current = arr[i];
while (preIndex >= 0 && arr[preIndex] > current) {
arr[preIndex + 1] = arr[preIndex];
preIndex–;
}
arr[preIndex + 1] = current;
}
return arr;
}
快速排序：
function quickSort(arr, left, right) {
var len = arr.length,
partitionIndex,
left = typeof left != ‘number’ ? 0 : left,
right = typeof right != ‘number’ ? len - 1 : right;
if (left < right) {
partitionIndex = partition(arr, left, right);
quickSort(arr, left, partitionIndex-1);
quickSort(arr, partitionIndex+1, right);
}
return arr;
}
function partition(arr, left ,right) { // 分区操作
var pivot = left, // 设定基准值（pivot）
index = pivot + 1;
for (var i = index; i <= right; i++) {
if (arr[i] < arr[pivot]) {
swap(arr, i, index);
index++;
}
}
}
swap(arr, pivot, index - 1);
return index-1;
}
function swap(arr, i, j) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}