2019js基礎面試題整理複習

時間 2019-11-10

標籤 2019js 基礎面試整理複習欄目 JavaScript 简体版

原文原文鏈接

複習整理

html

1.html5有什麼新特性？

新增語義化標籤<header></header>、<nav></nav>等

新增用於繪畫的<canvas>元素javascript

用於媒介回放的video和audio元素php

本地緩存有更好支持（localStorage和sessionStorage）css

2.html是什麼，html文檔是什麼？

html是用來描述網頁的一種超文本標記語言，html文檔也被成爲網頁，它包含html標籤和純文本html

3.<!DOCTYPE html>是什麼？

它不是html標籤，它爲瀏覽器提供一種信息聲明，告訴瀏覽器html是用什麼版本編寫的，用來表示html的版本html5

4.html文檔的類型

有html、html+、html2.0、html、3.二、html4.0一、xhtml 1.0、html5等java

css

1.簡述flex佈局

flex佈局：彈性佈局，設置間距相同的佈局、單行單列布局的時候至關好用
display能夠設置爲flex、inline-flex。jquery

設置display：flex的時候，子元素的float、clear、vertical-align屬性都將所有失效。css3

容器屬性：es6

flex-direction設置主軸的排列方向，有 row（豎直向下排列）、row-reverse（豎直向上排列）、column（垂直向右排列）、column-reverse（垂直向左排列）ajax

flex-wrap 設置是否排列在一條線上，有nowrap、wrap和warp-reverse三個選項

flex-flow是flex-direction和flex-wrap的簡寫

justify-content定義項目在主軸上的對齊方式有 flex-start | flex-end | center | space-between | space-around

align-items定義交叉軸的對齊方式 flex-start | flex-end | center | baseline | stretch

align-content定義多跟軸線的對齊方式

項目屬性：

align-self（改項目的對齊方式）

order （項目排列順序）

flex-grow（項目放大比例）

flex-shrink（項目縮小比例）

flex-basis（在分配多餘空間時，項目佔據的主軸空間）

flex（flex-grow，flex-shrink，flex-basis的縮寫）

2. 簡述grid佈局

網格佈局

3. 幾種實現水平垂直居中的方法

使用display：flex，justify-content：center，align-item： center實現

肯定高寬狀況下
.test {

position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}，或者
.test {
position: absolute;
margin:auto;
left:50%;
top:50%;
margin-top： -height/50；
margin-left： -width/50；
}，

不肯定高寬
.test {

position: absolute;
margin:auto;
left:50%;
top:50%;
transform： translate（-50%，-50%）
}，

4. 常見塊級元素和內聯元素

塊級元素： div、form、table、p、h1-h六、dl、li、ul、ol等
內聯元素： a、strong、br、img、i、span、label、input、textarea、select等

5. position定位有哪些

absolute（絕對定位，相對於值不爲static的第一個父元素進行定位）

relative（相對定位，相對於其正常位置進行定位）
fixed（相對於瀏覽器窗口進行定位）
static（默認值，沒有定位，元素出如今正常的流中）
inherit（繼承父元素position屬性的值）
sticky（relative和fixed的結合體，當元素在屏幕內飾relative，滾出屏幕時顯示爲fixed）

6. css3的新屬性

1. transfrom（對元素進行旋轉、縮放、移動或傾斜）、animation（動畫效果）和transition（添加過渡效             果）
2. 三個邊框效果： border-radius（建立圓角邊框）、border-shadow（陰影）、border-image（使用圖片繪製邊框）
3. 文字效果新增word-wrap、text-overflow和text-shadow，以上等等

7.block、inline和inline-block的區別

