前端筆試題面試題記錄（下）

時間 2019-11-06

標籤前端筆試面試記錄欄目快樂工作简体版

原文原文鏈接

前言

接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，由於最近比較忙這篇已經拖了好久了。如今剛剛開始銀四了，應該仍是有些小夥伴在找工做，時間還不算太晚，但願本篇能夠幫到這些小夥伴。css

我的博客瞭解一下：obkoro1.comhtml

本文主要目錄以下：前端

面試題QA
面試遇到的一些小問題
Vue系列問題

面試題QA

Q：瞭解ES6的let和const變量聲明嗎？跟ES5的var有哪些區別？

let

在同一個做用域裏面：var能夠重複聲明變量，let不能重複聲明同一個變量。vue

es5是函數做用域，即一個函數裏面纔是一個做用域，es6是塊級做用域（花括號'{這裏面是一個做用域}'），如：if、for花括號裏面都是一個做用域。webpack
var有變量提高，能夠在變量聲明以前使用，let不存在變量提高，在變量以前使用會報錯。css3
let 有暫時性死區，阮一峯大佬es6入門文檔解釋以下： git

const

const的不少特性跟let的特性同樣，都有：不可重複聲明，不存在變量提高，有暫時性死區，都是塊級做用域。es6
還有一些跟let命令不同的地方：const必須在聲明的時候賦值，否則就會報錯。const聲明的常量不能更改。web

這裏的常量指的是：數值、字符串、布爾值，對於引用類型（數組和對象），const只能保證指針是固定的，至於數組和對象內部有沒有改變就是const不能控制的地方面試

Q：Css的優先級。

這類也一般出如今筆試題中，具體的題目記不太清了。

權重優先級：
!important>style(1000)>id(100)>class(10)
!important是優先級最高的無論權重多少，始終採起important。
若是兩個選擇器做用在同一元素上，計算權重值，相加。權重高者屬性生效。
（筆試題就出現過層疊的class id選擇器，做用在同一個標籤上，而後問最後哪一個css屬性生效）
複製代碼

有興趣的能夠看一下我寫的你對CSS權重真的足夠了解嗎

Q：繼承函數對象的實例方法、原型的繼承。

函數對象的繼承，在面試的時候，通常出如今筆試題那邊，也碰到過幾回，下面給出一個答案。

function father(name){//父函數
  this.name=name|'koro1';
  this.code=function(){ //父類的實例方法
    console.log(this.name+'coding');
  }
};
father.prototype.add=function(food){ //父類的原型方法
  console.log(this.name+'eat'+food);
}
function son(name){ //子函數
  father.call(this); //將this綁定到子類，綁定父類的實例方法code（原型方法add還未綁定）
  this.name=name|| 'OBKoro1';
}
son.prototype = new father();//把父類的原型方法綁定到子類，實現繼承
var sonVar= new son('faker');//這裏也能夠傳參name
son.prototype.constructor = son;//修復構造函數的指向
console.log(sonVar.code());
console.log(sonVar.add());//能夠調用父類的方法了
複製代碼

Q:經過`reduce`函數來實現簡單的數組求和，示例數組`[3,4,8,0,9]`;

這是一個簡單的筆試題，下面寫了兩種方法，一種是常見遍歷的方法，還有一種是使用eval()方法。

let reduce=(arr)=>{ //第一種常規遍歷。
        let num=0; 
        for(let [index,value] of arr.entries()){
            num+=value;
        }
        return num;
    }
    let reduce=(arr)=>eval(arr.join("+")); //第二種 
    //join() 方法把數組元素放入字符串 上面的栗子： arr.join("+")獲得字符串:'3+4+8+0+9';
    // eval() 函數計算字符串 ,並執行其中的的 JavaScript 代碼
    //經提醒：原來有一個reduce()數組求和的方法，把這個方法加上去
    let result=[3,4,8,0,9].reduce((total,value)=>{ //這兩個參數是默認參數不用設置的
		return total+value
	});
複製代碼

Q：call()和apply()有什麼區別？

call()和apply()第一個參數將用做函數內 this 的值,用於改變函數的this指向。call和apply的區別在於call()方法接受逗號分隔的參數做爲後面的參數，apply()接受一個參數數組做爲後面的參數。

從別的博客那邊看到一個簡單的記憶方法：從call中的 C 聯想到逗號分隔（comma-separated），從apply中的 A 聯想到數組（array）。
複製代碼

Q：position有哪些值？有什麼做用？

static。默認值，不脫離文檔流，top，right，bottom，left等屬性不生效。
relative。不脫離文檔流，依據自身位置進行偏離，當子元素設置absolute，將依據它進行偏離。
absolute。脫離文檔流，依據top，right，bottom，left等屬性在正常文檔流中偏移位置。
fixed。經過瀏覽器窗口進行定位，出現滾動條的時候，不會隨之滾動。

Q:如何實現一個閉包？閉包的做用有哪些？

在一個函數裏面嵌套另外一個函數，被嵌套的那個函數的做用域是一個閉包。

做用：建立私有變量，減小全局變量，防止變量名污染。能夠操做外部做用域的變量，變量不會被瀏覽器回收，保存變量的值。

