前端面試筆記（整理）

時間 2019-11-21

原文原文鏈接

1.CSS的盒子模型

包含元素內容content、內邊距padding、邊框border、外邊距margin
box-sizing:border-box;content-box;inherit;
1) content-box:總寬度=margin+border+padding+width，即爲標準模型；
2) border-box:總寬度=margin+width，即爲IE模型；
3) inherit:繼承父元素的border-sizing屬性。javascript

2.常見的post提交數據方式對應的content-type取值

4種
1)application/x-www-form-urlencoded:數據被編碼爲名稱/值對,這是標準的編碼格式。
2)multipart/form-data:數據被編碼爲一條消息，頁上的每一個控件對應消息中的一個部分。
3)application/json:告訴服務端消息主體是序列化後的 JSON 字符串.
4)text/xmlcss

3.清除浮動的幾種方法

1)父級div定義僞類：after和zoom
`.clearfloat::after {display:block; clear:both; content:" "; visibility:hidden; height:0;}
.clearfloat {zoom:1}`
2)在結尾處添加空div標籤clear：both
3)父級div定義height
4)父級div定義display:table
5)父級div也一塊兒浮動
6)父級div定義overflow:auto/hidden（必須定義width或zoom:1，同時不能定義height，瀏覽器會自動檢查浮動區域的高度）html

4.移動端上click事件在某些瀏覽器有沒有遇到延遲的問題

1)靜止縮放
<meta name="viewport" content="width=device-width user-scalable='no' "> 或
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
2)引入`fastclick.js
window.addEventListener(function(){前端

FastClick.attach(document.body);

1},false)`vue

5.HTTP的緩存機制

1)強制緩存：當所請求的數據在緩存數據庫中還沒有過時時，不與服務器進行交互，直接使用緩存數據庫中的數據。
Expire / Cache-Control
2)協商緩存：從緩存數據庫中取出緩存的標識，而後向瀏覽器發送請求驗證請求的數據是否已經更新，若是已更新則返回新的數據，若未更新則使用緩存數據庫中的緩存數據。
etag / last-modifindjava

6.實現三欄佈局（左右兩邊固定寬度，中間自適應）

1)浮動佈局
左右兩邊固定寬度，並分別設置float:left和float:right。（但這會帶來高度塌陷的問題，因此要清除浮動。清除浮動的方式有：
a. 給父級盒子設置height；
b.給父級盒子設置overflow:hidden；
c.在父級盒子結束前的盒子添加clear:both；
d.父級盒子也設置浮動；
e.父級div定義僞類：after和zoom，node

.clear::after{display:block;clear:both;content:"";visibility:hidden;height:0;} .clear{zoom:1;}

2)絕對定位佈局
左中右三個盒子都設置position:absolute;而後分別設置定位
3)flex佈局
父盒子設置display:flex;位於中間的子盒子設置flex:1
4)表格佈局
父盒子設置display:table;左中右三個盒子設置display:table-cell;左右兩個盒子分別設置寬度；
5)網格佈局
父盒子設置display:grid; grid-template-columns:300px auto 300px;react

7.== 和 === 的區別

===爲恆等符：當等號兩邊的值爲相同類型的時候，直接比較等號兩邊的值，值相同則返回true，若等號兩邊的值類型不一樣時直接返回false。webpack

==爲等值符：當等號兩邊的值爲相同類型時比較值是否相同，類型不一樣時會發生類型的自動轉換，轉換爲相同的類型後再做比較。
a、若是一個是null、一個是undefined，那麼相等。
b、若是一個是字符串，一個是數值，把字符串轉換成數值再進行比較。
c、若是任一值是 true，把它轉換成 1 再比較；若是任一值是 false，把它轉換成 0 再比較。
d、若是一個是對象，另外一個是數值或字符串，把對象轉換成基礎類型的值再比較。對象轉換成基礎類型，利用它的toString或者valueOf方法。 js核心內置類，會嘗試valueOf先於toString；例外的是Date，Date利用的是toString轉換。那些不是JavaScript語言核心中的對象則經過各自的實現中定義的方法轉換爲原始值。
e、任何其餘組合，都不相等。git

8.transition和animation

transition
1）語法
transition是一個複合屬性，可設置四個過渡屬性，簡寫方式以下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property:是用來指定當元素其中一個屬性改變時執行transition效果，值有none（沒有屬性改變）、all（默認值，全部屬性改變），indent（某個屬性名，一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性，若是要設置多個屬性時，需分別設置，中間以逗號隔開）【當其值爲none時，transition立刻中止執行，當指定爲all時，則元素產生任何屬性值變化時都將執行transition效果】;
transition-duration:過分時間，是用來指定元素轉換過程的持續時間，單位爲s(秒)或ms(毫秒)；
transition-timing-function:時間函數，根據時間的推動去改變屬性值的變換速率，值ease（逐漸變慢）、linear（勻速）、ease-in（加速）、ease-out（減速）、ease-in-out（加速而後減速）、cubic-bezier：（自定義一個時間曲線）；
transition-delay:延遲，指定一個動畫開始執行的時間，也就是當改變元素屬性值後多長時間開始執行transition效果，單位爲s（秒）或ms（毫秒）；
2）觸發方式
僞類觸發：:hover,:focus,:checked,:active
js觸發：toggleClass
3）如下狀況下，屬性值改變不能產生過渡效果
a.background-image，如url(a.jpg)到url(b.jpg)（與瀏覽器支持相關，有的瀏覽器不支持）等
b.float浮動元素
c.height或width使用auto值
d.display屬性在none和其餘值（block、inline-block、inline）之間變換
e.position在static和absolute之間變換
transition示例:

<style>     
   #box2{
            height: 100px; width: 100px; background: blue; } #box2:hover{ transform: rotate(180deg) scale(.5, .5); background: red; transition: background 2s ease, transform 2s ease-in 1s;} </style> </head> <body> <div id="box1">BOX1</div> <div id="box2">BOX2</div> </body>

animation
1）語法
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name：用來調用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致；
animation-duration：指定元素播放動畫所持續的時間；
animation-timing-function：和transition中的transition-timing-function 中的值同樣。根據上面的@keyframes中分析的animation中可能存在多個小動畫，所以這裏的值設置是針對每個小動畫所在所在時間範圍內的屬性變換速率；
animation-delay：定義在瀏覽器開始執行動畫以前的等待的時間、這裏是指整個animation執行以前的等待時間，而不是上面所說的多個小動畫；
animation-iteration-count：定義動畫的播放次數，一般是整數，默認是1,若爲infinity，動畫將無限屢次的播放；
animation-direction：主要用來設置動畫播放次數，其主要有兩個值：normal:默認值，動畫每次訓話都是按順序播放；alternate:動畫播放在第偶數次向前播放，第奇數次想反方向播放（animation-iteration-count取值大於1時設置有效）
animation-play-state：屬性用來控制元素動畫的播放狀態。主要有兩個值：running:能夠經過該值將暫停的動畫從新播放，這裏的從新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放；paused:暫停播放。
animation-fill-mod：　默認狀況下，動畫結束後，元素的樣式將回到起始狀態，animation-fill-mode屬性能夠控制動畫結束後元素的樣式。主要具備四個屬性值：none（默認，回到動畫沒開始時的狀態。）,forwards（動畫結束後動畫停留在結束狀態）,backwords（動畫回到第一幀的狀態）,both（根據animation-direction輪流應用forwards和backwards規則）。
animation示例:

<style>
        .box{height:100px;width:100px;border:15px solid black; animation: changebox 10s ease-in-out 3 alternate paused; } .box:hover{ animation-play-state: running; } @keyframes changebox { 10% { background:red; } 50% { width:80px; } 70% { border:15px solid yellow; } 100% { width:180px; height:180px; } } </style> <body> <div class="box"></div> </body>

9.事件冒泡事件捕獲

事件冒泡，事件會從最內層的元素開始發生，一直向上傳播，直到document對象；
事件捕獲則跟事件冒泡相反，事件會從document對象開始發生，直到最具體的元素；

10.GET和POST的區別

1.發送方式：GET請求數據放在url上，即HTTP的協議頭中；而POST把數據放在HTTP的包體中。
2.大小的限制：GET傳的參數有長度的限制，由於瀏覽器對url的長度有限制；而POST理論上是沒有限制的。
3.安全性：GET請求可被緩存，請求保存在瀏覽器的歷史記錄中；POST則不能被緩存。與POSＴ相比，GET的安全性較差，由於發送的數據是URL的一部分。

11.var的變量提高的底層原理是什麼？

JS引擎的工做方式是
1)先解析代碼，獲取全部被聲明的變量；
2)而後再執行。
也就是分爲預處理和執行這兩個階段。
變量提高：全部用var聲明變量的語句都會被提高到代碼頭部。另外function也可看做變量聲明，也存在變量提高的狀況。

12.垂直水平居中的方式？

1)定位
父元素設置爲：position: relative;
子元素設置爲：position: absolute;
距上50%，據左50%，而後減去元素自身寬度的距離就能夠實現

width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px;

2)flex佈局

display: flex; //flex佈局 justify-content: center; //使子項目水平居中 align-items: center; //使子項目垂直居中

3)tabel-cell

display: table-cell;
vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中

13.如何判斷一個對象是否爲數組

1) Array.prototype.isPrototypeOf(obj)方法，斷定Array是否是在obj的原型鏈中，若是是，則返回true,不然false;
2) obj instanceof Array;
3) Object.prototype.toString.call(obj)；(==="[object Array]")
4) Array.isArray(obj);

14.margin塌陷？

當兩個盒子在垂直方向上設置margin值時，會出現塌陷現象
解決方法：

1.給父盒子添加border 2.給父盒子添加padding-top 3.給父盒子添加overflow:hidden 4.父盒子:position:fixed 5.父盒子:display:table 6.給子元素的前面添加一個兄弟元素 屬性爲:content:""; overflow:hidden;

解決方法的主要原理就是設置盒子爲BFC
BFC爲頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。

15.僞類與僞元素的區別

1）僞類
僞類用於選擇DOM樹以外的信息，或是不能用簡單選擇器進行表示的信息。前者包含那些匹配指定狀態的元素，好比:link，:visited，:hover，:active；後者包含那些知足必定邏輯條件的DOM樹中的元素，好比:first-child，:first-of-type，：target。
2）僞元素
僞元素爲DOM樹沒有定義的虛擬元素。不一樣於其餘選擇器，它不以元素元素爲最小選擇單元，它選擇的是元素制定單元。好比::before表示選擇元素內容的以前內容；::selection表示選擇元素被選中的內容。
3）僞類/僞元素一覽表
<僞類以下>

/* :active 選擇正在被激活的元素 :hover 選擇被鼠標懸浮着元素 :link 選擇未被訪問的元素 :visited 選擇已被訪問的元素 :first-child 選擇知足是其父元素的第一個子元素的元素 :lang 選擇帶有指定 lang 屬性的元素 :focus 選擇擁有鍵盤輸入焦點的元素 :enable 選擇每一個已啓動的元素 :disable 選擇每一個已禁止的元素 :checked 選擇每一個被選中的元素 :target 選擇當前的錨點元素 */

<僞元素以下>

/* ::first-letter 選擇指定元素的第一個單詞 ::first-line 選擇指定元素的第一行 ::after 在指定元素的內容後面插入內容 ::before 在指定元素的內容前面插入內容 ::selection 選擇指定元素中被用戶選中的內容 */

16.介紹一下JS的基本數據類型

Undefined，Null，Boolean，Number，String

17.JavaScript的typeof返回那些數據類型

undefined，string，boolean，number，symbol(ES6)，object，function

18.介紹一下JS有哪些內置對象？

數據封裝類對象：Object、Array、Boolean、Number、String
其餘對象：Function、Argument、Math、Date、RegExp、Error

19.null和undefined的區別

1）null表示一個對象被定義了，值爲「空值」；undefined表示不存在這個值。
2）變量被定義了，可是沒有賦值時，就等於undefined。
3）注意：在驗證null時，要用===，由於==沒法區分null和undefined。
typeof null // "object" 說明：null是一個沒有任何屬性和方法的對象

20.對JSON的瞭解

1) JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。
2) 它是基於JavaScript的一個子集。數據格式簡單，易於讀寫，佔用帶寬小。如：{"age":"12", "name":"back"}

21.列舉3種強制類型轉換和2種隱式類型轉換

強制：parseInt()，parseFloat()，Number()，（Boolean()，String()）
隱式：==，！

22.input的type屬性有哪些？

text：文本框
password：密碼
radio：單選按鈕
checkbox：複選框
file：文件選擇域
hidden：隱藏域
button：按鈕
reset：重置按鈕
submit：表單提交按鈕
image：圖片按鈕

23.IE和標準下有哪些兼容性的寫法

var ev = ev || window.event document.documentElement.clientWidth || document.body.clientWidth var target = ev.srcElement||ev.target

24.如何阻止事件冒泡

ie:阻止冒泡ev.cancelBubble = true;
非IE ev.stopPropagation();

25.如何阻止默認事件

1)return false；2) ev.preventDefault();

26.說說前端中的事件流？

事件流描述的是從頁面接收事件的順序，DOM2級事件流包括下面幾個階段。
事件捕獲階段
處理事件階段
事件冒泡階段
（addEventListener：addEventListener是DOM2級事件新增的指定事件處理程序的操做，這個方法接收3個參數：要處理的事件名，做爲事件處理程序的函數和一個布爾值。最後的布爾值若是爲true，表示在捕獲階段調用事件處理程序；若是爲false，表示在冒泡階段調用事件處理程序，默認爲false）

27.如何實現一個自適應的正方形