display：block
1. block元素又叫作塊級元素，它獨佔一行，多個block元素各佔一行。默認狀況下block元素寬度自動填滿父元素寬度
2. 能夠設置weight和width屬性，塊級元素設置了width仍是獨佔一行
3. 能夠設置padding和margin屬性
display：inline
1.inline元素又叫內聯元素，不會佔一行，多個內聯元素會排列在一行，一行排列不下去纔會行，，寬度隨元素的內容變化
2.設置width和weight屬性無效
3.inline元素的margin和padding屬性，水平方向上都能產生邊距效果，豎直方向上不會產生效果
display： inline-block
1. 內聯塊級元素擁有inline元素的多個佔據同行特性和block元素的設置高度寬度特性和設置 padding和margin特性

8. display：none和visiblity：hidden的區別

爲none的時候不佔空間，爲hidden的時候隱藏元素依然佔據空間

爲none的會產生迴流和重繪，visiblity：hidden的時候只產生重繪

visiblity：hidden的子孫元素設置visiblity：hidden時會失效

9. 什麼是BFC， BFC用來解決什麼問題

格式化上下文：特色是內部的子元素不會影響外部的元素，能夠用來解決margin穿透和清除浮動

一個塊格式化上下文由如下之一建立：

1)根元素或其它包含它的元素
2)浮動元素 (元素的 float 不是 none)
3)絕對定位元素 (元素具備 position 爲 absolute 或 fixed)
4)內聯塊 (元素具備 display: inline-block)
5)表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性)
6)表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性)
7)具備overflow 且值不是 visible 的塊元素，
8)display: flow-root
9)column-span: all 應當老是會建立一個新的格式化上下文，即使具備 column-span: all 的元素並不被包裹在一個多列容器中。

10.盒子模型有哪些，如何設置

iE盒子模型：內容（content+padding+border）+邊界margin 高寬包含padding和border

標準盒子模型： content+padding+border+邊界margin 高寬指的是content

經過box-sizing：content-box設置標準盒子模型，box-sizing：border-box設置ie盒子模型

11.css選擇器有哪些

選擇器有id選擇器、元素選擇器、屬性選擇器、類選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器、僞類和僞元素。

12.清除浮動的四種方式

在浮動的元素樣式中加入clear：both
在浮動元素下面插入清除浮動的塊級元素
給浮動元素設置僞類，僞類樣式設置display爲block，clear：both
設置BFC（格式化上下文），如浮動父元素設置overflow：auto

13.如何用css實現一個三角形

定義一個div元素，讓它的內容高寬爲0，經過border來實現

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

以上css樣式經過設置底部border邊爲紅色，其餘邊爲透明色，實現了一個底部寬40，高20的紅色的三角形

js

1. addEventListener的第三個參數的做用

指定事件是否在捕獲或者冒泡階段執行，true爲在捕獲階段執行，false默認，在冒泡階段執行

2.什麼是事件冒泡，什麼是事件捕獲

事件冒泡指事件從發生的目標開始，沿着文檔逐層向上冒泡，到documnent爲止，事件捕獲則相反，從documnet開始，沿着文檔向下，直到目標事件爲止，

3.如何阻止事件冒泡和事件捕獲

ie下設置e.cancelBubble = true，在符合w3c的瀏覽器設置e.stopProgation()阻止事件冒泡，也能夠經過preventDefault阻止默認行爲，由於事件處理的默認行爲就是冒泡或者經過return false

使用stopImmediatePropagation() 阻止事件捕獲，須要注意的是stopImmediatePropagation() 也能阻止事件冒泡，調用後，不只父類元素冒泡被阻止，同時該元素綁定的同類事件也會執行

4.typeof返回的數據類型

string、number、boolean、undefined、object、function

5.列舉三種強制類型轉換和2種隱式類型轉換

強制（parseInt、parseFloat、number）

隱式（== ===）

6.split（） join（）區別

前者將字符串切割成數組形式，後者將數組轉爲字符串

7. ajax請求get和post方法的區別

get主要是獲取資源，post請求服務器端資源
get傳輸數據經過url，post經過http的post機制，將要傳輸的數據放在請求實體中發送給服務器
get傳輸數據量小，post傳輸數據量大
get不安全，post安全性較高
get只能支持ASCII字符傳輸，傳遞中午字符會亂打；post支持標準字符集，能夠傳遞中文字符

