前端常见的面试题

该文章仅用来记录博主求职过程当中遇到的一些常见的面试题，供本身学习，请不当心看到该文章的童鞋自行参考

HTML部分

1.HTML字符转义

字符	含义
&amp	&
&gt	>
&lt	<
&nbsp	空格

2.html5哪些标签能够作SEO优化

3.不适用border画1px高的线，在不一样浏览器的标准模式都能保持一致

<div style="height: 1px;background: #000;"></div>
复制代码

4.布局题

关于弹性布局flex的学习

<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
.container{
    padding: 0 30px;
    display: flex;
}
.left{
    width: 100px;
    order: 1;
}
.middel{
    height: 500px;
    order: 2;
    width: 100;
}
.right{
    width: 100px;
    order: 3;
}
复制代码

5.行内元素，块级元素都有哪些，区别？

6.浏览器内多个标签页之间的通讯

7.“品”字布局设计

CSS部分

1.CSS选择符

2.清除浮动，优缺点

3.画三角形

// 向上三角形, 不带边
{
    width: 0;
    height: 0;
    border-bottom: 100px solid green;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
复制代码

查看更多css画三角形

4.水平垂直居中

1.已知元素宽高

{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;  // 宽度的一半
    margin-top: -100px;   // 高度的一半
    width: 200px;
    height: 200px;
}

2.不知道元素宽高
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
或者
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

复制代码

5.盒子模型

JS部分

大部分都是程序输出、写一段js代码实现一个简单的功能

在纸上手写代码仍是和在编辑器里写代码有很大的区别的，写过的童鞋应该都深有体会

1. 获取url中的参数

// 方法1，拆分url
function getParams(url) {
    if (url.length <= 1) {
        return;
    }
    url = url.replace('?', '');
    let arr = url.split('&');
    let key, val, key_val = [], obj = {};
    for (let i = 0; i < arr.length; i++) {
        key_val = arr[i].split('=');
        key = key_val[0];
        val = key_val[1];
        obj[key] = val;
    }
    return obj;
}
getParams(location.search);


// 方法2，正则
// 第一种是必须掌握的，不少面试官也会问，使用正则的方式怎么写，各位看官，下面请
function getParams(url){
    if (url.length <= 1) {
        return;
    }
    url = url.replace('?', '');
    let reg = /(\w+)=(\w+)/ig;
    let obj = {};
    url.replace(reg, (a, b, c) => {
	    obj[b] = c;
    });
    return obj;
}
console.log(getParams(location.search));
复制代码

有关于正则和repalce的学习，须要扎实的正则基础

该正则匹配不到a=1.0等参数中带有. * _等特殊符号的参数

2. 手写一个冒泡算法

网上这样的一搜一大把，不要在须要用到的时候，直接去网上直接ctrl + c,ctrl + v,等下次用的时候再去寻找，也不要死记硬背代码，要明白原理，这样手写的时候，就手到擒来了

function mpsort(arr){
    for(let i = 1;i < arr.length;i++){
        for (let j = 0;j < arr.length - i;j++){
            if(arr[j] > arr[j+1]){
                let temp;
                temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    return arr;
}
复制代码

3.分解rgb

给定一个颜色纸字符串，转成对应的rgb，测试用例：#223344 输出：rgb（34，51，68）

parseInt(): 第二个参数是以n进制解析当前字符串而后转为10进制，而不是要转为几进制，第二个参数就为几

function formatColor(str){
    str = str.replace('#', "");
    let r, g, b;
    if(str.length === 3){
        // #223344 <=> #234
       r = str.slice(0, 1);
       g = str.slice(1, 2);
       b = str.slice(2, 3);
       r += r;
       g += g;
       b += b;
    }else {
        r = str.slice(0, 2);
        g = str.slice(2, 4);
        b = str.slice(4, 6);
    }
    return `rgb(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)})`;
}
复制代码

4.数组的方法都有哪些

关于slice(),以前一直记得是第二个参数为个数，应该为结束元素的下角标

5.二分法

给定一个有序数组和一个值，查找该值的插入索引号，若是已经存在，则返回该索引号，要求使用 二分法，不能使用系统函数，注意代码边界和效率

测试用例： [1,3,5,6,8] 5 => 2 ; [1,3,5,6,8] 7 => 4

6.字符串中子串出现的位置及次数

function findStr(){
    
}
复制代码

7.call()、apply()、bind()用法及区别

test(var1, var2, var3)的调用改为:
func.apply(this, [var1, var2, var3]);
func.call(this, var1, var2, var3);
复制代码

8.将字符串value做为参数key拼接到一个url连接后边，返回url

function connectUrl(url, key, value){
    
}
复制代码

9.生成len个字符的随机字符串，集合为a~z，0~9，仅可使用Math.round(),Math.random()

function randomStr(len){
    
}
复制代码

10.网页中引入js的三种方式

11.进制之间的转换

12.将字母转为ascii码的js写法

13.使用&运算符判断一个数的奇偶

14.this问题

var mObj = {
    foo: 2,
    test: function(){
        var foo = 3;
        var self = this;
        console.log(this.foo); // 2
        console.log(self.foo); // 2
        (function(){
            foo: 4;
            // 自执行函数中this指向window
            console.log(this.foo); // undefined
            console.log(self.foo); // 2
        }());
    }
}
mObj.test();
复制代码

15.typeof返回类型

16.阻止事件冒泡和默认事件

17.不适用循环，建立一个100长的数组，元素等于其下角标

18.随机数

a.参数n是整数

b.返回一个数组

c.n个随机不重复的整数

d.整数范围11~41

function randomInt(n){
    
}
复制代码

19.程序输出题

var funcs = [];
for(var i = 0;i < 10;i++){
    funcs.push(function (){
        console.info(i);  
    })
}
funcs.forEach(function(func){
    func();
});
复制代码

如何输出0~10？使用let定义i，为何能够

20.程序输出题

// title 01
function fun(n, o){
    console.log(o);
    return {
        fun: function(m){
            return fun(m, n);
        }
    }
}
var a = fun(0);  // undefined
a.fun(1);        // 0
a.fun(2);        // 0
a.fun(3);        // 0


// title 02
var a = 100;
var b = a;
a = 200;
var c = a+++b;
console.log(b);
console.log(c);


// title 03
function sidEffecting(ary){
    ary[0] = ary[2];
}
function bar(a, b, c=4){
    c = 5;
    sidEffecting(arguments);
    return a + b + c;
}
console.log(bar(2, 2, 2)); // 12
复制代码

21.将下列对象变成数组，并去重

var data = {a: 1,b: 2,c: 3,d: 4,e: 1,f: 4}
// 利用Set的特性
function objToarr(obj){
    let arr = [];
    for (let key in obj){
        arr.push(key);
        arr.push(obj[key]);
    }
    return Array.from(new Set(arr));
}
复制代码

22.js原型

23.跨域

24.数组打乱顺序

25.手写快排

26.浏览器从输入url到页面渲染完成的过程都发生了哪些事情

27.统计数组中各元素出现次数

webpack部分

1.webpack做用

2.webpack参数

Git部分

1.Git命令输出全部分支

git remote -v
复制代码

2.Git为了拉去新代码，将当前未提交的修改缓存起来，之后再用

暂无
复制代码

Vue部分

1.MVC和MVVM

2.双向绑定原理

3.v-if和v-show的区别

4.如何实现vue双向绑定，给出代码

5.$nextTick

6.组件通信

ES6部分

1.ES6的新特性

2.Promise

3.箭头函数

4.扩展运算符

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y, z); // 1, 2
复制代码

HTTP协议部分

1.http协议请求Header字段中，服务器识别前端浏览器类型的字段为

2.http状态码

性能优化

1.前端优化的方法

2.vue单页面应用首页加载慢如何优化

番外篇

1.自我介绍

2.为何离职

3.职业规划

4.项目介绍及开发过程当中遇到什么难题，怎么解决

这里有坑，请注意：

必定要让这些难题出如今你最擅长的领域，这样才会在接下来的延伸问题中不至于被大几率问卡壳

5.简述如今流行技术，及常去网站

6.平时是怎么学习的