HTML5教程

前端简答算法题汇总

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

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);
这篇关于前端简答算法题汇总的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!