tet-2

時間  2019-11-13
標籤 tet 简体版
原文   原文鏈接
 
1、html和css部分

一、如何理解CSS的盒子模型？

標準盒子模型：寬度=內容的寬度（content）+ border + padding

低版本IE盒子模型：寬度=內容寬度（content+border+padding）javascript

在CSS的盒子模型中，有兩個重要的選項，box-sizing:content-box 和 box-sizing:border-box，content-box被稱爲正常盒子模型，border-box被稱爲怪異盒子模型css

box-sizing:border-box的使用方法參考：html

https://jingyan.baidu.com/article/a3aad71a081a4cb1fb009690.htmlvue

總結：border-box定義的盒子，不會隨着padding和boder的加入而增大盒子的佔用空間html5

二、BF

* 什麼是 BFC

BFC（Block Formatting Context）格式化上下文，是 Web 頁面中盒模型佈局的 CSS 渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。
* 造成 BFC 的條件

* 浮動元素，float 除 none 之外的值
* 定位元素，position（absolute，fixed）
* display 爲如下其中之一的值 inline-block，table-cell，table-caption
* overflow 除了 visible 之外的值（hidden，auto，scroll）
* BFC 的特性
* 內部的 Box 會在垂直方向上一個接一個的放置。
* 垂直方向上的距離由 margin 決定
* bfc 的區域不會與 float 的元素區域重疊。
* 計算 bfc 的高度時，浮動元素也參與計算
* bfc 就是頁面上的一個獨立容器，容器裏面的子元素不會影響外面元素。java

 

三、如何清除浮動？

參考連接：http://www.divcss5.com/jiqiao/j406.shtml

浮動產生的影響有哪些？node

一、背景不能顯示jquery

因爲浮動產生，若是對父級設置了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級不能被撐開，因此致使CSS背景不能顯示。css3

二、邊框不能撐開nginx

如上圖中，若是父級設置了CSS邊框屬性（css border），因爲子級裏使用了float屬性，產生浮動，父級不能被撐開，致使邊框不能隨內容而被撐開。

三、margin padding設置值不能正確顯示

因爲浮動致使父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。

方法1.  給浮動元素父級設置高度

方法2.  clear清除浮動（添加空div法）

方法3.  父級同時浮動（須要給父級同級元素添加浮動）

方法4.  給父級添加overflow:hidden 清除浮動方法（實際項目中推薦用這個方法）

方法5.  父級設置成inline-block，其margin: 0 auto居中方式失效
方法5.  萬能清除法 after僞類 清浮動（如今主流方法，推薦使用）

 

clear清除浮動示例：

 

萬能清除法 after僞類示例：

四、用純CSS建立一個三角形的原理是什麼？

當咱們以下設置代碼並賦給div相應的屬性時

#sider2{
    width: 100px;
    height: 100px;
    border-top: 30px solid #000;
    border-right: 30px solid #ff0000;
    border-left: 30px solid #00ff00;
    border-bottom: 30px solid #0000ff;
}

會獲得以下的一張圖

接着當不設置border-bottom，即默認其爲0時，能夠獲得下面的圖片

而後當設置其width爲0時，以下圖

繼續設置其height爲0

最後倘若你把border-left,border-right設置爲透明以後，就能夠看到以下的三角形了

 

 PS：用來繪製三角形的必須是block元素，after和before僞劣是行內元素，必須定義爲inline-block或者block以後才能繪製

 

五、css3實現0.5px的細線？（沒上機演示，看不懂）

六、css實現三欄佈局

flex方式、絕對定位方式、浮動方式

 

七、讓一個div垂直居中

寬高已知用margin-left  margin-right

 

寬高未知用transform:translate(-50%,-50%)

flex佈局

 

八、元素定位有哪些？

參考連接：https://www.cnblogs.com/theWayToAce/p/5264436.html

1. absolute絕對定位

相對位置爲父元素爲非static的第一個父元素進行定位。

 

 

2. fixed  固定定位（老IE6不支持）

相對於瀏覽器窗口進行定位。

 

3. relative相對定位

相對於其正常（默認佈局）位置進行定位。

4. static

默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）