Q:請從`2017-05-15T09:10:23 Europe/Paris`提取出結果`["2017","05","15","09","10","23"]`

這是一道筆試題，正則相關的，看他們要的內容就能夠知道，要把全部的數字都提取出來，能夠寫一個只獲取數字的正則表達式。

let str = '2017-05-15T09:10:23 Europe/Paris';
let arr = str.match(  /\d{1,}/g); 
//match會返回一個數組，
// \d 查找數字  
// {1,} 表示至少重複幾回 
// /g表示全局搜索
複製代碼

Q:請描述一下`Promise`的使用場景，'Promise'它所解決的問題以及如今對於異步操做的解決方案。

這是一道筆試題，這是我當時的回答。

Promise的使用場景：ajax請求，回調函數，複雜操做判斷。

Promise是ES6爲了解決異步編程所誕生的。

異步操做解決方案：Promise、Generator、定時器（不知道算不算）、還有ES7的async

面試遇到的一些小問題：

這裏主要是面試中遇到的一些小的問題，一兩句話就能夠說清的東西，你們能夠稍微看一看。

函數參數變量提高

function aa(val){  //函數參數的變量也會提高
    console.log(val);//'函數傳參'
     var val='變量聲明';
     console.log(val);//'變量聲明'
}
    aa('函數傳參');  
複製代碼

js有哪些方法定義對象？

var obj=new Object();//new 一個對象
    var obj={name:"OBKoro1"} //對象字面量寫法
複製代碼

字符串數字轉換運算的問題

console.log(1+'2'+'2'); //122  
      console.log(+'1'+-'2'+'2');//-12
      console.log('A'+'B'+'2');//AB2
      console.log('A'-'B'+2);//NaN
      //兩個都是數字才能相加，不然都是以字符串形式拼接。
      //相減只能兩個都是數字，字符串也會轉成數字，若是不能轉換，值就爲NaN
複製代碼

split()、join()的區別？

split()是將字符分割成一個數組,join()將數組轉爲一個字符串
複製代碼

pop()push()unshift()shift()的做用？

pop()刪除並返回數組的最後一個元素。
    push()可向數組的末尾添加一個或多個元素，並返回新的長度。
    unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。
    shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。
複製代碼

判斷一個數是不是整數

function isIntefer(x){
        return x%1===0; //返回布爾
    }
複製代碼

如何將字符串轉爲數字，如：`12.3b`？

var num=parseFloat('12.3b')
複製代碼

什麼是外邊距合併？

當兩個垂直外邊距相遇時，它們將造成一個外邊距，合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

Q:你經常使用的git/svn 命令行有哪些？行內元素有哪些，塊狀元素有哪些？css有哪些選擇器？

自行谷歌，相似的還有css3新增的屬性，H5新增的屬性之類的，有空的話，稍微背一背，都碰到過。
複製代碼

Vue系列問題：

我在面試過程當中不多被問到框架，不少是在筆試題中碰到的，在介紹本身項目的時候，有時候本身會解釋這裏用到了Vue的什麼技術，這個時候面試官可能就會順着問一問Vue，總的來講問的也不會太深。

如下是筆試真題：

vue-router怎麼定義動態路由？怎麼獲取傳過來的動態參數？
```
定義：path:'a/:value' 獲取：this.$route.params.value。
複製代碼
```
說出至少4中vue當中的指令和它的用法。vue文檔顯示13個指令
vue如何綁定事件。@click="事件名"

v-show和v-if指令的共同點和不一樣點？

1.v-if是刪除/添加Dom標籤，不佔據文檔位置,v-show切換css的display屬性，控制顯示隱藏，還會佔據文檔位置。
  2.v-if會刪除dom標籤因此v-if性能消耗會高一些，須要頻繁切換的話，使用v-show會好一點。
複製代碼

<keep-alive></keep-alice>的做用的是什麼？

`<keep-alive>`是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。
複製代碼

列舉三個Vue經常使用的生命週期鉤子函數？Vue文檔
分別寫出webpack打包給服務器和本地開發預覽的命令代碼:
```
npm run build npm run dev  我都以爲很弱智。。
複製代碼
```

vue 父子組件是怎麼進行傳參的？

父組件傳參給子組件經過props，子組件傳參給父組件是用事件傳遞的。細節見文檔。
複製代碼

v-model是用來作什麼的，怎麼使用。

用來爲input輸入框或者單選框、select選擇框這類的東西作雙向綁定的。
  使用栗子：<input v-model="inputData"/>
複製代碼

Vuex的工做流程，以及它的做用，使用場景。

vuex的工做流程：
1. 在vue組件裏面，經過dispatch來觸發actions提交修改數據的操做。
2. 而後再經過actions的commit來觸發mutations來修改數據。
3. mutations接收到commit的請求，就會自動經過Mutate來修改state（數據中內心面的數據狀態）裏面的數據。
4. 最後由store觸發每個調用它的組件的更新
Vuex的做用：項目數據狀態的集中管理，複雜組件(如兄弟組件、遠房親戚組件)的數據通訊問題。
vue的服務端渲染
vue的雙向綁定
```
兩個問題都不會...
複製代碼
```