前端常見的面試題

該文章僅用來記錄博主求職過程當中遇到的一些常見的面試題，供本身學習，請不當心看到該文章的童鞋自行參考

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.平時是怎麼學習的