加分項

  1. 全部的定位若是left、top、right、bottom屬性都爲默認值，則爲默認定位
  2. absolute定位會脫離文檔，浮動起來，多個層重疊可使用z-index屬性改變層疊順序
  3. absolute定位忽略padding，相對位置爲相對定位容器的左上角內邊框，

 

 

9.樣式導入有哪些方式？

樣式導入方式

  • link
  • import

10. ::before 和:before有什麼區別？

 相同點
均可以用來表示僞類對象，用來設置對象前的內容
:befor和::before寫法是等效的
 不一樣點
:befor是Css2的寫法，::before是Css3的寫法
:before的兼容性要比::before好 ，不過在H5開發中建議使用::before比較好
加分項
僞類對象要配合content屬性一塊兒使用
僞類對象不會出如今DOM中，因此不能經過js來操做，僅僅是在 CSS 渲染層加入
僞類對象的特效一般要使用:hover僞類樣式來激活
.test:hover::before { /* 這時animation和transition才生效 */ }

11. css樣式的優先級是怎麼樣的？

12.如何居中一個元素（正常、絕對定位、浮動元素）?

參考連接：https://blog.csdn.net/lxcao/article/details/52670724

 

13.CSS樣式-display有哪些做用？

 block(塊級元素)
 <div>、<p> <ul> <ol> <form> ……

 inline（內聯元素）
 <span> <a> <img> <input> <select> <label> ……

 list-item（項目列表）
 <li>

 none(不顯示)
 <head>（頭部元素都是） <title> <br> <thead> <tbody> <tfoot> 

常見的屬性值（屬性值太多，只要說經常使用的就好）

  •  none：元素隱藏

  •  block：塊級元素

  •  inline-block：內聯塊級元素

  •  list-item:列表項目

  •  表格系列方面的顯示

  •  table

  •  table-row

 

14.爲何要初始化CSS樣式？

初始化樣式的緣由

 由於瀏覽器的兼容的問題，不一樣瀏覽器有些標籤的默認值是不一樣的，若是沒有CSS初始化每每會出現瀏覽器之間的頁面顯示差別。（去哪兒網項目老師講過！！！）

弊端

初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

 

15.一個滿屏 品 字佈局 如何設計?

參考連接：https://blog.csdn.net/lxcao/article/details/52688993

16.CSS3有哪些新特性？

1.CSS3的選擇器

1）E:last-child 匹配父元素的最後一個子元素E。
2）E:nth-child(n)匹配父元素的第n個子元素E。 
3）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。

2. @Font-face 特性

3. 圓角

4. 多列布局 （multi-column layout） 

5.陰影（Shadow） 

6.CSS3 的漸變效果  

7.css彈性盒子模型

8. CSS3製做特效

   1) Transition 對象變換時的過渡效果

   2) Transforms 2D轉換效果 

   3) Animation動畫特效 

17.html5有哪些新特性？移除了哪些特性？

（一）.H5新特性 

加強了圖形渲染、影音、數據存儲、多任務處理等處理能力主要表如今

1)  繪畫 canvas;

2)  本地離線存儲 localStorage

3)  sessionStorage的數據在瀏覽器關閉後自動刪除;操做參考localStorage

4)  用於媒介回放的 video和 audio 元素;

5)  語意化更好的內容元素，好比article、footer、header、nav、section;

6)  表單控件，calendar、date、time、email、url、search;

7)  新的技術webworker(專用線程)

8)  websocketsocket通訊

9)  Geolocation 地理定位


（二）移除的元素

 

 

18.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

相同點：都存儲在客戶端

不一樣點：

1.存儲大小

2.有效時間

3. 數據與服務器之間的交互方式

cookie的操做（不會）  參考連接：https://blog.csdn.net/lxcao/article/details/52809939

 

19.什麼是響應式開發？（去哪兒網項目老師有講過）

什麼是響應式

同一個網站兼容不一樣的大小的設備。如PC端、移動端（平板、橫屏、豎排）的顯示風格。

須要用到的技術 1.Media Query（媒體查詢）2.使用em或rem作尺寸單位 3.禁止頁面縮放 4.屏幕尺寸響應 

 

2、JS

一、閉包

參考連接：https://www.cnblogs.com/onepixel/p/5062456.html

