1、結果輸出是什麼？

var a=[0];
if(a){
    console.log(a==true);
}
else{
    console.log("xxx");
}

答：false。
知識點：

• 布林值為false的五種情況：數字0、特殊值的 null、NaN、undefined、字串""，其他均為true。
• "=="的隱式型別轉換：
  A.首先看雙等號前後有沒有NaN，如果存在NaN，一律返回false。
  B.再看雙等號前後有沒有布林，有布林就將布林轉換為數字。（false是0，true是1）
  C.接著看雙等號前後有沒有字串, 有三種情況：

1. 對方是物件，物件使用toString()或者valueOf()進行轉換；
2. 對方是數字，字串轉數字；
3. 對方是字串，直接比較；
4. 其他返回false

D.如果是數字，對方是物件，物件取valueOf()或者toString()進行比較, 其他一律返回false
E.null、undefined不會進行型別轉換, 但null==undefined

2、css 屬效能夠設定盒模型的內邊距為上 10px 、下 20px 、左 30px 、右 40px 的合併寫法。
答：

padding：10px 40px 20px 30px;

3、當塊級元素設定 box-sizing:border-box 屬性時，該塊級元素的 width 包含哪幾個部分？
答：content、padding 和 border

4、列舉出 3 個 JS 中的基本資料型別。
知識點：
基本資料型別：string,number,boolean,undefined,null 一共5種
5中基本型別中，只有string,mumber,boolean 有構造物件（有屬性和方法）
object屬於引用型別

5、input 的 type 屬性值列舉 3 個。
答：text, password，file，checkbox，radio，submit，email

6、移動瀏覽器中，觸控一下螢幕會依次觸發哪些事件？
答：觸控事件有 touchstart touchmove touchend touchcancel 四種
touchstart：手指觸控到螢幕會觸發
touchmove：當手指在螢幕上移動時，會觸發
touchend：當手指離開螢幕時，會觸發
touchcancel：可由系統進行的觸發，比如手指觸控式螢幕幕的時候，突然alert了一下，或者系統中其他打斷了touch的行為，則可以觸發該事件

7、'5'+3=？、'5'-3=？
答：53、2

8、常見的瀏覽器端的儲存技術有哪些？
cookie：放在http請求頭中，伴隨資料傳輸而傳輸，資料傳輸大小有限制，有過期時間
localstorage：儲存在本地，不會伴隨資料傳輸，生命週期為永久
sessionstorage：瀏覽器中，瀏覽器關閉則消失，即使在同源瀏覽器中也不能共享

9、非嚴格模式下寫出下面表示式結果。
parseInt("123a")=？
答：123

10、判斷輸出結果。

var a=[1,2,3,4,5];
a.splice(1,3,5,2,1);
console.log(a);

答：[ 1, 5, 2, 1, 5 ]
知識點：array.splice(刪除位置，刪除個數，替換內容)

11、簡述css中position屬性為absolute和relative的區別。
答：
1、position：relative 相對定位
特點：
1）不影響元素本身的特性；
2）不使元素脫離文件流（元素移動之後原始位置會被保留）；
3）如果沒有定位偏移量，對元素本身沒有任何影響；
4）提升層級。
注：定位元素位置控制：top/right/bottom/left 定位元素偏移量
2、position：absolute 絕對定位
特點：
1）使元素完全脫離文件流；
2）使內嵌支援寬高；
3）塊屬性標籤內容撐開寬度；
4）如果有定位父級相對於定位父級發生偏移，沒有定位父級相對於document發生偏移；
5）相對定位一般都是配合絕對定位元素使用；
6）提升層級

12、簡述domready和onload事件的區別？圖片的onload和domready和頁面onload的先後順序，並簡述原因。
答：
DOM文件載入的步驟為：
1.解析html結構
2.載入外部指令碼和樣式表文件
3.解析並執行指令碼程式碼
4.dom樹構建完成 // DOMContentLoaded
5.載入圖片等外部檔案
6.頁面載入完畢 // window.onload
可以通過addEventListener測試一下結果
先DOMContentLoaded也即domready；
然後img的ready；
最後window的ready。

13、描述一個你在實際專案中有用過什麼比較好的佈局方式（不拘泥於頁面整體佈局，頁面中某一小版塊也行），深入講解下其中的原理？
知識點：
文件佈局（text）
文件流本質是 nomal flow （普通流、常規流）
元素在文件中的特點 塊級元素，和內聯元素。
塊級元素：是自帶有這行效果，在文件中獨佔一行的效果，塊狀元素會自上而下的排列且在預設寬度是父元素的100%而高度預設被內容撐開。
內聯元素：內聯元素在文件流中只佔自身的大小，會預設從左向右排列，如果一行中不足以容納所有的內聯元素，則換到下一行，繼續自左向右。在文件流中，內聯元素的寬度和高度預設都被內容撐開。 什麼是文件流（文件佈局）將窗體自上而下分成一行一行，塊級元素從上至下、行內元素在每行中從左至右的順序依次排放元素。
缺點：在移動端不可以使用pc端的頁面，兩個頁面的佈局是不一致的，移動端需要自己再設計一個佈局並使用不同的域名呈現

