隔壁寢室的小姐姐最近面的很多，她差不多已經有意向的offer了！大概10月中就能逃離這里了，我也要加油！盡快逃離這里！今天就是聽她面試聽到的一部分面試題！今天也要加油呀！！！

盒子垂直居中

1、position+transfrom

position : absolute; top : 50%; left: 50%; transform : translate(-50%,-50%)

2、position定位

position : absolute; top : 50%; left: 50%; margin-left=-50%; margin-top=-50%

3、flex布局

display : flex; justify-content:center; align-items:center;

4、給父盒子設置屬性

display : table-cell; text-align : center; vertical-align :middle;

Vertices

（這個屬性？還是啥？我也真是沒聽過，找到的我也不太明白，有人知道能說一說嗎？）

ES6新特性用的多嗎？用的哪些？

1、const和let變量
let和const 不存在變量提升，定義之后才能使用變量，只在局部起作用，不允許重復被定義。
const：常量不可被改變。如果使用const聲明的是對象的話，可以修改對象里面的值。
var存在變量提升，可以多次被定義。

2、模板字面量
在ES6之前，將字符串連接到一起的方法是+或者concat（）方法
模板字面量本質上是包含嵌入式表達式的字符串面量。
模板字面量用倒引號(``)，不是單引號或者雙引號，可以包含用${expression}表示的占位符

3、解構
使用解構從數組和對象提取值并賦值給獨特的變量。

解構數組的值:

const point = [10, 25, -34]; const [x, y, z] = point; console.log(x, y, z);

[]表示被解構的數組, x,y,z表示要將數組中的值存儲在其中的變量, 在解構數組是, 還可以忽略值, 例如const[x,z]=point,忽略y坐標.

解構對象中的值:

const gemstone = {type: 'quartz',color: 'rose',karat: 21.29 }; const {type, color, karat} = gemstone; console.log(type, color, karat);

花括號 { } 表示被解構的對象，type、color 和 karat 表示要將對象中的屬性存儲到其中的變量

對象字面量簡寫法

let type = 'quartz'; let color = 'rose'; let carat = 21.29; const gemstone = {type: type,color: color,carat: carat }; console.log(gemstone);

使用和所分配的變量名稱相同的名稱初始化對象時如果屬性名稱和所分配的變量名稱一樣，那么就可以從對象屬性中刪掉這些重復的變量名稱。

let type = 'quartz'; let color = 'rose'; let carat = 21.29; const gemstone = {type,color,carat}; console.log(gemstone);

4、展開運算符
（用三個連續的點 (…) 表示）是 ES6 中的新概念，使你能夠將字面量對象展開為多個元素

const books = ["Don Quixote", "The Hobbit", "Alice in Wonderland", "Tale of Two Cities"]; console.log(...books); Prints: Don Quixote The Hobbit Alice in Wonderland Tale of Two Cities

展開運算符的一個用途是結合數組。
如果需要結合多個數組，在有展開運算符之前，必須使用 Array的 concat() 方法。

const fruits = ["apples", "bananas", "pears"]; const vegetables = ["corn", "potatoes", "carrots"]; const produce = fruits.concat(vegetables); console.log(produce);

5、箭頭函數
匿名函數，箭頭函數內部的this和箭頭外部的this保持一致。
變體1：如果箭頭函數，左側的形參列表中，只有一個參數，則左側小括號可以省略；
變體2：如果右側函數體中，只有一行代碼，則，右側的{ }可以省略；
變體3：如果箭頭函數左側 只有一個 形參，而且右側只有一行代碼，則 兩邊的()和{}都可以省略

promise

是異步編程的一個解決方案，主要用來解決回調地獄，一般是有異步請求操作時，會對Promise進行封裝。

Promise是一個容器，里面保存這某個未來才會結束的事件的結果（一般是一個異步操作）。

三種狀態
pending（進行中） 等待狀態，比如正在進行網絡請求，或者定時器沒有到時間的時候。
fulfilled（已成功） 滿足狀態，當我們主動回調了resolve()時，接口調用成功，就處于該狀態，并且會回調.then()
rejected（已失敗）拒絕狀態,當我們主動回調了reject()時，接口調用失敗，就處于該狀態，并且會回調.catch()

一旦把異步代碼放到Promis后，異步狀態就會馬上變成pending，異步代碼執行后只會是fulfilled或者rejected的其中一個狀態。（會出現一次，互斥）

JS數組去重

1、利用ES6里的Set去重

function unique (arr) {return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考慮兼容性，這種去重的方法代碼最少。這種方法還無法去掉“{}”空對象，后面的高階方法會添加去掉重復“{}”的方法。

2、利用for循環嵌套for，然后splice去重（ES5)

function unique(arr){ for(var i=0; i<arr.length; i++){for(var j=i+1; j<arr.length; j++){if(arr[i]==arr[j]){ //第一個等同于第二個，splice方法刪除第二個arr.splice(j,1);j--;}}} return arr; } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}沒有去重，兩個null直接消失了

雙層循環，外層循環元素，內層循環時比較值。值相同時，則刪去這個值。

3、indexOf去重

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return}var array = [];for (var i = 0; i < arr.length; i++) {if (array .indexOf(arr[i]) === -1) {array .push(arr[i])}}return array; } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr))// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}沒有去重