閉包概念

可以讀取其餘函數內部變量的函數。
當一個內部函數被其外部函數以外的變量引用時，就造成了一個閉包

這是最簡單的閉包。

有了初步認識後，咱們簡單分析一下它和普通函數有什麼不一樣，上面代碼翻譯成天然語言以下：

  • 定義普通函數 A
  • 在 A 中定義普通函數 B
  • 在 A 中返回 B
  • 執行 A，並把 A 的返回結果賦值給變量 C
  • 執行 C 

把這5步操做總結成一句話就是：

函數A的內部函數B被函數A外的一個變量 c 引用。

把這句話再加工一下就變成了閉包的定義：

當一個內部函數被其外部函數以外的變量引用時，就造成了一個閉包。

所以，當你執行上述5步操做時，就已經定義了一個閉包！

這就是閉包。

 

閉包用途

在瞭解閉包的做用以前，咱們先了解一下 Javascript 中的 GC 機制:（垃圾回收機制）

在 Javascript 中，若是一個對象再也不被引用，那麼這個對象就會被 GC 回收，不然這個對象一直會保存在內存中。

在上述例子中，B 定義在 A 中，所以 B 依賴於 A ,而外部變量 C 又引用了A , 因此B間接的被 C 引用。

也就是說，A 不會被 GC 回收，會一直保存在內存中。爲了證實咱們的推理，上面的例子稍做改進：

count 是函數A 中的一個變量，它的值在函數B 中被改變，函數 B 每執行一次，count 的值就在原來的基礎上累加 1 。所以，函數A中的 count 變量會一直保存在內存中。

當咱們須要在模塊中定義一些變量，並但願這些變量一直保存在內存中但又不會 「污染」 全局的變量時，就能夠用閉包來定義這個模塊。

閉包的應用場景

閉包應用場景之setTimeout

閉包應用場景之回調

閉包缺點

一、因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。
二、閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

 

二、js中函數執行（不懂）

在 ES5.1 裏面函數是這樣執行的（不討論use strict和一些特殊狀況，JS好複雜的），按以下順序執行：