1）CSS 3vw單位
CSS3中新增了一組相對於可視區域百分比的長度單位vw、vh、vmin、vmax。其中vw是相對於視口寬度百分比的單位，1vw=1%viewport width，vh是相對於視口高度百分比的單位，1vh=1%viewport height；vmin是相對於當前視口寬高中較小的一個的百分比單位，同理vmax是相對當前視口寬高中較大的一個百分比單位。
代碼實現：

.placeholder{
  width: 50vw; height: 50vw; }

優勢：簡潔方便
缺點：瀏覽器兼容很差
2)設置垂直方向的 padding 撐開容器
margin、padding的百分比數值是相對於父元素寬度計算的。由此能夠發現只須要將元素垂直方向的padding值設定爲與width相同的百分比就能夠製做出自適應正方形了：
代碼實現：

.placeholder{
  width: 100%; padding-bottom:100%; }

若是正方形中沒有內容（至關於只是一個幾何裏面的正方形，並無展現其餘任何內容），一切看起來都很正常；可是，若是正方形中有其餘內容（這種狀況會更常見一些，好比說有一些文本和圖片），此時容器的高度就會被拉伸，由於盒子模型中的padding 是不包含在 content 中的，因此咱們能夠經過 height:0 解決這個問題；這種方案簡潔明瞭，且兼容性好；可是除了填充內容後會出現問題之外，還有可能碰上max-height不收縮，因而第三種方案來了：
3）利用僞元素的margin(padding)-top撐開容器
在方案二中，咱們利用百分比數值的 padding-bottom 屬性撐開容器內部空間，可是這樣作會致使在元素上設置的 max-height 屬性失效；而失效的緣由是 max-height 屬性只限制於 height，也就是隻會對元素的 content height 起做用。那麼咱們是否是能用一個子元素撐開 content 部分的高度，從而使 max-height 屬性生效呢？咱們來試試：