8.call、apply和bind的區別

call和apply均可以改變this的指向，區別在於傳入apply的第二個參數是一個數組，call後面是對象

bind後面的參數也是對象，可是bind不會當即執行

9.ajax請求時，如何解析json數據

使用JSON.parse()把json數據轉化爲js對象，使用JSON.Stringify()把js對象轉化爲json字符串

10.閉包是什麼，有什麼特性

閉包就是可以讀取函數內部變量的函數，使得函數不被GC回收，若是過多使用，就會形成內存泄露

11.添加刪除替換插入到某個節點的方法

建立新節點
createElement（） // 建立一個具體元素

createTextNode（） // 建立一個文本節點
添加、移除、替換、插入
appendChild（） // 添加

removeChild（） // 移除

replaceChild（） // 替換

insertBefore（） // 插入

12.document onload和doucment ready的區別

onload是在結構和樣式、外部js及圖片加載好後執行js，ready是在dom樹建立完成後就執行，是jquery裏面的方法

13.函數聲明和函數表達式的區別

函數聲明在js解析時就會進行函數提高，所以在同一做用域中，無論函數聲明在哪定義，該函數均可以調用，函數表達式只有在執行到那一塊後，才能夠調用

14. null和undefined的區別

null表示‘空’的對象，轉化爲數值是0，undefined是一個表示無的原始值，轉化爲數值是NAN，

變量爲聲明，默認是undefined，null表示尚不存在的對象

undefined表示爲未初始化的變量返回的值，null表示一個尚不存在的對象返回的值，undefined能夠看作空的變量，null看作空的對象

15. new操做符幹了什麼

建立了一個空對象。
把所建立的空對象的_ proto _指向構造函數的prototype
執行構造函數中的代碼，構造函數中的this指向對象
返回該對象（除非構造函數中返回一個對象或者函數）

16.實現深度克隆

JSON.parse(JSON.stringify());

17.什麼是同源策略

它是瀏覽器的一種約定，腳本只容許訪問同一站點的資源，協議相同，域名相同，端口號相同，就是同一站點

在瀏覽器中，<script> 、<img> <link>等標籤均可以跨域加載資源，cookie和ajax都不能跨域加載資源

18.ajax跨域

後端服務器端設置
res.header('Access-Control-Allow-Origin', '*'); // 設置容許全部源訪問
jsonp跨域

JSONP是JSON with Padding的略稱。它是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問；實現方式是利用script中的src請求服務器端數據，服務端將須要的數據以入參的形式放入建立的函數中並返回
```
<meta content="text/html;chartset=utf-8" http-equiv="Content-type"/>
<script type="text/javascript">
    function jsCallback(res) {
    console.log(res);
    }
</script>   
<script type="text/javascript" src="http://abc.com/index.php?callback=jsCallback"/>
```

19.js如何獲取dom元素

經過ID獲取（getElementById，只獲取一個元素，沒找到則爲null）
經過name獲取（getElementByName，返回一個類數組，沒有找到則爲空數組）
經過標籤名（getElementsByTagName，返回一個類數組，沒有找到則爲空數組）
經過類名（getElementByClassName，返回一個類數組，沒找到則爲空數組）
經過選擇器獲取一個元素（querySelector，返回值只取到第一個元素）
經過選擇器獲取全部元素（querySelectorAll，返回一個類數組）

20.原生ajax請求步驟有哪些

// 建立XMLHttpRequest對象
var ajax = new XMLHttpRequest()；
// 規定請求的類型，url及是否異步處理請求
ajax.open('GET', url,true);
// 設置發送信息至服務器時內容編碼格式
ajax.setRequestHeader('Content-type', 'application/x-www-from-urlencoded');
//接受服務器響應數據
ajax.onreadystatechange = function() {
    if(ajax.readyState === 4 && ajax.status === 200 || ajax.status === 304 ) {
        
    }
}
//發送請求
ajax.send(null);