1. 肯定「this」的值 (確切的來講，this在JS裏面不是一個變量名而是一個關鍵字)
2. 建立一個新的做用域
3. 處理形參/實參（沒有定義過才聲明，不管如何都從新賦值，沒有對應實參則賦值爲"undefined"）：
對於每個傳入的實參，按照從左往右的順序依次執行：若是對應的形參在本做用域中尚未定義，則在本做用域中聲明形參，並賦值。若是已經定義過了，則從新給其賦值。(沒有對應實參則賦值爲"undefined"）（沒有定義：就是「沒有聲明」的意思）
4. 處理函數定義（沒有定義過才聲明，不管如何都從新賦值）：
對該函數中全部的定義的函數，按照代碼寫的順序依次執行：若是這個變量名在本做用域中尚未定義，則在本做用域中聲明這個函數名，而且賦值爲對應的函數，若是定義了這個變量，在可寫的狀況下從新給這個變量賦值爲這個函數，不然拋出異常。
5. 處理 "arguments"（沒有定義過才聲明和賦值）:
若是在本做用域中沒有定義 arguments，則在本做用域中聲明arguments並給其賦值。
6. 處理變量聲明（沒有定義過才聲明，不賦值）：
對於全部變量聲明，按照代碼寫的順序依次執行：若是在本做用域中沒有定義這個變量，則在本做用域中聲明這個變量，賦值爲undefined
7. 而後執行函數代碼。（固然是去變量定義裏面的 var 執行）

 

三、new一個對象的過程當中發生了什麼？（看看李立超老師講的對象）

參考連接：https://www.cnblogs.com/andyZhang0511/p/11475725.html

構造函數裏面的this就是per/per2/per3, this做爲返回值賦給per/per2/per3

 

 

四、宏任務跟微任務（結合promise去理解）

參考連接：https://blog.csdn.net/qq_37860963/article/details/81539118

https://blog.csdn.net/li123128/article/details/80650256（異步的概念）

當JS解析執行時，會被引擎分爲兩類任務，同步任務（synchronous） 和 異步任務（asynchronous）。

常見的異步任務：

對於同步任務來講，會被推到執行棧按順序去執行這些任務。
對於異步任務來講，當其能夠被執行時，會被放到一個 任務隊列（task queue） 裏等待JS引擎去執行。

總結起來js引擎對程序的執行順序是：（同步→異步裏的微任務（Promise的then、Mutation Observer）→異步裏的宏任務（setTimeout、setInterval））

1。先執行同步任務的程序

2。在執行異步任務裏的微任務

3。全部微任務都執行完了後就執行異步的宏任務，但這裏是一個一個宏任務去執行，不是一會兒執行完。

當執行棧中的全部同步任務完成後，JS引擎纔會去任務隊列裏查看是否有任務存在，並將任務放到執行棧中去執行，執行完了又會去任務隊列裏查看是否有已經能夠執行的任務。這種循環檢查的機制，就叫作事件循環(Event Loop)。

對於任務隊列，實際上是有更細的分類。其被分爲 微任務隊列 & 宏任務隊列

宏任務: setTimeout、setInterval等，會被放在宏任務（macrotask）隊列。

微任務: Promise的then、Mutation Observer等，會被放在微任務（microtask）隊列。 

注意： 微任務隊列每次全執行，宏任務隊列每次只取一項執行。

 

 拓展：什麼是觀察者模式？什麼是發佈訂閱模式？

 

 

五、防抖和節流（用過防抖，沒用過節流）

綜合應用場景

  • 防抖(debounce):就是指觸發事件後在 n 秒內函數只能執行一次，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。

    • search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源。（喵喵電影項目中的搜索用到過）

    • window觸發resize的時候，不斷的調整瀏覽器窗口大小會不斷的觸發這個事件，用防抖來讓其只觸發一次

  • 節流(throttle):就是指連續觸發事件可是在 n 秒中只執行一次函數。節流會稀釋函數的執行頻率。（手指移動的時候，handleTouchMove執行的頻率是很高的）

    • 鼠標不斷點擊觸發，mousedown/mousemove(單位時間內只觸發一次)

    • 監聽滾動事件，好比是否滑到底部自動加載更多，用throttle來判斷 所謂防抖，就是指觸發事件後在 n 秒內函數只能執行一次，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。

防抖函數分爲非當即執行版和當即執行版。

  • 非當即執行版的意思是觸發事件後函數不會當即執行，而是在 n 秒後執行，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。

  • 當即執行版的意思是觸發事件後函數會當即執行，而後 n 秒內不觸發事件才能繼續執行函數的效果。

 

六、apply()  call()  bind()的區別

call()、apply()、bind()是用來改變this的指向的。

一 舉個例子

一個叫喵喵的貓喜歡吃魚，一個叫汪汪的小狗喜歡啃骨頭，用代碼實現以下：

有一天，小狗汪汪和喵喵共進午飯的時候，汪汪說本身想嚐嚐小魚乾的味道，可是由於有刺，喵喵就想了個辦法，說本身先吃，完了餵給汪汪。

注意下 apply/call的區別

相同點：兩個方法產生的做用是徹底同樣的，都用來改變當前函數調用的對象。

不一樣點：調用的參數不一樣，比較精闢的總結：

foo.call(this,arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

這樣，汪汪就吃到了美味的魚乾。但是汪汪每噸都想來點小魚乾，喵喵還要工做去捉老鼠，因此它們又想了一個辦法，喵喵把吃魚的方法教給汪汪。這樣，每次汪汪就能夠本身吃小魚乾了。

 

 

bind()方法在這裏再多說一下，bind的時候傳的參數會預先傳給返回的方法，調用方法時就不用再傳參數了。

撇開上面的例子，看看一個特殊狀況：

 

 

 

七、數組的經常使用方法

改變原數組的方法

splice() 添加/刪除數組元素

sort() 數組排序

pop() 刪除一個數組中的最後的一個元素（簡記：字母少，處理後面）

shift() 刪除數組的第一個元素（簡記：字母多，處理前面）

push() 向數組的末尾添加元素（簡記：字母少，處理後面）

unshift() 向數組的開頭添加一個或更多元素（簡記：字母多，處理前面）

reverse() 顛倒數組中元素的順序

copyWithin() 指定位置的成員複製到其餘位置

fill() 填充數組

不改變原數組的方法

 slice() 淺拷貝數組的元素

join() 數組轉字符串

concat() 合併兩個或多個數組

indexOf() 查找數組是否存在某個元素

lastIndexOf() 查找指定元素在數組中的最後一個位置

includes() 查找數組是否包含某個元素

 

八、當即執行函數

聲明一個匿名函數，立刻調用這個匿名函數。目的是保護內部變量不受污染。

 

九、js原型和原型鏈（看李立超的講解）

參考連接：https://www.cnblogs.com/andyZhang0511/p/11475725.html

每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時，若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念。

關係：instance.constructor.prototype = instance.proto

特色：JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本，當咱們修改原型時，與之相關的對象也會繼承這一改變。當咱們須要一個屬性時，JavaScript引擎會先看當前對象中是否有這個屬性，若是沒有的話，就會查找它的prototype對象是否有這個屬性，如此遞推下去，一致檢索到Object內建對象。

 

十、Promise（結合宏任務和微任務理解）

參考連接：https://blog.csdn.net/qq_37860963/article/details/81539118

https://blog.csdn.net/li123128/article/details/80650256

一句話歸納Promise：Promise對象用於異步操做，它表示一個還沒有完成且預計在將來完成的異步操做。

promise是用來解決兩個問題的：

  • 回調地獄，代碼難以維護，經常第一個的函數的輸出是第二個函數的輸入這種現象

  • promise能夠支持多個併發的請求，獲取併發請求中的數據

這個promise能夠解決異步的問題，自己不能說promise是異步的

十一、async/await（知道大概的原理，深層次的須要進一步理解）

參考連接：https://www.cnblogs.com/SamWeb/p/8417940.html

 

 

 

 

 

 

 

 ---額外補充  什麼是回調地獄？

什麼是回調地獄，回調函數，一個嵌套着一個，到最後，縮略圖成了 一個三角形， 形成了可閱讀性差，可閱讀性差就表明代碼的可維護性 和 可迭代性差，最後還有一個就是可擴展性差。

 

十二、深拷貝、淺拷貝（親自敲的，務必牢記）

它們倆只針對像object/Array這樣的複雜對象的

簡單的說：

淺拷貝只複製一層對象屬性，只是將數據中存放的引用拷貝下來，但依舊指向同一個存放地址

深拷貝則遞歸複製了全部層級，將數據中全部的數據都拷貝下來，而不只僅是引用。拷貝下來的數據的修改，並不會影響原數據。

javascript存儲對象都是存地址的，因此淺拷貝會致使obj1和obj2指向同一塊內存地址，改變了其中一方的內容。會致使拷貝對象和源對象都發生改變；

而深拷貝是開闢一塊新的內存地址，將原對象的各個屬性逐個複製進去，對拷貝對象和源對象各自的操做互不影響。

1三、跨域

參考連接：https://blog.csdn.net/qq_38128179/article/details/84956552

跨域須要針對瀏覽器的同源策略來理解，同源策略指的是請求必須是同一個端口，同一個協議，同一個域名，不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方資源。

受瀏覽器同源策略的影響，不是同源的腳本不能操做其餘源下面的對象。想要操做另外一個源下的對象是就須要跨域。

 

什麼是跨域？

當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不一樣即爲跨域

爲何會出現跨域問題

出於瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的javascript腳本和另一個域的內容進行交互。所謂同源（即指在同一個域）就是兩個頁面具備相同的協議（protocol），主機（host）和端口號（port）

非同源限制

【1】沒法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB

【2】沒法接觸非同源網頁的 DOM

【3】沒法向非同源地址發送 AJAX 請求

跨域解決方法

  • 一、 經過jsonp跨域（只支持get，不支持post ）
    二、 document.domain + iframe跨域
    三、 location.hash + iframe
    四、 window.name + iframe跨域
    五、 postMessage跨域
    六、 跨域資源共享（CORS） 用得多
    七、 nginx代理跨域
    八、 nodejs中間件代理跨域
    九、 WebSocket協議跨域

1四、for in 和 for of

for in 

1.通常用於遍歷對象的可枚舉屬性。以及對象從構造函數原型中繼承的屬性。對於每一個不一樣的屬性，語句都會被執行。
2.不建議使用for in 遍歷數組，由於輸出的順序是不固定的。
3.若是迭代的對象的變量值是null或者undefined, for in不執行循環體，建議在使用for in循環以前，先檢查該對象的值是否是null或者undefined

for of

1.for…of 語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上建立一個迭代循環，調用自定義迭代鉤子，併爲每一個不一樣屬性的值執行語句

1五、事件是什麼？如何阻止冒泡？（美團項目裏有用到）

事件是什麼？ 

事件用於監聽瀏覽器的操做行爲，瀏覽器觸發動做時被捕捉到而調用相應的函數。

事件執行三個階段

① 事件捕獲階段 
② 處於目標階段
③ 事件冒泡階段
捕獲型事件是自上而下，而冒泡型事件是自下而上的，而咱們程序員一般要作的就是第二階段，完成事件的動做。而第1、三階段由系統封裝自動調用完成。

 

冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true。

 

1六、如何阻止默認事件？（記着）

w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false

1七、var,let,const

其實這裏很容易理解，var是能夠變量提高的。而let和const是必須聲明後才能調用的。對於let和const來講，這裏就是暫緩性死區。

1八、Class（敲過，忘記了）

es6新增的Class其實也是語法糖，js底層其實沒有class的概念的，其實也是原型繼承的封裝。

19.  Set

 

20. .map

map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。

map() 方法按照原始數組元素順序依次處理元素。

注意： map() 不會對空數組進行檢測。

注意： map() 不會改變原始數組。

 

21.js裏的==和===區別

簡單來講： == 表明相同， ===表明嚴格相同, 爲啥這麼說呢，

==  先檢查兩個數據類型，若是相同， 則進行===比較， 若是不一樣， 則進行一次類型轉換， 轉換成相同類型後再進行比較，

===若是類型不一樣，直接false.

雙等號==： 

　　（1）若是兩個值類型相同，再進行三個等號(===)的比較

　　（2）若是兩個值類型不一樣，也有可能相等，需根據如下規則進行類型轉換在比較：

　　　　1）若是一個是null，一個是undefined，那麼相等

　　　　2）若是一個是字符串，一個是數值，把字符串轉換成數值以後再進行比較

 三等號===：

（1）若是類型不一樣，就必定不相等

　　（2）若是兩個都是數值，而且是同一個值，那麼相等；若是其中至少一個是NaN，那麼不相等。（判斷一個值是不是NaN，只能使用isNaN( ) 來判斷）

　　（3）若是兩個都是字符串，每一個位置的字符都同樣，那麼相等，不然不相等。

　　（4）若是兩個值都是true，或是false，那麼相等

　　（5）若是兩個值都引用同一個對象或是函數，那麼相等，不然不相等

　　（6）若是兩個值都是null，或是undefined，那麼相等

注意： null除了和undefined  和其它任何值比都是不等的，undefined也是同樣（面試錯過）

 

22.JavaScript中如何翻轉一個字符串？

參考連接：https://blog.csdn.net/lxcao/article/details/52705790

 

23.怎樣建立、添加、移除、移動、和查找節點?

建立元素：

1.createDocumentFragment()

2.createElement()

3.createTextNode() 

移除元素

parentNode.removeChild(childNode)

替換元素

parentNode.replaceChild(newChild,oldChild);//替換元素

插入元素

parentNode.insertBefore(newChild,refChild)//在refChild前插入節點

追加元素

parentNode.appendChild(childNode)

 

查找

1)   parentNode.getElementsByTagName(tagName)獲取所在父節點下的指定標籤名節點,返回HTMLCollection類型

2)   document.getElementsByClassName(className)//根據類名獲取節點，返回HTMLCollection

