2021-2022年前端面试题整理1（含答案）

前端切图仔Zz

已于 2022-04-18 09:29:32 修改

阅读量454

点赞数 2

分类专栏：前端面试题 css和html JavaScript 文章标签： js 面试前端 css html

于 2020-08-07 11:42:06 首次发布

本文链接：https://blog.csdn.net/Amouzy/article/details/107856222

版权

css和html 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

JavaScript

19 篇文章 1 订阅

订阅专栏

前端面试题

11 篇文章 10 订阅

订阅专栏

1、如何实现bootrap？

bootstrap.js
 <head> 之中添加 viewport 元数据标签。

2、媒体查询分哪几个？具体宽度是多少？

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

3、如何上传项目到github？用到什么命令？
第一步：建立本地git仓库

cd到你的本地项目根目录下，执行git命令
git init

第二步：将本地项目工作区的所有文件添加到暂存区

git add . //如果想添加项目中的指定文件，那就把.改为指定文件名即可

第三步：将暂存区的文件提交到本地仓库

git commit -m ""  //冒号里面写注释语句

第四步：在Github上创建自己的repository，
点击下面的Create repository就会进入下面这个界面，然后复制一下地址栏里的https地址
第五步：将本地仓库关联到Github上

git remote add origin https://github.com/FISHBALL1/DropList

在这一步时如果出现错误：fatal:remote origin already exists。那就先输入 git remote rm origin。再输入 git remote add origin

第六步：如果在Github上创建仓库时新建了README需要先pull到本地合并

git pull --rebase origin master

第七步：最后一步，将代码由本地仓库上传到Github远程仓库

git push -u origin master

执行完之后如果无错误就上传成功了，需要提示的是这里的master是Github默认的分支，如果你本地的当前分支不是master，就用git checkout master命令切换到master分支，如果你想用本地当前分支上传代码，则把第六步的命令里的master切换成你的当前分支名即可。

4、
settimeout用法必看
不起眼的开始
招聘前端工程师，尤其是中高级前端工程师，扎实的 JS 基础绝对是必要条件，基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候，我经常会提供下面这段代码，然后让候选人分析它实际运行的结果：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}
console.log(new Date, i);

5 -> 5,5,5,5,5，即第 1 个 5 直接输出，1 秒之后，输出 5 个 5；
这就要求候选人对 JS 中的定时器工作机制非常熟悉，循环执行过程中，几乎同时设置了 5 个定时器，一般情况下，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的，显而易见，正确的描述是 B。
闭包
如果这道题仅仅是考察候选人对 JS 异步代码、变量作用域的理解，局限性未免太大，接下来我会追问，如果期望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码？熟悉闭包的同学很快能给出下面的解决办法：

for (var i = 0; i < 5; i++) {
    (function(j) {  // j = i
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(i);
}
console.log(new Date, i);

5、javascript json字符串与对象相互转换

在实际项目中，经常遇到字符格式的问题，记下来以便日后方便查看。用到两个函数：JSON.stringify() 和 JSON.parse()。

使用ajax向后台请求数据，后台给前端返回数据，明明后端脚本写的是json函数处理后的json格式，但是前端接收数据时，却时而是object，时而是字符串，令人百思不得其解。具体原因我还不是很清楚。

在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象。所以，JSON对象和JSON字符串之间的相互转换是关键

我的解决思路是：首先直接使用返回的数据，如不能达到预期效果，则用typeof查看返回数据的格式是什么或者console.log打印一下看具体返回的数据是什么，然后在根据需要使用函数进行二次处理。

例如：

JSON字符串:

var str1 = '{ "name": "cxh", "sex": "man" }';

JSON对象:

var str2 = { "name": "cxh", "sex": "man" };

一、JSON字符串转换为JSON对象

要使用上面的str1，必须使用下面的方法先转化为JSON对象：

//由JSON字符串转换为JSON对象

var obj = eval('(' + str + ')');
或者
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
或者
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
然后，就可以这样读取：
Alert(obj.name);
Alert(obj.sex);

特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。

二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。

例如：

var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);

注意：

上面的几个方法中，除了eval()函数是js自带的之外，其他的几个方法都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个方法都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法，则说明您的json包版本太低。