浮動佈局（float）
浮動一般用於讓塊級元素排成一行在同一行顯示
任何元素都可浮動，如一個元素設定為浮動元素，浮動元素無論最初是什麼都會變成一個行塊級元素，擁有disolay：inline-block屬性float：left沿著父容器頂部向左推入容器，如果卡住推不動，判斷當前位置能否全部顯示該子容器，如果能完成 如果不能繼續找空檔往裡推
缺點：脫離文件流，需要清除浮動，高度塌陷（float的破壞性主要是指它會使父容器的高度塌陷，也就是父元素在高度計算的時候會忽略浮動的元素）。
優點：相容性好，計較簡單容易上手
清除浮動
清除浮動是為了父級元素所在容器中的block-level box佈局不產生影響所以在浮動佈局情況下，讓父級得適合的高度
最後在同一結構下, 如果採用浮動佈局,所有的同級別兄弟標籤都要採用浮動佈局浮動佈局的盒子寬度在沒有設定時會自適應內容寬度

定位佈局（position）
relative屬性：脫離文件流，但保留佔位符，其偏移位置是相對於本身在正常文件流中時的位置， 脫離文件流是說設定了relative屬性之後，元素不在z-index：0；的正常文件流中，其z-index的值>0但保留佔位符，就是在正常文件流中位置依舊保留著，後續元素不能佔位，然後相對於本身正常位置進行偏移。
absolute：完全脫離文件流，不保留佔位符，其元素定位是相對於其父級以上，一直追溯至設定了position：relative或fixed屬性的外層元素（也包含塊元素），如果其外層元素均勻未設定position屬性，則定位是相對於HTML文件進行的絕對定位，並不是相對於body的定位
缺點：脫離文件流，會導致後續元素全部脫離文件流，可用行差。
優點： 就是 讓元素擁有了 inline-block 寬高限制

流式佈局（streaming）
元素的寬高用百分比做單位，元素寬高按螢幕解析度調整，佈局不發生變化。螢幕尺度跨度過大的情況下不能正常顯示
使用百分比定義寬高大多數都是用px來固定住，可以根據可視區域（viewport）和父元素的尺寸進行調整，儘可能的適應各種解析度，往往max-width/min-width等屬性控制尺寸流動範圍以免過大或者過小影響閱讀頁面。這種佈局方式在WEB前端開發的時早期歷史上，用來應對不同尺寸的pc螢幕（那時螢幕尺寸的差異不會太大），在當今的移動端開發也是常用佈局方式，但缺點明顯：主要的問題是如果長度過大，那麼在相對其原始設計而言過小或過大的螢幕都不能在螢幕上正常的顯示。
因為寬度使用百分比（%）來定義，但是高度和文字大小等大都是用px來固定。所以在大螢幕的手機下顯示效果變成有些頁面元素寬度被拉的很長，但是高度，文字大小文字還是和原來一樣，享受到非常的不協調
缺點：如果尺度過大或者過小在螢幕上就不能正常顯示
優點：相容性比較好，當螢幕解析度變化時元素大小不變佈局也不變

彈性佈局（rem/em）
彈性佈局是css3引入的佈局方式，用來代以前的WEB開發人員的一些複雜易錯的hacks方法（如float實現流失佈局）
rem是相對於html元素的font-size大小而言的，而em是相對於其父元素，使用rem單位的彈性佈局在移動端比較受歡迎使用。
、這類佈局的特點是，包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式佈局」或「靜態/固定佈局」）。早期瀏覽器不支援整個頁面按比例縮放，僅支援網頁內文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放。
rem,em區別：rem,em都是順應不同網頁字型大小展現而產生的。其中，em是相對其父元素，在實際應用中相對而言會帶來很多不便；而rem是始終相對於html大小，即頁面根元素。
瀏覽器的預設字型高度一般為16px，即1em:16px，但是 1:16 的比例不方便計算，為了使單位em/rem更直觀，CSS編寫者常常將頁面跟節點字型設為62.5%，比如選擇用rem控制字型時，先需要設定根節點html的字型大小，因為瀏覽器預設字型大小16px*62.5%=10px。這樣1rem便是10px，方便了計算。
缺點：瀏覽器的相容性比較差只能到ie9以及以上。
優點：適應性強，在做不同螢幕解析度的介面時非常使用，可以隨意按照寬度，比列劃分元素的寬高，實現快捷，易維護。簡單，方便，快速。