3)   document.getElementById(id)//經過元素Id，惟一性

4)   高級選擇器 document.querySelector

24.JSON 格式是什麼？你瞭解嗎？

JSON是什麼？

JSON是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小。是先後臺數據交互最多見的一種數據格式。

 

JSON語法

key:value 使用冒號分隔 {"age":"12", "name":"back","phone"};

 

數據格式轉換

1.JSON字符串轉換爲JSON對象:

var obj = JSON.parse(str);

2.JSON對象轉換爲JSON字符串：

var last=JSON.stringify(obj);

3.數組轉json字符串

 var array=[1,2,3,4];

 JSON.stringify($(array));

4.json字符串轉數組，使用jquery

 $(JSON.parse('{"0":1,"1":2,"2":3,"length":3}')); 

25.Ajax 是什麼? 如何建立一個Ajax？

Ajax是什麼

一種異步請求數據的一種技術

 

Ajax的使用

1.建立Ajax核心對象XMLHttpRequest

2.向服務器發送請求

3.服務器響應處理

 

26.JavaScript有幾種類型的值？你能畫一下他們的內存圖嗎？

兩大類：

棧：原始數據類型（Undefined，Null，Boolean，Number、String）

堆：引用數據類型（對象、數組和函數）

兩種類型的區別是：存儲位置不一樣；

