前端简答算法题汇总

本文主要是介绍前端简答算法题汇总，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、linux中vim有几种模式？如何进行这几种模式的切换。
命令行模式、插入模式、底行模式
命令行模式->插入模式 I A O i a o
命令行模式->底行模式 ： ?
插入模式->命令行模式 ecs

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
pa -ef | grep java

7、什么是块元素，块元素有哪些特点？
块元素常用于搭建网页框架，常见的块元素有：div、p、h1~h6
特点：独占一行空间，高度由内容决定，可以指定宽高，块元素内允许嵌套其他块元素与行内元素。

8、em与rem的区别
em：相对于当前元素上的字体大小
rem：相对于html元素上声明的字体大小

9、如何使用css绘制一个三角形？
不给盒子元素设置宽高，给4个方向分别设置边框，但是颜色都为透明，设置其中一个方向边框色。

#app{
	width:0;
	height:0;
	border:100px soild transparent;
	border-botton:100px solid #ccc;
	}

10、简述flex布局
伸缩盒布局用于解决块元素在x轴以及y轴上排列的问题。
伸缩盒容器规则：
display
flex-direction 决定主轴的方向 row column
flex-wrap 换行
justify-content 块元素在主轴上对排列方式
align-items 在交叉轴上如何对齐
伸缩盒元素规则：
flex-grow 放大
flex-shrink 缩小
flex-basis 如何分配空白空间

11、js数组中哪些方法是在原值上进行的修改？哪些方法没有对原值进行修改？
改变原数组：push()后面增加、pop()删除后面的、shift()删除前面的、unshift()前面增加、sort()排序
不改变原数组：concat()、slice()、every()、some()、filter()、map()、forEach()

12、写出让元素垂直居中的多种布局方法
通过margin、padding挤压
通过相对定位、绝对定位
通过flex布局display:flex align-items:center

13、简述css3选择器的优先级机制
如果添加!important表示至高无上的权限
权重规则：
1000 style
100 id
10 class、伪类
1 元素，伪元素
当权重相等情况下，后者优先级比前者更大

14、伪元素选择器 ::after 有哪些常见用法？
常用于清理浮动、插入文本

ul::after{
	display:bolck;
	content:"";
	clear:both;
	}

15、写出几个你熟悉的Git命令
git add 添加到暂存区
git commit 提交
git push 上传
git pull 更新
git branch 删除

16、在js中如何判断一个数据类型？
可以通过typeof来判断基本数据类型以及对象，函数。
通过Array.isArray()来判断引用数据类型是对象还是数组
通过instanceof来判断对象是否是某个构造函数的实例对象
通过isNaN()、isInfinite()来判断一个数字是否非数值类型，无穷数。

17、在js的面向对象中继承方式有哪几种，分别进行描述
原型链
借用构造函数
原型链与借用构造函数组合

18、简述js函数的this只想问题
this指向实际操作对象，如果没有操作对象则指向全局的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、什么是闭包？如何理解闭包打来的内存泄露问题？
闭包是能够访问另一个函数作用域中的变量的函数，闭包的创建方式，就是一个函数内部创建另一个函数。
内存泄露问题：主动释放内存空间，再退出函数之前，不用的变量全部删除，赋值为null

21、盒子模型种类及主要区别？
边框盒子/IE盒子/怪异盒子Border-box
内容盒子/W3C盒子/默认盒子 content-box
区别：计算尺寸方式不同，
对于边框盒子设置的宽高是包含了border、padding、content的结果
对于内容盒子设置的宽高只是指content

22、简述http协议的报文格式
请求报文：浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求体，请求头，请求体
响应报文：服务器接收到前端发来的请求，会将相应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。响应报文中包含响应行，响应头，响应体。

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

function add(n1,n2) {
    var num = n1 + n2;
    if(n2 + 1 > 100) {
        return num;
    }else{
        return add(num,n2 + 1)
    }
}
var sum = add(1,2)
console.log(sum);

24、统计一个字符串中某个字符出现了几次，例如：输入hello，l输出2。

function sort(str,n) {
    var num = 0;
    for(i = 0; i < str.length; i++){
        if(str[i] == n)
        num++
    }
    return num;
}
console.log(sort('hellojavascript','a'));

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]。

var arr=[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5];
方法一：var brr  = arr.toString().split(‘,’)
             console.log(arr);
方法二： console.log(arr.flat(Infinity))

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

var arr = [3, 2, 1, 6, 12, 8, 9]
function setSort(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j + 1]
                arr[j + 1] = arr[j]
                arr[j] = temp
            }
            
        }
    }
    return arr;
}
setSort(arr)
console.log(arr);

这篇关于前端简答算法题汇总的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！