自適應佈局（adaptation）
自適應佈局分辨為不一樣螢幕解析度定義佈局，可以建立多個靜態佈局，每一個靜態佈局對應一個解析度範圍，螢幕解析度變化時，頁面裡面的元素的位置會變化而大小不會變，可使用(@media媒體查詢)給不同的尺寸和介質的裝置切換不同的樣式在優秀的響應範圍設計下可以給配範圍內的裝置最好的體驗，在同一個裝置下實際還是固定的佈局
缺點：如果需要不同頁面那麼還需要寫多頁的程式碼
優點：螢幕解析度變化時，頁面裡面元素的位置變化而大小不會變化

響應式佈局（ BootStrap）
為不同的螢幕解析度定義佈局，同時，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨著視窗調整而自動適配。可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。即：建立多個流體式佈局，分別對應一個螢幕解析度範圍。響應式幾乎已經成為優秀頁面佈局的標準，每個螢幕解析度下面會有一個佈局樣式，即元素位置和大小都會變媒體查詢+流式佈局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對佈局單位進行佈局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同裝置返回不同樣式的技術統稱。
缺點：媒體查詢是有限的，也就是可以枚舉出來的，只能 適應主流的寬高，要匹配足夠的螢幕大小，工作量比較大，設計也需要多個版本
優點：適應pc和移動端，如果只夠的耐心，效果會很完美。

14、Ajax是什麼？Ajax的互動模型？同步和非同步的區別？如何解決跨域問題？
答：
一、Ajax是什麼？
1、Ajax全稱asynchronous javascript and xml ，可以說是已有技術的組合。
2、主要用來實現客戶端與伺服器的非同步通訊效果，實現頁面的區域性重新整理
3、ajax的實現過程：
a.建立XMLHttpRequest物件，也就是建立一個非同步呼叫物件
b.建立一個新的http請求，並指定該http請求的方法、URL以及驗證資訊
c.設定響應http請求狀態變化的函式
d.發起http請求
e.獲取非同步呼叫返回的資料
f.使用javascript 和 dom 實現區域性重新整理
二、同步、非同步的區別
同步:阻塞的 兩人吃飯。一人忙，一人等
非同步:非阻塞的 兩人吃飯。一人忙，另一個不等
三、如何解決跨域問題？
理解跨域的概念:協議、域名、埠都相同是同源，否則都是跨域
解決:動態建立script標籤，使用標籤的src屬性訪問js檔案的形式獲取js指令碼，並且這個js指令碼中的內容是函式呼叫，該函式呼叫的引數是伺服器返回的資料，為了獲取這裡的引數資料，需要事先在頁面中定義回撥函式，在回撥函式中處理伺服器返回的資料。

15、簡述instanceof和type的區別？簡述[]instanceof Object的值和原因？
答：type 獲取物件的基本型別，常用於判斷物件是否賦值，instanceof 返回物件的類。
[]instanceof Object 的值為true。

16、編寫一個函式isMerge，判斷一個字串str是否可以由其他兩個字串part1和part2組合而成。組合的規則如下：

1. str中的每個字母要麼來自於part1，要麼來自於part2;
2. part1和part2中字母的順序與str中字母的順序相同。
   答：

function isMerge(s, part1, part2) {
    var p1 = part1.split(''),
    p2 = part2.split('');
 
    for(var i = 0;i < s.length; i++){
        if (p1.indexOf(s[i]) > -1) {
            p1.shift();
        } else if (p2.indexOf(s[i]) > -1) {
            p2.shift();
        } else {
            return false;
        }
    }
    return true;
}

17、給 Array 本地物件增加一個原型方法，它用於刪除數字陣列中重複的數字（可能有多個），返回值是一個包含被刪除的重複條目的新陣列。
答：Array.prototype.deleteSame = ()=>{return Array.from(new Set(arr))};

18、【程式設計題】
小 S，小L，小P，小R和小H 五個人排隊站在一個出售’克隆可樂’的自動販賣機前；隊伍中除了他們五個沒有其他人 。 隊形如下 ：
小 S，小L，小P，小R，小H 。佇列的第一個人（小S）買了一聽可樂，喝下去後變成了兩個小S，然後兩個小S心滿意足的站到了隊伍的最後。
此時隊形變成了這樣： 小 L，小P，小R，小H，小S，小S
然後佇列中下一個人 （小L）也買了聽可樂，喝下去後變成兩個人，站到了隊伍最後。以此類推。例如小P第三個喝了克隆可樂，之後隊伍變成這個樣子：
小 R，小H，小S，小S，小L，小L，小P，小P
請問第 n個喝這個飲料的人是誰？
答：

var arr=['S','L','P','R','H'],temp,count=0;
while(count!=n){
    temp=arr.shift();
    count++;
    arr.push(temp);
    arr.push(temp);
}
console.log( temp);