原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；

引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解析器尋找引用值時，會首先檢索其

在棧中的地址，取得地址後從堆中得到實體


 

 

27.談談你對this的理解

（先回答this在不一樣的場合指向的是什麼，在來回答何時用到this，這樣回答的邏輯會比較好。）

this的指向

this表示當前對象，this的指向是根據調用的上下文來決定的，默認指向window對象，指向window對象時能夠省略不寫，例如：

 this.alert() <=> window.alert()<=> alert(); 

調用的上下文環境包括全局和局部

總結：全局環境始終指向window

局部環境：1.在全局做用域下直接調用函數，this指向window 2.對象函數調用，哪一個對象調用就指向哪一個對象 3.使用new實例化對象，在構造函數中的this指向實例化對象 4.使用call或play改變this的指向

全局環境

局部環境

 

 

28.談談你對模塊化開發的理解？（重要）

 參考連接：https://blog.csdn.net/lxcao/article/details/52774825

 

29.如何實現瀏覽器內多個標籤頁之間的通訊?（不是很懂）

參考連接：https://blog.csdn.net/lxcao/article/details/52777066

方法一：使用localStorage

使用localStorage.setItem(key,value);添加內容

使用storage事件監聽添加、修改、刪除的動做

 

30.js延遲加載的方式有哪些？（不是很懂，揹着吧）