21.列舉數組的對象方法

方法	描述
push（）	添加元素到數組末尾
splice( )	刪除元素，並向數組添加新元素
unshift（）	向數組頭部添加一個元素
pop（）	刪除數組末尾元素
shift（）	刪除數組頭部元素
slice（）	從數組中返回特定的元素
sort（）	對數組進行排序
join（）	把數組全部元素放入一個字符串，元素經過指定分割符進行分隔
concat（）	合併兩個或多個數組，併合並
reverse（）	顛倒數組中元素的順序
toString（）	把數組轉化爲字符串，返回結果
valueOf（）	返回數組對象的原始值

22.js實現數組去重

1.es6實現

function deRep( arr ) {
    return [...new Set(arr)];
}

2.遍歷數組

function deRep (arr) {
    var a = [];
    for(let i = 0; i< arr.length;i++) {
        if(a.indexOf(arr[i]) == -1) {
            a.push(arr[i]);
        }
    }
    return a;
}

3.優化數組遍歷，（雙層循環）

function deRep(arr) {
    var a = [];
    for (let i = 0; i < arr.length; i++) {
        for(let j = i+1; j < arr.length; j++ ) {
            if(arr[i] === arr[j]) {
                ++i;
            }
        }
       a.push(arr[i]);
    }
    return a;
}

4.排序後相鄰去重

function deRep(arr) {
    var a = [arr[0]];
    arr.sort();
    for(let i = 0; i < arr.length; i++ ) {
        if(arr[i] !== a[a.length - 1]) {
            a.push(arr[i]);
        }
    }
    return a;
}

利用map的key值不能重複

function deReq(arr) {
     let map = new Map();
     let a = [];
     for (let i =0 ; i< arr.length; i++) {
         if(map.has(arr[i])) {
             map.set(arr[i], true);
         } else {
             map.set(arr[i],false)
             a.push(arr[i]);
         }
     }
     return a;
 }

6.利用reduce（）方法

function deReq(arr) {
    return arr.reduce((prev,cur) => {
        prev.includes(cur) || prev.push(cur);
        return prev;
    },[]);
}

23.數組求和

1.使用遞歸

function sum(arr) {
    let len = arr.length;
    if(len === 0) {
        return 0;
    } else if(len === 1) {
        return arr[0];
    } else {
        return arr[0] + sum(arr.slice(1))
    }
}

2.forEach迭代

function sum(arr) {
    let sumArr = arr;
    let sum = 0;
    sumArr.forEach((val,index,arr) => {
        sum += val;
    },0);
     return sum;
}

3.for循環累加

function sum(arr) {
    let arr1 = arr;
    let sum = 0;
    for(let i = 0; i< arr1.length; i++) {
        sum += arr[i];
    }
    return sum;
}

利用reduce（）方法

function sum(arr) {
    let arr1 = arr;
    let sum = arr1.reduce((prev,cur,index,arr) => {
        return prev + cur;
    })
    return sum;
}

24.數組排序

1.冒泡排序

function sortArr(arr) {
    if(arr.length < 1) {
        return arr;
    }
    for(let i = 0; i<arr.length; i++) {
        for(let j = 0; j <arr.length -1 - i; j++) {
            if(arr[j] < arr[j + 1] ) {
                let flag = arr [j];
                arr[j] = arr[j + 1];
                arr[j + 1] = flag;
            }
        }
    }
      return arr;
}

自定義數組的sort方法

function sort(a,b) {
    return a - b;
    
}

3.快速排序

function sortArr(arr) {
    if(arr.length < 1) {
        return arr;
    }
    let num = arr.splice([Math.floor(arr.length / 2)],1)[0];
    let left = [], right = [];
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] < num) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    return sortArr(left).concat([num], sortArr(right));
}