前端面試題整理（帶答案--不定期更新）

1、寫出下面代碼打印結果：

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
// 以上只是 Foo 的構建方法，沒有產生實例，此刻也沒有執行

Foo.prototype.a = function() {
    console.log(3)
}
// 現在在 Foo 上掛載了原型方法 a ，方法輸出值爲 3

Foo.a = function() {
    console.log(4)
}
// 現在在 Foo 上掛載了直接方法 a ，輸出值爲 4

Foo.a();
// 立刻執行了 Foo 上的 a 方法，也就是剛剛定義的，所以
// # 輸出 4

let obj = new Foo();
/* 這裏調用了 Foo 的構建方法。Foo 的構建方法主要做了兩件事：
1. 將全局的 Foo 上的直接方法 a 替換爲一個輸出 1 的方法。
2. 在新對象上掛載直接方法 a ，輸出值爲 2。
*/

obj.a();
// 因爲有直接方法 a ，不需要去訪問原型鏈，所以使用的是構建方法裏所定義的 this.a，
// # 輸出 2

Foo.a();
// 構建方法裏已經替換了全局 Foo 上的 a 方法，所以
// # 輸出 1


//打印結果
//4
//2
//1

2、寫出下面代碼打印結果：

function changeObjProperty(o) {
  o.siteUrl = "http://www.baidu.com"
  o = new Object()
  o.siteUrl = "http://www.google.com"
} 
let webSite = new Object();
changeObjProperty(webSite);
console.log(webSite.siteUrl);


//打印結果
//http://www.baidu.com

執行函數changeObjProperty的時候是將webSite的引用傳遞給了函數的形參，也就是把webSite的引用地址複製給了o，函數裏面第一行改變的是對應引用地址內的對象的屬性值，也就是webSite的屬性值，第二行將o指向了另一個新對象，函數裏面第三行改變的是新對象的屬性值，跟webSite無關，故打印結果爲http://www.baidu.com；

可以對題目做如下改動，應該會更清晰：

function changeObjProperty(a) {
  a.siteUrl = "http://www.baidu.com"
  a = new Object()
  a.siteUrl = "http://www.google.com"
  a.age = 25
} 
var webSite = new Object();
webSite.age= 20
changeObjProperty(webSite);
console.log(webSite); // {age: 20, siteUrl: 'http://www.baidu.com'}

3、用 JavaScript 寫一個函數，輸入 int 型，返回整數逆序後的字符串。如：輸入整型 1234，返回字符串“4321”。要求必須使用遞歸函數調用，不能用全局變量，輸入函數必須只有一個參數傳入，必須返回字符串。

注意審題，要求必須使用遞歸函數

其實不考慮後面的要求完成整型到字符串的翻轉很簡單

let intToString = value => (value + '').split('').reverse().join('')
intToString(12345)    //54321

但是要用遞歸

function fun(num){
    let num1 = num / 10;
    let num2 = num % 10;
    if(num1<1){
        return num;
    }else{
        num1 = Math.floor(num1)
        return `${num2}${fun(num1)}`
    }
}
var a = fun(12345)
console.log(a)
console.log(typeof a)

4、給定一個數組 nums，編寫一個函數將所有 0 移動到數組的末尾，同時保持非零元素的相對順序。要求：必須在原數組上操作，不能拷貝額外的數組；儘量減少操作次數。示例：輸入：[0,1,0,3,12]，輸出: [1,3,12,0,0]

function zeroMove(array) {
   let len = array.length;
   let j = 0;
   for(let i=0;i<len-j;i++){
       if(array[i]===0){
           array.push(0);
           array.splice(i,1);
           i --;
           j ++;
       }
   }
   return array;
}

5、打印出1-10000之間所有的對稱數

[...Array(10000).keys()].filter((x) => {
    return x.toString().length > 1 && x === Number(x.toString().split('').reverse().join(''))
})

6、Vue 的父組件和子組件生命週期鉤子執行順序是什麼

• 加載渲染過程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子組件更新過程：父beforeUpdate->子beforeUpdate->子updated->父updated

7、寫出打印結果

var a={}, b='123', c=123;  
a[b]='b';
a[c]='c';  
console.log(a[b]);   //c
//其他類型的鍵名會被轉換成字符串類型，所有'123'和123作爲鍵名是一樣的


var a={}, b=Symbol('123'), c=Symbol('123');  
a[b]='b';
a[c]='c';  
console.log(a[b]);  //b
//Smybol類型的值都是不相等的


var a={}, b={key:'123'}, c={key:'456'};  
a[b]='b';
a[c]='c';  
console.log(a[b]);  //c
//b和c兩個對象調用toString方法後都被轉換成字符串[object Object]，所以兩個鍵名是一樣的

這題考察的是對象的鍵名的轉換。

• 對象的鍵名只能是字符串和 Symbol 類型。
• 其他類型的鍵名會被轉換成字符串類型。
• 對象轉字符串默認會調用 toString 方法。

8、介紹一下BFC、IFC、GFC 和 FFC

FC的全稱是：Formatting Contexts，它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

BFC（Block formatting contexts）：塊級格式上下文
頁面上的一個隔離的渲染區域，那麼他是如何產生的呢？可以觸發BFC的元素有float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC有什麼作用呢？比如說實現多欄佈局’

IFC（Inline formatting contexts）：內聯格式上下文
IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)IFC中的line box一般左右都貼緊整個IFC，但是會因爲float元素而擾亂。float元素會位於IFC與與line box之間，使得line box寬度縮短。 同個ifc下的多個line box高度會不同
IFC中時不可能有塊級元素的，當插入塊級元素時（如p中插入div）會產生兩個匿名塊與div分隔開，即產生兩個IFC，每個IFC對外表現爲塊級元素，與div垂直排列。
那麼IFC一般有什麼用呢？
水平居中：當一個塊要在環境中水平居中時，設置其爲inline-block則會在外層產生IFC，通過text-align則可以使其水平居中。
垂直居中：創建一個IFC，用其中一個元素撐開父元素的高度，然後設置其vertical-align:middle，其他行內元素則可以在此父元素下垂直居中。

GFC（GrideLayout formatting contexts）：網格佈局格式化上下文
當爲一個元素設置display值爲grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以通過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格項目（grid item）上定義網格行（grid row）和網格列（grid columns）爲每一個網格項目（grid item）定義位置和空間。那麼GFC有什麼用呢，和table又有什麼區別呢？首先同樣是一個二維的表格，但GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更爲精細的渲染語義和控制。

FFC（Flex formatting contexts）:自適應格式上下文
display值爲flex或者inline-flex的元素將會生成自適應容器（flex container），可惜這個牛逼的屬性只有谷歌和火狐支持，不過在移動端也足夠了，至少safari和chrome還是OK的，畢竟這倆在移動端纔是王道。Flex Box 由伸縮容器和伸縮項目組成。通過設置元素的 display 屬性爲 flex 或 inline-flex 可以得到一個伸縮容器。設置爲 flex 的容器被渲染爲一個塊級元素，而設置爲 inline-flex 的容器則渲染爲一個行內元素。伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何佈局。