.placeholder {
            width: 20%; background-color: #000; /* overflow: hidden; */ /* display: inline-block; */ float: left; /*設置成BFC才能使margin-top撐起高度*/ } .placeholder:after { content: ''; display: block; margin-top: 100%; /* margin 百分比相對父元素寬度計算 */ }

28.js中的位置關係

offsetParent：該屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），已進行過CSS定位的容器元素。若是這個容器元素未進行CSS定位, 則offsetParent屬性的取值爲body元素的引用。當容器元素的style.display 被設置爲 "none"時（譯註：IE和Opera除外），offsetParent屬性返回 null。
top：該屬性通常對用過css定位的元素有效（position爲「static」時爲auto，不產生效果），定義了一個top屬性有效的元素（即定位元素）的上外邊距邊界與其包含塊上邊界之間的偏移。
clientTop：元素上邊框的厚度，當沒有指定邊框厚底時，通常爲0。
scrollTop：位於對象最頂端和窗口中可見內容的最頂端之間的距離，簡單地說就是滾動後被隱藏的高度。
offsetTop：獲取對象相對於由offsetParent屬性指定的父座標(css定位的元素或body元素)距離頂端的高度。
clientHeight：內容可視區域的高度，也就是說頁面瀏覽器中能夠看到內容的這個區域的高度，通常是最後一個工具條如下到狀態欄以上的這個區域，與頁面內容無關。
scrollHeight：IE、Opera 認爲 scrollHeight 是網頁內容實際高度，能夠小於clientHeight。FF 認爲scrollHeight 是網頁內容高度，不過最小值是 clientHeight。
offsetHeight：獲取對象相對於由offsetParent屬性指定的父座標(css定位的元素或body元素)的高度。IE、Opera 認爲 offsetHeight = clientHeight + 滾動條 + 邊框。FF 認爲 offsetHeight 是網頁內容實際高度，能夠小於clientHeight。offsetHeight在新版本的FF和IE中是同樣的，表示網頁的高度，與滾動條無關，chrome中不包括滾動條。

*諸如left、clientLeft、offsetLeft、clientWidth、scrollWidth等，和top、height相似，再也不贅述。

clientX、clientY：相對於瀏覽器窗口可視區域的X，Y座標（窗口座標），可視區域不包括工具欄和滾動條。IE事件和標準事件都定義了這2個屬性。
pageX、pageY：相似於event.clientX、event.clientY，但它們使用的是文檔座標而非窗口座標。這2個屬性不是標準屬性，但獲得了普遍支持。IE事件中沒有這2個屬性。
offsetX、offsetY：相對於事件源元素（target或srcElement）的X,Y座標，只有IE事件有這2個屬性，標準事件沒有對應的屬性。
screenX、screenY：相對於用戶顯示器屏幕左上角的X,Y座標。標準事件和IE事件都定義了這2個屬性

29.`Doctype`做用? 嚴格模式與混雜模式如何區分？它們有何意義?

Doctype聲明於文檔最前面，告訴瀏覽器以何種方式來渲染頁面，這裏有兩種模式，嚴格模式和混雜模式。
嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。
混雜模式，向後兼容，模擬老式瀏覽器，防止瀏覽器沒法兼容頁面。

30.`link`標籤和`import`標籤的區別?

link屬於html標籤，而@import是css提供的
頁面被加載時，link會同時被加載，而@import引用的css會等到頁面加載結束後加載。
link是html標籤，所以沒有兼容性，而@import只有IE5以上才能識別。
link方式樣式的權重高於@import的。

31.元素的文本省略號?

單行：

overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap

多行：
1）直接用css屬性設置(只有-webkit內核纔有做用)

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3 overflow:hidden

移動端瀏覽器絕大部分是WebKit內核的，因此該方法適用於移動端；
-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。
display: -webkit-box 將對象做爲彈性伸縮盒子模型顯示。
-webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式。
text-overflow: ellipsis 以用來多行文本的狀況下，用省略號「…」隱藏超出範圍的文本。

32.XML和JSON的區別？

1）數據體積方面
JSON相對於XML來說，數據的體積小，傳遞的速度更快些
2）數據描述方面
JSON和JavaScript交互更加方便，更容易解析處理，更容易交互
3）數據描述方面
JSON對數據的描述性比XML差
4）傳輸速度方面
JSON的速度要遠遠快於XML

33.前端須要注意哪些SEO？

合理的title、description、keywords：搜索對着三項的權重逐個減小，title值強調重點便可，重要關鍵詞不要超過兩次，並且要靠前，不一樣頁面的title要有所不一樣；
description把頁面的內容高度歸納，長度合適，不可過度分堆砌關鍵詞，不一樣頁面的description有所不一樣；
keywords列舉重要關鍵詞便可；

// title標題 <title>標題</title> // keywords 關鍵詞 <meta name="description" content="關鍵詞1,關鍵詞2,關鍵詞3"> // description 內容摘要 <meta name="description" content="網頁的簡述">

語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁；
重要內容的HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，因此要保證重要內容必定會被抓取；
重要內容不要用JS輸出：爬蟲不會執行JS獲取內容；
少用iframe：搜索引擎不會抓取iframe中的內容；
非裝飾性圖片必須加alt；
提升網站速度：網站速度是搜素引擎排序的一個重要指標；

34.HTTP的幾種請求方法用途？

1）GET方法
發送一個請求來取得服務器上的某一資源
2）POST方法
向URL指定的資源提交數據或附加新的數據
3）PUT方法
跟POST方法很像，也是想服務器提交數據。可是，它們之間有不一樣。PUT指定了資源在服務器上的位置，而POST沒有
4）HEAD方法
只請求頁面的首部
5）DELETE方法
刪除服務器上的某資源
6）OPTIONS方法
它用於獲取當前URL所支持的方法。若是請求成功，會有一個Allow的頭包含相似「GET,POST」這樣的信息
7）TRACE方法
TRACE方法被用於激發一個遠程的，應用層的請求消息迴路
8）CONNECT方法
把請求鏈接轉換到透明的TCP/IP通道

35.如何進行網頁性能優化？

1）content方面
減小HTTP請求：合併文件、CSS精靈圖
減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
減小DOM元素數量
２）Server方面
使用CDN
配置ETag
對組件使用Gzip壓縮
３）Cookie方面
減小cookie大小
４）CSS方面
將樣式表放到頁面頂部
不使用CSS表達式
使用<link>不使用@import
５）JavaScript方面
將腳本放到頁面底部
將JavaScript和CSS從外部引入
壓縮JavaScript和CSS
刪除不須要的腳本
減小DOM訪問
6）圖片方面
優化CSS精靈
不要再HTML中拉伸圖片

36.語義化的理解

HTML語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有CSS樣式狀況下也以一種文檔格式顯示，而且是容易閱讀的；
搜索引擎的爬蟲依賴於標記來肯定上下文的各個關鍵字的權重，利於SEO；
使閱讀源代碼的人更容易將網站分塊，便於閱讀維護理解；

37.WEB標準以及W3C標準是什麼

標籤閉合、標籤小寫、不亂嵌套、使用外鏈CSS和JS、結構行爲表現的分離

38.說說對做用域鏈的理解

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的；
即做用域就是變量與函數的可訪問範圍，即做用域控制這變量與函數的可見性和生命週期；

39.原生ＪＳ都有哪些方式能夠實現兩個頁面間的通訊？

１）經過url地址欄傳遞參數；
例如：點擊列表中的每一條數據，跳轉到一個詳情頁面，在URL中傳遞不一樣的參數區分不一樣的頁面；
２）經過本地存儲cookie、localStorage、sessionStorage；
例如京東的登錄，把登錄後得到的頁面信息存儲到本地，其餘頁面須要用戶信息的話就從本地的存儲數據中獲取；
３）使用iframe
例如在Ａ頁面中嵌入Ｂ頁面，在Ａ中能夠經過一些屬性和實現方法和Ｂ頁面的通訊；
４）利用postMessage實現頁面間的通訊
例如父窗口往子窗口傳遞信息，子窗口往父窗口傳遞信息

40.ES6中的let，const，var的區別是什麼？

var：聲明全局常量；
let：聲明塊級常量，即局部常量，定之後能夠修改；
const：用於聲明常量，定義後不能再修改值或者引用值的常量，也具備塊級做用域；

41.對數組進行去重，es5或者es6方法

//es5四種方式: //方式一: Array.prototype.unique1 = function() { // 1. 定義數組 var temp = []; // 2. 遍歷當前數組 for(var i = 0; i < this.length; i++) { // 3.若是當前數組的第i已經保存進了臨時數組， // 那麼跳過,不然把當前項push到臨時數組裏面 if (-1 === temp.indexOf(this[i])) { temp.push(this[i]); } } return temp; }; //方式二: Array.prototype.unique2 = function() { //1. hash爲hash表，r爲臨時數組 var hash = {}, temp=[]; // 2.遍歷當前數組 for(var i = 0; i < this.length; i++) { // 3. 若是hash表中沒有當前項 if (!hash[this[i]]) { // 4.存入hash表 hash[this[i]] = true; // 5.把當前數組的當前項 // push到臨時數組裏面 temp.push(this[i]); } } return temp; }; //方式三: Array.prototype.unique3 = function() { var n = [this[0]]; for(var i = 1; i < this.length; i++){ if (this.indexOf(this[i]) === i) { n.push(this[i]); } } return n; }; //方式四: Array.prototype.unique4 = function() { this.sort(); var re=[this[0]]; for(var i = 1; i < this.length; i++) { if( this[i] !== re[re.length-1]) { re.push(this[i]); } } return re; }; //es6實現方式: Array.prototype.unique = Array.prototype.unique || function () { return [...new Set(this)]; };

42.頁面加載過程當中可能觸發哪些事件？它們的順序是？

頁面加載時，大體能夠分爲如下幾個步驟：
1）開始解析HTML文檔結構
2）加載外部樣式表及JavaScript腳本
3）解析執行JavaScript腳本
4）DOM樹渲染完成
5）加載未完成的外部資源（如圖片）
6）頁面加載成功
執行順序：
1）document readystatechange事件
2）document DOMContentLoaded事件
3）window load事件

43.什麼是CDN，CDN對於網絡有什麼意義，它有什麼的缺點？

CDN又稱爲內容分發網絡；本意在於儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。
主要目的：解決因分佈、帶寬、服務器性能帶來的訪問延遲問題，適用於站點的加速、點播、直播等場景。使用戶就近取得所需內容，解決Internet網絡擁擠的情況，提升用戶訪問網站的響應速度和成功率。
缺點：1）實施複雜，投資大
2）目前大部分的CDN還只是對靜態的內容加速，對動態加速效果很差；而雙線對動態加速的效果跟靜態是同樣的。

44.vue-router中$route和$router的區別？

1）$route爲當前router跳轉對象裏面能夠獲取name、path、query、params等
2）$router爲VueRouter實例，想要導航到不一樣URL，則使用$router.push方法
返回上一個history也是使用$router.go方法

45.vue路由傳參query與params兩種方式的區別

query要用path來引入,例如ths.$router.push({ path:"detail",query:{id:"00"}})，接收參數爲this.$route.query.id，params要用name來引入，例如ths.$router.push({ name:"detail",params:{id:"00"}})，接收參數爲this.$route.params.id。以query傳輸的參數會在相似於get傳參，在瀏覽器地址欄中顯示參數。

46.描述一下漸進加強和優雅降級

優雅降級(graceful degradation)：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。
漸進加強(progressive enhancement)：一開始只構建站點的最少特性，而後不斷針對各瀏覽器追加功能。

47.爲何利用多個域名來請求網絡資源會更有效？

動靜分離請求，使用不一樣的服務器處理請求，提升效率；
突破瀏覽器的併發限制，同一時間針對同一域名下的請求有必定的數量限制。
節約主域名的鏈接數，從而提升客戶端網絡帶寬的利用率，優化頁面響應。

48.HTML5有哪些新特性、移除了哪些元素？

1）繪畫標籤canvas；
2）用於媒介回放的video和audio元素；
3）本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失；
4）sessionStorage的數據在瀏覽器關閉後自動刪除；
5）語義化更好的內容元素，好比article、footer、header、nav、section；
6）表單控件，calendar、data、time、email、url、search；
7）webworker、websocket、Geolocation；
移除的元素：
1）純表現的元素：basefont、big、center、font、s、strike、tt
2）對可用性產生負面影響的元素：frame、frameset、noframes

49.display:none;與visibility:hidden;的區別？

相同點：它們都能讓元素不可見‘
不一樣點：
display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；
visibility:hidden;不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見；
display:none;是非繼承屬性，子孫節點的消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；
visibility:hodden;是繼承屬性，子孫節點的消失因爲繼承了hidden，經過設置visibility:visible;可讓子孫節點顯示；
修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪；
讀屏器不會讀取display:none;元素內容;會讀取visibility:hidden;元素內容；

50.CSS去掉inline-block元素間隙的幾種方法？

間隙是怎麼來的：間隙是由換行或者回車致使的；只要把標籤寫成一行或者標籤沒有空格，就不會出現間隙；
去除方法：
方法一：
元素間的間隙出現的緣由，是元素標籤之間的空格，把空格去掉間隙就會消失

<div class="itlike"> <span>lhh</span><span>lhh</span> </div>

方法二：
利用HTML註釋標籤

<div class="demo"> <span>lhh</span><!-- --><span>lhh</span> </div>

方法三：
取消標籤閉合

<div class="demo"> <span>lhh <span>lhh <span>lhh <span>lhh </div>

方法四：
在父容器上使用font-size:0;能夠消除間隙

<div class="demo"> <span>lhh</span> <span>lhh</span> <span>lhh</span> <span>lhh</span> </div> .demo {font-size: 0;}

51.apply,call,bind有什麼區別？

三者均可以把一個函數應用到其餘對象上，apply,call是直接執行函數調用，bind是綁定，執行須要再次調用。
apply和call的區別是apply接受數組做爲參數，而call是接受逗號分隔的無限多個參數列表。
代碼以下：

function Person() { } Person.prototype.sayName() { alert(this.name); } var obj = {name: 'michaelqin'}; // 注意這是一個普通對象，它不是Person的實例 // 1) apply Person.prototype.sayName.apply(obj, [param1, param2, param3]); // 2) call Person.prototype.sayName.call(obj, param1, param2, param3); // 3) bind var liaoke = Person.prototype.sayName.bind(obj); liaoke ([param1, param2, param3]); // bind須要先綁定，再執行 liaoke (param1, param2, param3); // bind須要先綁定，再執行

52.介紹一下defineProperty，hasOwnProperty， propertyIsEnumerable

Object.defineProperty(obj，prop，descriptor)用來給對象定義屬性，有value,writeable,enumerable,set/get,configurable，
hasOwnProperty用於檢查某一屬性是否是存在於對象自己，
propertyIsEnumerable用來檢測某一屬性是否可遍歷，也就是能不能用for...in循環來取到。

53.JS經常使用設計模式的實現思路（單例、工廠、代理、裝飾、觀察者模式等）

// 1) 單例：　任意對象都是單例，無須特別處理 var obj = {name: 'michaelqin', age: 30}; // 2) 工廠: 就是一樣形式參數返回不一樣的實例 function Person() { this.name = 'Person1'; } function Animal() { this.name = 'Animal1'; } function Factory() {} Factory.prototype.getInstance = function(className) { return eval('new ' + className + '()'); } var factory = new Factory(); var obj1 = factory.getInstance('Person'); var obj2 = factory.getInstance('Animal'); console.log(obj1.name); // Person1 console.log(obj2.name); // Animal1 // 3) 代理: 就是新建個類調用老類的接口,包一下 function Person() { } Person.prototype.sayName = function() { console.log('michaelqin'); } Person.prototype.sayAge = function() { console.log(30); } function PersonProxy() { this.person = new Person(); var that = this; this.callMethod = function(functionName) { console.log('before proxy:', functionName); that.person[functionName](); // 代理 console.log('after proxy:', functionName); } } var pp = new PersonProxy(); pp.callMethod('sayName'); // 代理調用Person的方法sayName() pp.callMethod('sayAge'); // 代理調用Person的方法sayAge() // 4) 觀察者: 就是事件模式，好比按鈕的onclick這樣的應用. function Publisher() { this.listeners = []; } Publisher.prototype = { 'addListener': function(listener) { this.listeners.push(listener); }, 'removeListener': function(listener) { delete this.listeners[listener]; }, 'notify': function(obj) { for(var i = 0; i < this.listeners.length; i++) { var listener = this.listeners[i]; if (typeof listener !== 'undefined') { listener.process(obj); } } } }; // 發佈者 function Subscriber() { } Subscriber.prototype = { 'process': function(obj) { console.log(obj); } };　// 訂閱者 var publisher = new Publisher(); publisher.addListener(new Subscriber()); publisher.addListener(new Subscriber()); publisher.notify({name: 'michaelqin', ageo: 30}); // 發佈一個對象到全部訂閱者 publisher.notify('2 subscribers will both perform process'); // 發佈一個字符串到全部訂閱者

54.處理字符串經常使用的十個函數

charAt()   // 返回在指定位置的字符。 concat() // 鏈接字符串。 fromCharCode() // 從字符編碼建立一個字符串。 indexOf() // 檢索字符串。 match() // 找到一個或多個正則表達式的匹配。 replace() // 替換與正則表達式匹配的子串。 search() // 檢索與正則表達式相匹配的值。 slice() // 提取字符串的片段，並在新的字符串中返回被提取的部分。 split() // 把字符串分割爲字符串數組。 substr() // 從起始索引號提取字符串中指定數目的字符。 substring() // 提取字符串中兩個指定的索引號之間的字符。 toLocaleLowerCase() // 把字符串轉換爲小寫。 toLocaleUpperCase() // 把字符串轉換爲大寫。 toLowerCase() // 把字符串轉換爲小寫。 toUpperCase() // 把字符串轉換爲大寫。 toString() // 返回字符串。 valueOf() // 返回某個字符串對象的原始值。

55.如何判斷一個變量是對象仍是數組

function isObjArr(variable){ if (Object.prototype.toString.call(value) === "[object Array]") { console.log('value是數組'); }else if(Object.prototype.toString.call(value)==='[object Object]'){//這個方法兼容性好一點 console.log('value是對象'); }else{ console.log('value不是數組也不是對象') } } // 注意:千萬不能使用typeof來判斷對象和數組，由於這兩種類型都會返回"object"。

56.ES5的繼承和ES6的繼承有什麼區別？

ES5的繼承是經過prototype或構造函數機制來實現。
ES5的繼承實質上是先建立子類的實例對象，而後再將父類的方法添加到this上(Parent.apply(this))。
ES6的繼承機制實質上是先建立父類的實例對象this(因此必須先調用父類的super()方法)，而後再用子類的構造函數修改this。具體爲ES6經過class關鍵字定義類，裏面有構造方法，類之間經過extends關鍵字實現繼承。子類必須在constructor方法中調用super方法，不然新建實例報錯。由於子類沒有本身的this對象，而是繼承了父類的this對象，而後對其調用。若是不調用super方法，子類得不到this對象。

注意：super關鍵字指代父類的實例，即父類的this對象。在子類構造函數中，調用super後，纔可以使用this關鍵字，不然報錯。

57.下面的ul，如何點擊每一列的時候alert其index？(閉包)

<ul id="test"> <li>這是第一條</li> <li>這是第二條</li>
 <li>這是第三條</li>

 </ul> // 方法一： var lis=document.getElementById('test').getElementsByTagName('li'); for(var i=0;i<3;i++) { lis[i].index=i; lis[i].onclick=function(){ alert(this.index); }; } //方法二： var lis=document.getElementById('test').getElementsByTagName('li'); for(var i=0;i<3;i++) { lis[i].index=i; lis[i].onclick=(function(a){ return function() { alert(a); } })(i); }

58.對於MVVM的理解

MVVM 是 Model-View-ViewModel 的縮寫。
Model表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。
View 表明UI 組件，它負責將數據模型轉化成UI 展示出來。
ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，
簡單理解就是一個同步View 和 Model的對象，鏈接Model和View。
在MVVM架構下，View 和 Model 之間並無直接的聯繫，
而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的，
所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。
ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，
而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，
所以開發者只需關注業務邏輯，不須要手動操做DOM,
不須要關注數據狀態的同步問題，
複雜的數據狀態維護徹底由 MVVM 來統一管理。

59.解釋Vue的生命週期

Vue實例從建立到銷燬的過程，就是生命週期。從開始建立、初始化數據、編譯模板、掛載Dom->渲染、更新->渲染、銷燬等一系列過程，稱之爲 Vue的生命週期。

Vue的生命週期包括：
beforeCreate（建立前）在數據觀測和初始化事件還未開始，
created（建立後）完成數據觀測，屬性和方法的運算，初始化事件，$el屬性尚未顯示出來；
beforeMount（載入前）在掛載開始以前被調用，相關的render函數首次被調用，實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html，注意此時尚未掛載html到頁面上；
mounted（載入後）在el被新建立的vm.$el替換，並掛載到實例上去以後調用，實例已完成如下配置：用上面編譯好的html內容替換el屬性指向的DOM對象，完成模板中的html渲染到html頁面中，此過程當中進行ajax交互。
beforeUpdate（更新前）在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前，能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後）在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環，該鉤子在服務器渲染期間不被調用。
beforeDestroy（銷燬前）在實例銷燬以前調用，實例仍然徹底可用。
destroyed（銷燬後）在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

60.爲何使用Node.js，它有哪些優缺點？

優勢：
事件驅動，經過閉包很容易實現客戶端的生命活期。
不用擔憂多線程，鎖，並行計算的問題
V8引擎速度很是快
對於遊戲來講，寫一遍遊戲邏輯代碼，前端後端通用
缺點：
node.js更新很快，可能會出現版本兼容
node.js還不算成熟，尚未大製做
node.js不像其餘的服務器，對於不一樣的連接，不支持進程和線程操做

61.什麼是錯誤優先的回調函數？

錯誤優先(Error-first)的回調函數（Error-First Callback）用於同時返回錯誤和數據。
第一個參數返回錯誤，而且驗證它是否出錯；其餘參數返回數據。

fs.readFile(filePath, function(err, data) { if (err) { // 處理錯誤 return console.log(err); } console.log(data); });

62.使用npm有哪些好處？

經過npm，你能夠安裝和管理項目的依賴，
而且可以指明依賴項的具體版本號。
對於Node應用開發而言，
能夠經過package.json文件來管理項目信息，
配置腳本，以及指明依賴的具體版本。

63.在JavaScript源文件的開頭包含 use strict 有什麼意義和好處？

use strict 是一種在JavaScript代碼運行時自動實行更嚴格解析和錯誤處理的方法。（嚴格模式）
將值分配給一個未聲明的變量會自動建立該名稱的全局變量。這是JavaScript中最多見的錯誤之一。在嚴格模式下，這樣作的話會拋出錯誤。消除 this 強制。
當檢測到對象（例如，var object = {foo: "bar", foo: "baz"};）中重複命名的屬性，或檢測到函數中（例如，function foo(val1, val2, val1){}）重複命名的參數時，嚴格模式會拋出錯誤，所以捕捉幾乎能夠確定是代碼中的bug能夠避免浪費大量的跟蹤時間。比eval() 更安全。

64.vuejs與angularjs以及react的區別？

與AngularJS的區別
相同點：
都支持指令：內置指令和自定義指令。
都支持過濾器：內置過濾器和自定義過濾器。
都支持雙向數據綁定。
都不支持低端瀏覽器。
不一樣點：
1.AngularJS的學習成本高，好比增長了Dependency Injection特性，而Vue.js自己提供的API都比較簡單、直觀。
2.在性能上，AngularJS依賴對數據作髒檢查，因此Watcher越多越慢。
Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新。全部的數據都是獨立觸發的。
對於龐大的應用來講，這個優化差別仍是比較明顯的。

與React的區別
相同點：
React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，二者都須要編譯後使用。
中心思想相同：一切都是組件，組件實例之間能夠嵌套。
都提供合理的鉤子函數，可讓開發者定製化地去處理需求。
都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載。
在組件開發中都支持mixins的特性。
不一樣點：
React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果作髒檢查。
Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做Virtual DOM。

65.標籤keep-alive的做用是什麼?

<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染。

66.WeakMap 和 Map 的區別?

WeakMap 結構與 Map 結構基本相似，惟一的區別是它只接受對象做爲鍵名（ null 除外），不接受其餘類型的值做爲鍵名，並且鍵名所指向的對象，不計入垃圾回收機制。
WeakMap 最大的好處是能夠避免內存泄漏。一個僅被 WeakMap 做爲 key 而引用的對象，會被垃圾回收器回收掉。
WeakMap 擁有和 Map 相似的 set(key, value) 、get(key)、has(key)、delete(key) 和 clear() 方法, 沒有任何與迭代有關的屬性和方法。

67.http和https的基本概念?

http: 超文本傳輸協議，是互聯網上應用最爲普遍的一種網絡協議，是一個客戶端和服務器端請求和應答的標準（TCP），用於從WWW服務器傳輸超文本到本地瀏覽器的傳輸協議，它可使瀏覽器更加高效，使網絡傳輸減小。
https: 是以安全爲目標的HTTP通道，簡單講是HTTP的安全版，即HTTP下加入SSL層，HTTPS的安全基礎是SSL，所以加密的詳細內容就須要SSL。
https協議的主要做用是：創建一個信息安全通道，來確保數組的傳輸，確保網站的真實性。

68.git fetch和git pull的區別?

git pull：至關因而從遠程獲取最新版本並merge到本地
git fetch：至關因而從遠程獲取最新版本到本地，不會自動merge

69.介紹一下對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、
整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。
瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。
全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。
JS引擎：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

70.什麼是微格式

微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化數據的開放標準。
是爲特殊應用而制定的特殊格式
優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。

71.數據綁定基本的實現

// 實現一個方法，能夠給 obj 全部的屬性添加動態綁定事件，當屬性值發生變化時會觸發事件 let obj = { key_1: 1, key_2: 2 } function func(key) { console.log(key + ' 的值發生改變：' + this[key]); } bindData(obj, func); obj.key_1 = 2; // 此時自動輸出 "key_1 的值發生改變：2" obj.key_2 = 1; // 此時自動輸出 "key_2 的值發生改變：1"

答案：

function bindData(obj, fn) { for (let key in obj) { Object.defineProperty(obj, key, { set(newVal) { if (this.value !== newVal) { this.value = newVal; fn.call(obj, key); } }, get() { return this.value; } }) } }

72.介紹一下對webpack的認識？

WebPack 是一個模塊打包工具，可使用WebPack管理模塊依賴，並編繹輸出模塊們所需的靜態文件。
它可以很好地管理、打包Web開發中所用到的HTML、javaScript、CSS 以及各類靜態文件（圖片、字體等），讓開發過程更加高效。
對於不一樣類型的資源，webpack 有對應的模塊加載器。webpack 模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源。
webpack的兩大特點：
1）code splitting（能夠自動完成）
2）loader 能夠處理各類類型的靜態文件，而且支持串聯操做
webpack 是以commonJS的形式來書寫腳本，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。
webpack具備requireJs和browserify的功能，但仍有不少本身的新特性：
1）對 CommonJS 、 AMD 、ES6的語法作了兼容
2）對js、css、圖片等資源文件都支持打包
3）串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持
4）有獨立的配置文件webpack.config.js
5）能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間
6）支持 SourceUrls 和 SourceMaps，易於調試
7）具備強大的Plugin接口，大可能是內部插件，使用起來比較靈活
8）webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快

73.關於HTTP2.0的認識

HTTP/2引入了「服務端推（server push）」的概念，它容許服務端在客戶端須要數據以前就主動地將數據發送到客戶端緩存中，從而提升性能。
HTTP/2提供更多的加密支持，HTTP/2使用多路技術，容許多個消息在一個鏈接上同時交差。
它增長了頭壓縮（header compression），所以即便很是小的請求，其請求和響應的header都只會佔用很小比例的帶寬。

74.對AMD和Commonjs的理解?

CommonJS是服務器端模塊的規範，nodejs採用了這個規範。
CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。
AMD規範則是非同步加載模塊，容許指定回調函數。
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的
屬性賦值來達到暴露模塊對象的目的。

75.mongoDB和MySQL的區別?

MySQL是傳統的關係型數據庫，MongoDB則是非關係型數據庫
mongodb以JSON結構（二進制）進行存儲，對海量數據存儲有着很明顯的優點。
對比傳統關係型數據庫,NoSQL有着很是顯著的性能和擴展性優點，與關係型數據庫相比，MongoDB的優勢有：
①弱一致性（最終一致），更能保證用戶的訪問速度：
②文檔結構的存儲方式，可以更便捷的獲取數據。

76.講講304緩存的原理?

服務器首先產生ETag，服務器可在稍後使用它來判斷頁面是否已經被修改。
本質上，客戶端經過將該記號傳回服務器，要求服務器驗證其（客戶端）緩存。
304是HTTP狀態碼，服務器用來標識這個文件沒修改，不返回內容，瀏覽器在接收到個狀態碼後，會使用瀏覽器已緩存的文件。
客戶端請求一個頁面A。
服務器返回頁面A，並在給A加上一個ETag。
客戶端展示該頁面，並將頁面連同ETag一塊兒緩存。
客戶再次請求頁面A，並將上次請求時服務器返回的ETag一塊兒傳遞給服務器。
服務器檢查該ETag，並判斷出該頁面自上次客戶端請求以後還未被修改，直接返回響應304（未修改——Not Modified）和一個空的響應體。

77.數組方法

1）join()把數組上午全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
該方法只接收一個參數，用做分隔符的字符串，而後返回包含全部數組項的字符串，若是不給join()方法傳入任何值，則使用逗號做爲分隔符。

var a = [1,2,3]; console.log(a.join());//'1,2,3' console.log(a.join(' '));//'1 2 3' console.log(a.join(''));//'123' var b = new Array(10); b.join('-');//'---------'，9個連字符組成的字符串

注意：若是join()方法的參數是undefined，標準瀏覽器以逗號爲分隔符返回字符串，而IE7-瀏覽器以"undefined"爲分隔符返回字符串；
若是數組中某一項的值是null或者undefined，則該值在join()方法返回的結果中以空字符串表示。
2）push()方法能夠接收任意數量的參數，把它們逐個添加到數組末尾，而且返回修改後數組的長度。

var a = []; console.log(a,a.push(1));//[1] 1 console.log(a,a.push('a'));//[1,'a'] 2 console.log(a,a.push(true, {}));//[1,'a',true,{}] 4 console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5

3）pop()方法從數組末尾移除最後一項，減小數組的length，而後返回移除的項。

var a = ['a', 'b', 'c']; console.log(a,a.pop()); // ['a', 'b'] 'c'

注意：給pop參數傳其餘數字不起做用，也不報錯。仍是隻刪除最後一項；
對空數組使用pop()方法，不會報錯，而是返回undefined
4）shift()方法移除數組中的第一個項並返回該項，同時數組的長度減1

var a = ['a', 'b', 'c']; console.log(a,a.shift());//['b', 'c'] 'a' var arr6 = [1]; console.log(arr6,arr6.shift()); //[] 1

注意：對空數組使用shift()方法，不會報錯，而是返回undefined
5）unshift()方法在數組前面添加任意個項並返回新數組長度。

var a = ['a', 'b', 'c']; console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4

注意：當傳入多個參數時，是一次性插入。最終的數組中插入的元素的順序和它們在參數列表中的順序一致；
在IE-7瀏覽器中，unshift()方法的返回值老是undefined
6）reserve()方法用於反轉數組的順序，返回通過排序以後的數組；而原來數組的順序也發生改變。

var array = [1,2,4,3,5]; console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1] var array = ['str',true,3]; console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

7）sort()按照字符編碼的順序進行排序。sort()方法會調用每一個數組項的toString()方法，而後比較獲得的字符串排序，返回通過排序以後的數組，而原數組順序也發生改變。

var array = [2,1,4,3,5]; console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5] var array = ['3str',3,2,'2']; console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]

注意：若是數組包含undefined元素，它們會被排到數組的尾部；

arrayObject.sort(sortby) 參數可選。規定排序順序。必須是函數。比較函數接收兩個參數，若是第一個參數應該位於第二個以前則返回一個負數，若是兩個參數相等則返回 0，若是第一個參數應該位於第二個以後則返回一個正數。
8）concat()方法基於當前數組中的全部項建立一個新的數組，先建立當前數組一個副本，而後將接收到的參數添加到這個副本的末尾，最後返回新構建的數組。因此concat()不影響原數組。

// 若是不給concat()方法傳遞參數時，它只是複製當前的數組； var arr = [1,2,3]; console.log(arr,arr.concat()); //[1,2,3] [1,2,3] // 若是參數是一個或多個數組，則該方法會將這些數組中的每一項都添加到結果數組中； console.log(arr,arr.concat([6,7,8],[77,33,44])); //[1, 2, 3] [1, 2, 3, 6, 7, 8, 77, 33, 44] var arr1 = [4,5,6]; console.log(arr,arr.concat(arr1)); //[1,2,3] [1,2,3,4,5,6] // 若是傳遞的值不是數組，這些值就會被簡單地添加到結果數組的末尾。console.log(arr,arr.concat(4,5));//[1,2,3] [1,2,3,4,5] console.log(arr,arr.concat(4,[5,[6,7]])); //[1,2,3] [1, 2, 3, 4, 5, [6,7]]

淺拷貝
若是不提供參數，concat()方法返回當前數組的一個淺拷貝。

// 該方法實際只複製了數組的第一維。 // 數組第一維存放的是第二維的引用，而第二維纔是實際存放他們的內容 var numbers = [1,2]; var newNumbers = numbers.concat(); console.log(numbers,newNumbers);//[1,2] [1,2] numbers[0] = 0; console.log(numbers,newNumbers);//[0,2] [1,2] var numbers = [[1,2]]; var newNumbers = numbers.concat(); console.log(numbers,newNumbers);//[[1,2]] [[1,2]] numbers[0][0] = 0; console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

9）slice()方法基於當前數組中的一個或多個項建立一個新數組，接受一個或兩個參數，最後返回新數組，因此slice()不影響原數組。
slice(start,end)方法須要兩個參數start和end，返回這個數組從start位置到end位置(不包含)的一個子數組，左閉右開。
注意：a.若是end爲undefined或不存在，則返回從start位置到數組結尾的全部項；
b.若是沒有參數，則返回原數組，即返回當前數組的一個淺拷貝；
10）splice()方法用於刪除原數組的一部分紅員，並能夠在被刪除的位置添加入新的數組成員，該方法會改變原數組。
splice()返回一個由刪除元素組成的數組，或者若是沒有刪除元素就返回一個空數組
splice(start,number...)的第一個參數start指定了插入或刪除的起始位置，第二個參數number指定了應該從數組中刪除的元素的個數，若是後面還有更多的參數，則表示這些就是要被插入數組的新元素。
11）indexOf(search,start)方法接收search和start兩個參數，返回search首次出現的位置，若是沒有找到則返回-1，start表明從start位置開始尋找。
12）lastIndexOf(search,start)方法從右向左查找。
接收search和start兩個參數，返回search第一次出現的位置，若是沒有找到則返回-1
13）reduce()方法須要兩個參數，第一個是執行化簡操做的函數，化簡函數的任務就是用某種方法把兩個值組合或化簡爲一個值，並返回化簡後的值。

var total = [0, 1, 2, 3].reduce(function(sum, value) { return sum + value; }, 0); // total is 6

reduceRight()則從右到左執行對應的化簡函數
14）map()方法對數組中的每一項運行給定的函數，返回每次函數調用的結果組成的數組，
map方法還能夠接受第二個參數，表示回調函數執行時this所指向的對象。
15）forEach()方法對數組中的每一項運行給定的函數，這個方法沒有返回值。本質上和for循環迭代數組同樣。若是須要有返回值，通常使用map方法。
forEach()方法除了接受一個必須的回調函數參數，第二個參數還能夠接受一個可選的上下文參數（改變回調函數裏面的this指向）

array.forEach(callback(currentValue, index, array){
    //do something }, this)

16）filter()方法對數組中的每一項運行給定的函數，返回該函數會返回true的項組成的數組。該方法經常使用於查詢符合條件的全部數組項。
filter()方法還能夠接受第二個可選的上下文參數（改變回調函數裏面的this指向）

var arr= [1,10,20,30] var brr = arr.filter((item)=>{ return item>10; }) //[20,30]

17）some()方法對數組中的每一項運行給定函數，若是該函數對任一項返回true，則返回true。而且當且僅當數值中的全部元素調用斷定函數都返回false，它才返回false
注意：在空數組上調用some()方法會返回false

const isBiggerThan10 = (element, index, array) => { return element > 10; } [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // true

18）every()方法對數組中的每一項運行給定函數，若是函數對每一項都返回true，則返回true；只要有一項返回false，則返回false
19）fill()方法，用一個固定值填充一個數組中起始索引到終止索引內的所有元素

arr.fill(value, start, end)
var numbers = [1, 2, 3] numbers.fill(1); // results in [1, 1, 1]

20）find()方法返回數組中知足提供的測試函數的第一個元素的值

function isBigEnough(element) { return element >= 15; } [12, 5, 8, 130, 44].find(isBigEnough); // 130

21）findIndex()方法返回數組中知足提供的測試函數的一個元素的索引

function isBigEnough(element) { return element >= 15; } [12, 5, 8, 130, 44].findIndex(isBigEnough); //'3'

22）includes()方法用來判斷一個數組是否包含一個指定的值，若是是，則返回true，若是沒有則返回false

let a = [1, 2, 3]; a.includes(2); // true a.includes(4); // false

23）toLocaleString()方法返回一個字符串表示數組中的元素。數組中的元素將使用各自的toLocaleString方法轉成字符串，這些字符串將使用一個特定語言環境的字符串（例如一個逗號"，"）隔開

var number = 1337; var date = new Date(); var myArr = [number, date, "foo"]; var str = myArr.toLocaleString(); console.log(str); // 輸出 "1,337,2019/2/15 下午8:32:24,foo"

24）copyWithin(target,start,end)方法淺複製數組的一部分到同一數組的另外一個位置
25）Array.isArray()方法用於肯定傳遞的值是不是一個Array

Array.isArray([]) => true; Array.isArray({}) => false;

26）Array.of()

Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]

27）Array.from()
對僞數組或可迭代對象(包括arguments Array,Map,Set,String…)轉換成數組對象
語法 Array.from(arrayLike, mapFn, thisArg)

arrayLike
想要轉換成數組的僞數組對象或可迭代對象。

mapFn (可選參數)
若是指定了該參數，新數組中的每一個元素會執行該回調函數。

thisArg (可選參數)
可選參數，執行回調函數 mapFn 時 this 對象。

返回值一個新的數組實例

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。