參考連接：https://blog.csdn.net/lxcao/article/details/52791317

1.defer 屬性

2.async 屬性

3.動態建立DOM方式

 

31.js拍平多維數組

 

 

31.數組去重

    var arr = [1,2,2,3,3,3,4,5,5,6,5,4]
    var newArr = new Set(arr)
    console.log(newArr)
    var arr=[2,8,5,0,5,2,6,7,2];
    function unique1(arr){
      var hash=[];
      for (var i = 0; i < arr.length; i++) {
         if(hash.indexOf(arr[i])==-1){
          hash.push(arr[i]);
         }
      }
      return hash;
    }
    console.log(unique1(arr))

 

32.js模擬私有變量

 

 

4、VUE

一、Vue的雙向數據綁定原理是什麼？（先揹着）

vue實現數據雙向綁定的原理就是用Object.defineproperty()從新定義對象設置屬性值和獲取屬性值的操縱來實現的。

關鍵字：從新定義對象設置屬性值（set方法）

　　　　從新定義對象獲取屬性值（get方法）

//Object.property()方法的解釋：Object.property(參數1，參數2，參數3) 返回值爲該對象obj
參數1爲該對象（obj）

參數2爲要定義或修改的對象的屬性名

參數3爲屬性描述符，屬性描述符是一個對象，主要有兩種形式：數據描述符和存取描述符。這兩種對象只能選擇一種使用，不能混合使用。而get和set屬於存取描述符對象的屬性。
//這個方法會直接在一個對象上定義一個新屬性或者修改對象上的現有屬性，並返回該對象。

二、請詳細說下你對vue生命週期的理解？（見面試題1）

beforeCreate（建立前）,

created（建立後）,

beforeMount(載入前),

mounted（載入後）,

beforeUpdate（更新前）,

updated（更新後）,

beforeDestroy（銷燬前）,

destroyed（銷燬後）

三、動態路由定義和獲取（喵喵視頻有用到過）

在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id。