新建一個空的結果數組，for 循環原數組，判斷結果數組是否存在當前元素，如果有相同的值則跳過，不相同則push進數組。

4、利用sort()

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return;}arr = arr.sort()var arrry= [arr[0]];for (var i = 1; i < arr.length; i++) {if (arr[i] !== arr[i-1]) {arrry.push(arr[i]);}}return arrry; }var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) // [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined] //NaN、{}沒有去重

利用sort()排序方法，然后根據排序后的結果進行遍歷及相鄰元素比對。

5、利用Map數組

function arrayNonRepeatfy(arr) {let map = new Map();let array = new Array(); // 數組用于返回結果for (let i = 0; i < arr.length; i++) {if(map .has(arr[i])) { // 如果有該key值map .set(arr[i], true); } else { map .set(arr[i], false); // 如果沒有該key值array .push(arr[i]);}} return array ; }var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

創建一個空Map數據結構，遍歷需要去重的數組，把數組的每一個元素作為key存到Map中。由于Map中不會出現相同的key值，所以最終得到的就是去重后的結果。

6、利用遞歸

function unique(arr) {var array= arr;var len = array.length;array.sort(function(a,b){ //排序后更加方便去重return a - b;})function loop(index){if(index >= 1){if(array[index] === array[index-1]){array.splice(index,1);}loop(index - 1); //遞歸loop，然后數組去重}}loop(len-1);return array; }var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr)) //[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

7、利用filter

function unique(arr) {return arr.filter(function(item, index, arr) {//當前元素，在原始數組中的第一個索引==當前索引值，否則返回當前元素return arr.indexOf(item, 0) === index;}); }var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

升級 有對象數組 根據id去重

<script type="text/javascript"> //根據 sys_time 和 loc_time 去重var tmp = [{"id":1,"sys_time": "2015-03-09 15:15:08", //與id為2的重復"loc_time": "2015-03-09 15:16:38"}, {"id":2,"sys_time": "2015-03-09 15:15:08", "loc_time": "2015-03-09 15:15:38", //與id為3的重復(但是因為sys_time 已經和id為1的重復了 , 實際上不會再參與 loc_time的去重)}, {"id":3,"sys_time": "2015-03-09 15:16:08", "loc_time": "2015-03-09 15:15:38", },{"id":4,"sys_time": "2015-03-09 15:17:08", "loc_time": "2015-03-09 15:17:38", }]// for(n in tmp){// tmp[n].sys_time = new Date(tmp[n].sys_time).getTime();// }var result = [], hash = {}; hash_ = {}for (var i = 0; i<tmp.length; i++) {var elem = tmp[i].sys_time; var elem_ = tmp[i].loc_time; if (!hash[elem]) {if (!hash_[elem_]) {result.push(tmp[i]);hash_[elem_] = true;};hash[elem] = true;}}console.log(result)</script>

vue雙向數據綁定

數據變化更新視圖，視圖變化更新數據：data如何更新view，因為view更新data其實可以通過事件監聽即可，比如input標簽監聽 ‘input’ 事件就可以實現了。

雙向綁定
v-model 用于表單信息的接收

<input type="text" name="username" v-model="username"> <p>{{ username }}</p> data: {username: '初始化的默認值'}

【vue的雙向綁定原理及實現 - canfoo#! - 博客園】https://www.cnblogs.com/canfoo/p/6891868.html

vue數據列表渲染key屬性

Key值的存在保證了唯一性，vue在執行的時候，會對節點進行檢查，如果沒有key值，那么vue檢查到這里有dom節點，就會對內容清空并且重新賦值，如果有key值存在，那么會對新老節點進行比較，比較兩者key值是否相同，來進行調換位置或者刪除等操作。

mysql和mongdb數據庫的區別

為啥問這個？因為我們學了這兩個數據庫，面試官也想了解一下是不是真的學了吧。
MYSQL為關系型數據庫，在不同的引擎上有不同的存儲方式。
查詢語句使用傳統sql語句，有較為成熟的體系，mongdb查詢語句是findeOne或者find這樣。
強大的社區以及開發文檔。
在海量數據處理的時候效率會顯著變慢。

MongoDB為非關系型數據庫（文檔型數據庫）， 將數據存儲為一個文檔，數據結構由鍵值(key=>value)對組成。MongoDB 文檔類似于 JSON 對象。字段值可以包含其他文檔，數組及文檔數組。
不支持事務操作、mongodb占用空間過大、開發文檔不是很完全，完善。

傳統的關系數據庫一般由數據庫（database）、表（table）、記錄（record）三個層次概念組成，MongoDB是由數據庫（database）、集合（collection）、文檔對象（document）三個層次組成。
MongoDB對于關系型數據庫里的表，但是集合中沒有列、行和關系概念，這體現了模式自由的特點。

總結

以上是生活随笔為你收集整理的DAY14刷面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。