前端面试问题总结-第三篇

2018-09-02

1.请写出你知道的http状态码和含义？越多越好？

2.简述弹性布局有哪些属性？各个属性的用途？

3.请用css3画一个扇形？或者一个环形？

主要的实现思路：

画一个高度和宽度为0的矩形，但是border值为100，就是四个三角形
设置border-radius为50%，那就是，四个扇形，此时每个扇形的角度为90度，怎样来设置为小于90度呢？
将其他三个设置为透明的即可；

怎样实现一个环状的：将内部的高和宽设置为大于零的即可；

4.用css定义一个宽高不定，水平垂直居中的弹框？

body{
	 width:100%;
	 height:100%;
	}
#toast{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	max-width:300px;
        height:auto;
        background-color: #CCCCCC;
	line-height: 20px;
        word-wrap: break-word;  /*自动换行，十分重要的设置*/
        word-break: break-all;
        overflow: auto;
 }

5.写出在浏览器console执行完左侧代码以后alert的内容，提示：接下来三行代码都有三次弹框；

function test(a,b){
   alert(b);
   return{
        test:function(c){
          return test(c,a);
    }        
  }
}
//请写出代码的执行结果
var a=test(100);a.test(200);a.test(300);
var b=test(101).test(201).test(301);
var c=test(102).test(202); c.test(302);

6.求代码的执行结果？

<script>
   var string="test";
   document.write('<src'+'ipt>console.log(string);arrFun([1]);console.log(num));</'+'script>');
</script>
<script>
var num=456;
function arrFun(arr){
if(arr instanceof Array){
   console.log("is Array");
}else{
    console.log("not Array");
}
arrFun(string);
arrFun([string]);
}
</script>

7.如果你要掌握一门后端语言，你会使用哪一门？为什么？

8.请使用es6实现一个工厂模式？

9.有以下数据结构，需要用一段代码将其转化为树形结构，请写出这段函数的实现。

var data=[
    {"parent_id":0,"id":1,"value":"XXX"},
    {"parent_id":1,"id":3,"value":"XXX"},
    {"parent_id":4,"id":6,"value":"XXX"},
    {"parent_id":3,"id":5,"value":"XXX"},
    {"parent_id":2,"id":4,"value":"XXX"},
    {"parent_id":1,"id":2,"value":"XXX"},
];

//树形结构如下
var  tree={
      "1":{
          "children":{
                   "2":{
                        "children":{
                              "4":{
                              "children":{
                                  "6":{}
                               }
                            }
                       },
                   },
                   "3":{
                       "children":{
                            "5":{}
                          }
                   }
           }
     }
}

10.有一个字符串 I have a dream,需要将dream替换为package,请用三种方法实现?

replace
slice
substring

11.以Vue或者react为例，画出组件的生命周期？两个都要画出来，非常的重要?做一个实现思想的对比？

12.常见的技能考察熟悉度，也是对于自我技能的总结？

技能熟悉度调查表
技能点	了解	用过	熟练	技能点	了解	用过	熟练
jQuery			✔	eslint
Zepto		✔		jshint
Vue		✔		jslint
Vue2		✔		json
VueX		✔		shell
React	✔			Ubuntu
Redux	✔			Centos	✔
React-Native	✔			sublime		✔
Angular	✔			webstorm			✔
ES6		✔		vim
HTML5			✔	v8	✔
CSS3			✔	chrome			✔
Sass		✔
Less		✔		Express	✔
Bootstrap			✔	Koa	✔
Nodejs		✔		Php	✔
Webpack		✔		Java	✔
Grunt		✔		Python	✔
Gulp	✔			微信开发	✔
coffescript	✔			小程序		✔
Svn		✔		app混合开发			✔
Git		✔		SQL		✔
Jenkins 持续集成工具	✔

陌生工具解读：

vim :是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。
eslint ：是一个代码规范和错误检查工具
jshint：代码规范检查工具
jslint: JSLint是一个JavaScript验证工具（非开源），可以扫描JavaScript源代码来查找问题
shell： Shell 是一个用 C 语言编写的程序，它是用户使用 Linux 的桥梁。Shell 既是一种命令语言，又是一种程序设计语言。
Shell 是指一种应用程序，这个应用程序提供了一个界面，用户通过这个界面访问操作系统内核的服务。
ubuntu:Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的开源GNU/Linux操作系统，Ubuntu 是基于DebianGNU/Linux，支持x86、amd64（即x64）和ppc架构，由全球化的专业开发团队（Canonical Ltd）打造的，是一个版本的Linux系统，同类的系统还有centos,red hat,debian等等；

2018-09-06

1.请问你了解原型链子吗?讲解一下？

2.es6中实现继承，代码复用的方法是?class extends来实现继承的，但是底层是使用什么实现的呢?

平安的面试官说es6的继承也是用es5中的prototype来实现的。是这样子实现的吗？

3.vue的生命周期有哪些？在每个生命周期上一般绑定哪些事件呢?常见的有八大生命周期。分别是：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed

4.Vue的el和data分别在哪两个周期时就产生了，并挂载到dom上的？

分别是created和mounted阶段实现挂载；

5.canvas和SVG之间的区别是什么？为什么SVG是矢量图，其拉伸后不会存在清晰度的变化?

因为svg是通过xml文件的格式来显示图片的，是一个文件；

canvas底层是通过像素点来描绘图片的，拉伸后会存在不清晰的问题；

6.Array的原型是什么？

 var test=Array.prototype;
    console.dir(test);  

    var test1=Array.prototype.__proto__.__proto__;
    console.dir(test1);

    var test2=Array.prototype.__proto__.constructor;
    console.dir(test2);

7.typeof 的作用是干啥的？typeof返回的值有六种类型？分别是那六种?

undefined
string
boolean
number
object或者null
function

typeof Array    //function
typeof Object   //function

8.请问Vue中的Vue-cli脚手架的源代码实现思路查看。

9.promise的实现原理理解吗？