-----------------------------------------------------------------------------------

四、vue-router 有哪幾種導航鉤子?（pizza項目有用到）

三種

  1. 全局導航鉤子（）

    • router.beforeEach(to, from, next)（全局守衛，跳轉前進行判斷攔截）

    • router.afterEach(to, from ,next)（後置鉤子，進入該組件時彈出一串信息）

    • router.beforeResolve(to, from, next)（全局解析守衛）

  2. 組件內鉤子

    • beforeRouteEnter（進去）

    • beforeRouteUpdate（更新）

    • beforeRouteLeave（離開）

  3. 單獨路由獨享組件

    • beforeEnter（路由獨有的守衛）

五、組件之間的傳值通訊？（看米斯特吳的視頻）

  • 父組件向子組件傳值：

    • 子組件在props中建立一個屬性，用來接收父組件傳過來的值；

    • 在父組件中註冊子組件；

    • 在子組件標籤中添加子組件props中建立的屬性；

    • 把須要傳給子組件的值賦給該屬性

  • 子組件向父組件傳值：

    • 子組件中須要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；

    • 將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應事件的方法；

    • 在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。

六、vuex（詳見面試題1）

參考連接：https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

在SPA單頁面組件的開發中 Vue的vuex和React的Redux 都統稱爲同一狀態管理，我的的理解是全局狀態管理更合適；簡單的理解就是你在state中定義了一個數據以後，你能夠在所在項目中的任何一個組件裏進行獲取、進行修改，而且你的修改能夠獲得全局的響應變動。

核心概念1: State
vuex中的 數據源，咱們須要保存的數據就保存在這裏，能夠在頁面經過 this.$store.state來獲取咱們定義的數據；
 
核心概念2: Getters
Gettesr至關於vue中的computed計算屬性，  Getters 能夠用於監聽state中的值的變化
 
核心概念3: Mutations
若是須要修改store中的值惟一的方法就是提交mutation來修改
 
核心概念4: Actions
actions 相似於 mutations，不一樣在於：actions提交的是mutations而不是直接變動狀態actions中能夠包含異步操做, mutations中絕對不容許出現異步actions中的回調函數的第一個參數是context, 是一個與store實例具備相同屬性和方法的對象

 

是一個能方便vue實例及其組件傳輸數據的插件 方便傳輸數據，做爲公共存儲數據的一個庫

應用場景：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車。

網上找的一個通俗易懂的瞭解vuex的例子

 

7.vue內置組件有哪些？

1）component

2）transition

3）transition-group

4）keep-alive

5）slot

1）component組件：有兩個屬性---is    inline-template，渲染一個‘元組件’爲動態組件，按照'is'特性的值來渲染成那個組件

2）transition組件：爲組件的載入和切換提供動畫效果，具備很是強的可定製性，支持16個屬性和12個事件

3）transition-group：做爲多個元素/組件的過渡效果

4）keep-alive：包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們

5）slot：做爲組件模板之中的內容分發插槽，slot元素自身將被替換

 

8.computed和watch的區別？

  • computed用來監控本身定義的變量，該變量不在data裏面聲明，直接在computed裏面定義，而後就能夠在頁面上進行雙向數據綁定展現出結果或者用做其餘處理；
  • computed比較適合對多個變量或者對象進行處理後返回一個結果值，也就是數多個變量中的某一個值發生了變化則咱們監控的這個值也就會發生變化，舉例：購物車裏面的商品列表和總金額之間的關係，只要商品列表裏面的商品數量發生變化，或減小或增多或刪除商品，總金額都應該發生變化。這裏的這個總金額使用computed屬性來進行計算是最好的選擇

 

  • watch主要用於監控vue實例的變化，它監控的變量固然必須在data裏面聲明才能夠，它能夠監控一個變量，也能夠是一個對象，可是咱們不能相似這樣監控,好比：

  • watch通常用於監控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個數據影響多個數據

 

mounted鉤子與activated鉤子的區別

mounted鉤子在主頁掛載時執行一次，若是沒有緩存的話，再次回到主頁時，mounted還會執行，從而致使ajax反覆獲取數據。

activated鉤子則不受緩存的影響，每次從新回到主頁都會執行。

每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程