2019初級中級高級web前端面試題超全面細節解析

時間 2019-11-05

標籤初級中級高級 web 端面試題全面細節解析欄目 HTML 简体版

原文原文鏈接

前言

文章涉及的內容可能不全面，但量不少，須要慢慢看。我花了很長的時間整理，用心分享心得，但願對你們有所幫助。可是不免會有打字的錯誤或理解的錯誤點，但願發現的能夠郵箱告訴我1163675970@qq.com，我會及時的進行修改，只但願對你有所幫助，謝謝。javascript

本片文章記錄一下當時本身學習JavaScript的過程以及一些知識點和注意事項,從基礎到中高級的內容都有,會以章節的形式慢慢展現出來css

1、CSS問題

1、flex彈性佈局，

能夠簡單的使一個元素居中（包括水平和垂直居中）柵格式系統佈局，bootstrap gridhtml

2、聖盃和雙飛翼佈局三欄是佈局（兩邊兩欄寬度固定，中間欄寬度自適應）

方案一：position（絕對定位法） center的div須要放在最後面絕對定位法原理將左右兩邊使用absolute定位，由於絕對定位使其脫離文檔流，後面的center會天然流動到他們的上賣弄，而後margin屬性，留出左右兩邊的寬度。就能夠自適應了。java

方案二：float 自身浮動法 center的div須要放到後面自身浮動法的原理就是對左右使用float:left和float：right，float使左右兩個元素脫離文檔流，中間的正常文檔流中，使用margin指定左右外邊距對其進行一個定位。node

聖盃佈局：原理就是margin負值法。使用聖盃佈局首先須要在center元素外部包含一個div,包含的div須要設置float屬性使其造成一個BFC，而且這個寬度和margin的負值進行匹配css3

3、左邊定寬，右邊自適應

方案一：左邊設置浮動，右邊寬度設置100% .left{float:left} .right:{width:100%}es6

方案二：左設置浮動，右用cacl去補寬度計算 .left{float:left} .right:{width:cacl(100vw-200px}算法

方案三：父容器設置display：flex right部分是設置flex：1json

方案四：右邊div套個包裹、並前置、左及包裹雙浮動bootstrap

4、水平居中

行內元素居中（父元素text-align:center）

塊狀元素居中（塊狀元素沒發用text-align）

- 1. 寬度必定：margin:auto
	- 2.寬度不定：塊級變行內，而後在父上text-aligin
	    float
複製代碼

5、BFC juejin.im/post/5909db…

理解：BFC是css佈局的一個概念，是一塊獨立的渲染區域，一個環境，裏面的元素不會影響到外部的元素

如何生成BFC：（脫離文檔流）

【1】根元素，即HTML元素（最大的一個BFC）

【2】float的值不爲none

【3】position的值爲absolute或fixed

【4】overflow的值不爲visible（默認值。內容不會被修剪，會呈如今元素框以外）

【5】display的值爲inline-block、table-cell、table-caption

BFC佈局規則：

1.內部的Box會在垂直方向，一個接一個地放置。

2.屬於同一個BFC的兩個相鄰的Box的margin會發生重疊

3.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此, 文字環繞效果，設置float

4.BFC的區域不會與float box重疊。

5.計算BFC的高度，浮動元素也參與計算

BFC做用： 1.自適應兩欄佈局

2.能夠阻止元素被浮動元素覆蓋

3.能夠包含浮動元素---清除內部浮動 > > >

原理: 觸發父div的BFC屬性，使下面的子div都處在父div的同一個BFC區域以內

4.分屬於不一樣的BFC時，能夠阻止margin重疊

display:flex; 在父元素設置，子元素受彈性盒影響，默認排成一行，若是超出一行，按比例壓縮 flex:1; 子元素設置，設置子元素如何分配父元素的空間，flex:1,子元素寬度佔滿整個父元素align-items:center 定義子元素在父容器中的對齊方式，center 垂直居中justify-content:center 設置子元素在父元素中居中，前提是子元素沒有把父元素佔滿，讓子元素水平居中。

2.css3的新特性

transtion transition-property 規定設置過渡效果的 CSS 屬性的名稱。

transition-duration 規定完成過渡效果須要多少秒或毫秒。

transition-timing-function 規定速度效果的速度曲線。

transition-delay 定義過渡效果什麼時候開始。

animation屬性能夠像Flash製做動畫同樣，經過控制關鍵幀來控制動畫的每一步，實現更爲複雜的動畫效果。

ainimation實現動畫效果主要由兩部分組成：

經過相似Flash動畫中的幀來聲明一個動畫；

在animation屬性中調用關鍵幀聲明的動畫。

translate 3D建模效果

3.img中alt和title的區別

圖片中的 alt屬性是在圖片不能正常顯示時出現的文本提示。

圖片中的 title屬性是在鼠標在移動到元素上的文本提示。

4.用純CSS建立一個三角形

<style>
    div {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
    }
    </style>
</head>
<body>
  <div></div>
</body>
複製代碼
複製代碼

5.如何理解CSS的盒子模型？

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

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

6.如何讓一個div水平居中

已知寬度，block元素，添加添加margin:0 auto屬性。

已知寬度，絕對定位的居中，上下左右都爲0，margin:auto

7.如何讓一個div水平垂直居中

div {
position: relative / fixed; /* 相對定位或絕對定位都可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;
 外邊距爲自身寬高的一半 */
background-color: pink; /* 方便看效果 */
 }

.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
 
}
.container div {
width: 100px; /* 可省 */
height: 100px; /* 可省 */
background-color: pink; /* 方便看效果 */
}  
複製代碼
複製代碼

8.如何清除浮動？

clear清除浮動（添加空div法）在浮動元素下方添加空div,並給該元素寫css樣式 {clear:both;height:0;overflow:hidden;}

給浮動元素父級設置高度

父級同時浮動（須要給父級同級元素添加浮動）

父級設置成inline-block，其margin: 0 auto居中方式失效

給父級添加overflow:hidden 清除浮動方法

萬能清除法 after僞類清浮動（如今主流方法，推薦使用）

float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
複製代碼
複製代碼

9.css3實現三欄佈局，左右固定，中間自適應

聖盃佈局/雙飛翼佈局

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle,
        .left,
        .right {
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container {
            padding: 0 220px 0 200px;
            overflow: hidden;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='middle'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>
複製代碼
複製代碼

10.display:none 和 visibility: hidden的區別

display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。

visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

11.CSS中 link 和@import 的區別是？

link屬於HTML標籤，而@import是CSS提供的頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載

import只在IE5以上才能識別，而link是HTML標籤，無兼容問題

link方式的樣式的權重高於@import的權重.

12.position的absolute與fixed共同點與不一樣點

共同點：改變行內元素的呈現方式，display被置爲block 讓元素脫離普通流，不佔據空間默認會覆蓋到非定位元素上

不一樣點： absolute的」根元素「是能夠設置的 fixed的」根元素「固定爲瀏覽器窗口。當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

13..transition和animation的區別

Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區別是transition須要觸發一個事件才能改變屬性，而animation不須要觸發任何事件的狀況下才會隨時間改變屬性值，而且transition爲2幀，從from .... to，而animation能夠一幀一幀的。

transition 規定動畫的名字規定完成過渡效果須要多少秒或毫秒規定速度效果定義過渡效果什麼時候開始 animation 指定要綁定到選擇器的關鍵幀的名稱

14.CSS優先級

不一樣級別：總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
	1.屬性後面加!import 會覆蓋頁面內任何位置定義的元素樣式
	2.做爲style屬性寫在元素內的樣式
	3.id選擇器
	4.類選擇器
	5.標籤選擇器
	6.通配符選擇器（*）
	7.瀏覽器自定義或繼承
**同一級別：後寫的會覆蓋先寫的**
複製代碼
複製代碼

css選擇器的解析原則：選擇器定位DOM元素是從右往左的方向，這樣能夠儘早的過濾掉一些沒必要要的樣式規則和元素

15.雪碧圖：

多個圖片集成在一個圖片中的圖
	使用雪碧圖能夠減小網絡請求的次數，加快容許的速度
	經過background-position，去定位圖片在屏幕的哪一個位置
複製代碼

JS問題

第一章初識JavaScript

JavaScript（JS）是什麼?

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言。
JavaScript一般用來操做HTML頁面，響應用戶操做，驗證傳輸數據等
java和JavaScript有什麼關係？java和JavaScript沒有關係
jQuery和JavaScript有什麼關係？jQuery是由JS編寫的一個js庫。

JS代碼寫在哪裏？

內嵌 js，
外鏈 js文件裏面，利用src屬性引入
標籤屬性裏面（不推薦）
script標籤中的屬性type="text/javascript"或language=」javascript」，HTML5新規則下能夠什麼都不用加；
script標籤能夠放置於任何位置，不一樣的位置要注意加載順序，一般放在head或body結束以前；

寫JS代碼須要注意什麼?

嚴格區分大小寫；
語句字符都是半角字符；（字符串裏面可使任意字符）
某些完整語句後面要寫分號 (;)
代碼要縮進，縮進要對齊。

JS裏的系統彈窗代碼

alert('內容')
confirm('肯定?)
prompt('請輸入您的姓名:')

變量

不少時候，當咱們重複使用某個元素或者某個數據時，內容可能太長或者數據要進行改變，這時就須要定義變量來代替他們。

語法：var + 變量名 或者 let + 變量名 (var 和 let 聲明的區別見後續章節)

Js中的註釋

單行註釋 //
多行註釋 /* */

獲取元素

特殊的標籤

document.body
document.head
document.title
複製代碼
複製代碼

通常標籤

document.getElementById()       // 匹配ID名稱…
ele.getElementsByTagName()      // 匹配標籤名是…的集合動態方法
document.getElementsByName()    // 匹配name是…的集合 動態方法
ele.getElementsByClassName()    // 匹配class名稱…的集合 動態方法
ele.querySelector()             // 匹配css選擇器的第一個
ele.querySelectorAll()          // 匹配css選擇器匹配的全部集合
複製代碼
複製代碼

獲取和修改元素HTML

元素HTML內容

// ele表明獲取的元素
ele.innerHTML             // 獲取元素HTML
ele.innerHTML = '字符串'  // 修改元素HTML
複製代碼
複製代碼

元素文本內容

// 標準
ele.textContent             // 獲取元素文本
ele.textContent = '字符串'  // 修改元素文本

// 非標準(ie低版本)
ele.innerText               // 獲取元素文本
ele.innerText = '字符串'    // 修改元素文本
複製代碼
複製代碼

第二章函數、自定義屬性、事件

變量與屬性的區別

//此爲變量
var a = 123;  

//此時object 爲節點對象（node）
var object = document.getElementById('box');

//爲object自定義了abc屬性，且此屬性的值888888
object.abc = 888888; 

// 對象.屬性名 能夠獲取屬性值
object.abc； //888888 
複製代碼
複製代碼

屬性分爲 : 節點屬性和 js屬性
節點屬性 : 元素自帶屬性
js屬性 : js中自定義的屬性

當js屬性爲合法節點屬性的時候，能夠修改節點屬性的值

//此時object 爲節點對象（node）
var object = document.getElementById('box')

// 修改節點對象object的id屬性, id屬性爲節點對象的合法屬性
var object.id = 'box';
複製代碼
複製代碼

函數

函數申明

有名函數

// 此時abc就表明此函數，函數不會自動運行，須要調用運行。
function abc(){
    console.log(我是有名字的函數)
}
複製代碼
複製代碼

帶名字的函數，需函數名加小括號運行，如abc();

匿名函數

function (){} 
複製代碼
複製代碼

匿名函數，不進行賦值會報錯

函數表達式

// 匿名函數
var a = function(){}
a() //此時用變量名加()來調用

//匿名函數
var b = function abc(){}
b() //此時用變量名加()來調用; 若是abc()調用會報錯
複製代碼
複製代碼

函數/對象方法

對象能夠自定義屬性
對象的屬性，若是賦值的是一個函數function(){}, 稱之爲對象的方法

// 此時object 爲節點對象（nodelist）
var object = document.getElementById('box'); 
// 爲object自定義了方法
object.abc = function(){}; 
複製代碼
複製代碼

事件屬性

事件 : 是當事人，在特定的時間在特定的地點發生了某事

js中的事件: 元素.事件屬性 = 事件函數

// 獲取當前符合條件的節點
var object = document.getElementById('box');
// 給當前節點添加一個點擊事件, 配合這對應的處理函數
object.onclick = function(){}
複製代碼
複製代碼

function () {}是一個固定的寫法，在這個例子中，它被稱之爲事件函數。

事件函數也可使用有名函數

var object = document.getElementById('box');
object.onclick =  fn;
function fn(){}
複製代碼
複製代碼

javascript中的事件 [ 鼠標事件, 鍵盤事件, 表單事件, 系統事件, 等等]

onclick —————— 點擊（單擊）事件
onmouseover ———– 鼠標滑入事件（會冒泡）
onmouseout—————鼠標離開事件（會冒泡）
onmouseenter————鼠標滑入事件（不會冒泡）
onmouseleave————鼠標離開事件（不會冒泡）
ondblclick ——————- 雙擊（單擊）事件
複製代碼
複製代碼

更多方法參考www.w3school.com.cn/tags/html_r…

函數中的this

事件函數裏面的this就是指觸發這個事件的元素

<script>
    box.onclick = function(){
       alert( this); //box,本函數是由box觸發的
    }
    function fn(){
        //this指向window,由於fn()屬於window
        // fn()實際上是window.fn();是window讓fn執行的
        alert( this );
    }
    fn();
</script>
複製代碼
複製代碼

更多關於this的介紹請看後續章節

第三章操做元素屬性 CSS樣式以及 []的使用

cssStyle 操做

style 對象
複合樣式改寫 background-color ------> backgroundColor
cssText
tyle.float的兼容 cssFloat /styleFloat

attribute 屬性節點

獲取： getAttribute(名稱)

優點:  用.和[]的形式沒法操做元素的自定義屬性 getAttribute能夠操做元素的自定義屬性
設置： el.setAttribute(名稱, 值)
包含： el.hasAttribute(名稱)
刪除： el.removeAttribute(名稱)
複製代碼
複製代碼

[]的運用

當咱們須要使用字符串表示屬性的時候，或者此時屬性會變化的時候

obj.style.width = '100px';
//可改成
obj.style['width'] = '100px'；
//亦可
var str = 'width'；
obj.style[str] = '100px'
複製代碼
複製代碼

第四章 javascript數據類型判斷條件語句

javascript數據類型

七大數據類型 Number String Boolean Null Object Undefined es6新增Symbol

number 數字

let num = 123
複製代碼
複製代碼

String 字符串

let str = '只會番茄炒蛋'
複製代碼
複製代碼

Boolean 布爾值

// true / false
let falg = true
複製代碼
複製代碼

Null 空

// 函數表達式
let abc = function(){}

// 函數聲明/定義
funticon abc () {}
複製代碼
複製代碼

Object 對象

// (節點對象、自定義對象、array(數組)、json、function、系統對象)
複製代碼
複製代碼

Undefined 未定義
Symbol

// Symbol是由ES6規範引入的一項新特性，它的功能相似於一種標識惟一性的ID。
複製代碼
複製代碼

判斷語句

判斷語句返回布爾值

==  // 判斷值
    >   // 大於
    <   // 小於
    <=  // 小於等於
    >=  // 大於等於
    !=  // 不等於
    === // 全等於 除了判斷值,還會判斷數據類型
    !== // 不全等
複製代碼
複製代碼

if 條件語句

if ( 條件 ) {
    code // 這是條件 知足時執行的代碼
}

// 若是（）括號裏面是true則運行{} 中代碼
if ( 條件 ) {
    code 1 // 這是條件知足時執行的代碼
} else {
    code 2 // 這是條件不知足時執行的代碼
}
// 若是（）括號裏面是false 則運行 else 大括號中的代碼, 總有一個會運行
if ( 條件一 ) {
    code 1 // 這是條件一知足時執行的代碼
} else if (條件二) {
    code 2 // 這是條件二知足時執行的代碼
} else {
    code 3  // 這是以上兩種條件都不知足時執行的代碼
}
複製代碼
複製代碼

if () 中的條件會強制轉化爲布爾值，爲false數據: false 0 '' null undefined NaN

三目運算

三目運算符的語法爲conditions ? statementA : statementB ;

let num = 5
num = 5 ? 6 : 5
// 上面這段話的意思就是 num 等於5的話 值就改成6 不等於5的話值改成5
複製代碼
複製代碼

switch case 條件語句

switch (data) {
    case 1:
        code1 // 執行代碼
        break // break 來阻止代碼自動地向下一個 case 運行。
    case 2:
        code2 //// 執行代碼
        break // break 來阻止代碼自動地向下一個 case 運行。
    default:
        與 case 1 和 case 2 不一樣時執行的代碼
}
複製代碼
複製代碼

break break 語句。它用於跳出 switch() 語句，來阻止代碼自動地向下一個 case 運行

default 關鍵詞來規定匹配不存在時作的事情

第五章 for循環 while後循環 do while前循環

for循環

for () {}循環

for (初始值; 判斷條件; 步幅) {
    code // 執行代碼
}

for (let i = 0; i < 5; i++) { // i初始值爲0；i是否小於5；每次循環後i加1
    console.log(i) // 0 1 2 3 4
}
複製代碼
複製代碼

continue 跳過本次循環

for (let i = 0; i < 5; i++) { // i初始值爲0；i是否小於5；每次循環後i加1
    if  (i === 3) {
        continue
    }
    // 由於在i爲3的時候跳過了這次循環，全部3沒有被打印出來
    console.log(i) // 0 1 2 4
}
複製代碼
複製代碼

break的運用

for (let i = 0; i < 5; i++) { // i初始值爲0；i是否小於5；每次循環後i加1
    if  (i === 3) {
          console.log(i) // 3
          break // 跳出停止循環, 提高性能
    }
}
複製代碼
複製代碼

變量自增/自減

i++ 和 i-- 先賦值後自增或者自減

let a = 10;
let b = a++ // 先把a的值賦值給b, 而後在自增1
console.log(b) // 20
console.log(a) // 21
複製代碼
複製代碼

++i 和 --i 先自增或者自減後賦值

let a = 10;
let b = ++a // a的值先自增1, 在賦值給b
console.log(b) // 21
console.log(a) // 21
複製代碼
複製代碼

while 後循環 do while前循環

while後循環

while (條件) {
    code // 這裏寫要執行的代碼，條件知足不斷執行
}
// 條件知足纔會執行code代碼
複製代碼
複製代碼

while前循環

do {
    code 1 // code 1會先執行一遍，而後在根據條件決定是否再執行code 1;
} while (條件) {
    code // 這裏寫要執行的代碼，條件知足不斷執行
}
複製代碼
複製代碼

第六章運算符類型轉換

算術運算

加—————[+]
減—————[-]
乘—————[*]
除—————[ / ]
取模/取餘—————[%]
複製代碼
複製代碼

隱式類型轉換

+ 在有字符串的時候,會進行字符串拼接
- * / % 會盡力把不是數字的轉化爲數字
複製代碼
複製代碼

NaN ———— not a number(不是一個數字)

不是數字的數字類型（number類型）
NaN和本身都不相等
isNaN( obj ) 判斷是否爲NaN,是返回true,否返回false;
複製代碼
複製代碼

顯示類型轉化

轉數字

Number() 能夠用於任何數據類型轉換成數值
parseInt()、parseFloat():專門用於把字符串轉換成數值都是忽略前導的空格

1) Number()
能把字符串轉化爲數字。
若是字符串是空的（不包含任何字符），則將其轉換爲0
若是帶非數字的字符串,返回NaN。
undefined,返回NaN。
true和false將分別轉換爲1和0。
null值，返回0。
var a = Number( '-100.02' );
console.log( a );       // -100.02
var a = Number( '100px' );
console.log( a );       // NaN
var a = Number( '' );
console.log( a );       // 0
var a = Number( undefined );
console.log( a );       // NaN
var a = Number( true );
console.log( a );       // 1
var a = Number( null );
console.log( a );       // 0

2) parseInt() （取整）取 非數字整前的數字 ，或小數點前的數字
3) parseFloat() 能取得小數，第二個小數點前的數字
複製代碼
複製代碼

轉字符串

String( obj );
obj.toString();
複製代碼
複製代碼

賦值運算

=  +=  -=  *=  /=  %=  ++  --
複製代碼
複製代碼

比較運算

<————–小於
> ————-大於
= = ————- 等於
<= ————-小於等於
>= ————- 大於等於
!= ————- 不等於
= = =————- 全等，除了值的判斷，還會進行unicode 編碼的對比
!==————-不全等
返回boolean值
複製代碼
複製代碼

邏輯運算

|| ———— 邏輯或
&& ———— 邏輯與

賦值操做
let c = a || b // 若是a爲true,則用a賦值, 如何a爲false,則用b賦值

let c = a && b // 若是a爲true,則經過，用 b 賦值,若是a爲false,用 a 賦值

布爾值操做
if (a || b) {
    //若是a爲true,則爲true
    //若是a爲false,則看b
}

if (a && b) {
    //若是a爲true,則經過，看b,b爲true則爲true
    //若是a爲false,則false
}

取反
if (!obj) {
    // 首先會把obj轉化爲布爾值，若是 obj是true,則!obj爲false
}
複製代碼
複製代碼

運算符優先級

JavaScript中的運算符優先級是一套規則。該規則在計算表達式時控制運算符執行的順序。具備較高優先級的運算符先於較低優先級的運算符執行。

下圖按從最高到最低的優先級列出JavaScript運算符。具備相同優先級的運算符按從左至右的順序求值

![img](data:image/svg+xml;utf8, )

第七章函數[自執行] [傳參] [return] getComputedStyle()

函數自執行

函數自執行方式,即建立當即調用一次

函數後面加用小括號,而後在用小括號包起來

(function(){}()) // 函數後面加用小括號,而後在用小括號包起來
複製代碼
複製代碼

函數用小括號包起來,而後後面加小括號

(function(){})() // 函數用小括號包起來,而後後面加小括號
複製代碼
複製代碼

函數後面加小括號,而後在函數前面加 + - ~ ！其中的一個符號

+function(){}()
-function(){}()
!function(){}()
~function(){}()
複製代碼
複製代碼

函數傳參

對應傳參

形參:即形式參數，是用來接收函數調用時傳遞過來的數據，命名與變量一致

實參:即真實參數，是給形參傳遞的具體數據，任何數據類型均可以稱爲實參

function fn(a, b) { // a,b爲形參，且a 爲 20，b爲10，一一對應
    console.log(a) // 20
    console.log(b) // 10
    console.log(a + b) // 30
}
fn(20, 10) // 20,10爲實參
複製代碼
複製代碼

不定參 arguments

不定參：實參個數不肯定 arguments: 是全部實參的集合，arguments是一個類數組，arguments.length 能夠返回實參個數

function fn() {
    console.log(arguments) // 返回一個包含實參的類數組
}
fn(20, 10, 5) // 20, 10, 5爲實參
複製代碼
複製代碼

關於什麼是類數組,請看之後的章節

函數中的return

函數中默認return的返回值爲undefined

function fn(a, b) {
    a + b
}
let a = fn(10, 20)
console.log(a) // undefined, 函數若是沒有指定返回值,默認返回undefined
複製代碼
複製代碼

自定義返回值

有時候咱們須要函數中返回咱們須要的值，這個時候return頗有用

function fn(a, b) {
    return a + b
}
let a = fn(10, 20)
console.log(a) // 30 
複製代碼
複製代碼

return 返回的數據類型能夠是任意類型

function fn(a, b) {
    a +b
    return function () {
        alert('ok')
    }
}
let a = fn(10, 20)
a() // 此時a就是返回的函數, a()打開了一個系統彈窗 
複製代碼
複製代碼

return 而後的代碼再也不執行，整個函數結束

function fn(a, b) {
    a +b
    return function () {
        alert('ok')
    }
    console.log('我不會被打印出來,由於上面有return')
}
fn()
複製代碼
複製代碼

getComputedStyle()

getComputedStyle(obj,null)[cssStyle]獲取計算後的樣式對象,只讀

<style>
    #elem-container{
    position: absolute;
    left:     100px;
    top:      200px;
    height:   100px;
    }
</style>
<div id="elem-container">dummy</div>
<script>
    let elem = document.getElementById("elem-container");
    let theCSSprop = window.getComputedStyle(elem,null)['left']
    console.log(theCSSprop) // 100px
</script>
複製代碼
複製代碼

不要獲取複合樣式:如background

不要獲取未設置的樣式: 谷歌是具體寬度, ie是auto

兼容：ie8及如下 obj.currentStyle[cssStyle]

if (window.getComputedStyle) {
    return getComputedStyle(obj)[attr]
} else {
    return obj.currentStyle[attr]
}
複製代碼
複製代碼

第八章做用域 js預解析閉包

做用域 腳本的有效範圍，做用範圍。分兩大類：全局(script)和局部（function ）

全局(script)域

直接定義在script標籤下的變量及函數，他們都做用在一個域，全局做用域，so..
<script>
    var a = 123;
    alert( window.a ); // 123
    function abc(){}
    alert( window.abc ); // function abc(){}
 </script>
複製代碼
複製代碼

直接定義在script標籤下的變量稱之爲全局變量,script標籤下的函數，稱之爲全局函數

全局變量及函數都是window的一個屬性,都能經過window.變量名訪問

局部（function ）域

任何一個function(){},都會開啓一個局部做用域

定義在function(){} 內部的變量稱之爲局部變量

做用域鏈：局部做用域內部能夠訪問父級做用域變量及全局做用域變量，也能夠訪問父級的函數，及全局函數 ( 往上爬)

let a = 10
function fn() {
    console.loa(a) // 10
}
複製代碼
複製代碼

局部變量會覆蓋父級（全局）變量，函數亦如此

let a = 10
function fn() {
    let a = 20
    console.loa(a) // 20
}
複製代碼
複製代碼

javascript解析

javascript解析即讀取代碼過程

javascript解析是致上而下
預解析:正式解析前的工做，預解析過程會出現變量提高，函數提高

function () {
    console.log(a) // undefined
    var a = 10
}
複製代碼
複製代碼

變量提高

在做用域內聲明的變量會被提高到做用域的頂部，且對其賦值undefined,這個過程稱之爲變量提高

上面的列子解析過程爲
function() {
    var a = undefined
    console.log(a) // undefined
    var a = 10
}
複製代碼
複製代碼

函數提高

在做用域內的函數定義函數會被提高到做用域的頂部，其值爲其函數自己,這個過程稱之爲函數提高

function () {
    console.log(fn) // function fn () {}
    function fn () {}
}
複製代碼
複製代碼

var和函數重名函數優先，留下函數，函數和函數重名後面定義的覆蓋前面的-後來居高

console.log(a) // function a() { console.log(a2) }
var a = 10
function a() {
    console.log(a1)
}
function a() {
    console.log(a2)
}
a() // 報錯
console.log(a) // 10
複製代碼
複製代碼

不會提高的函數：在做用域內的函數表達式函數不會被提高到做用域的頂部，so ~

function () {
    console.log(fn) // undefined
    var fn = function () {}
}
複製代碼
複製代碼

閉包

js垃圾回收機制

js 中的 變量 函數 再也不使用後，會被自動js垃圾回收機制回收
複製代碼
複製代碼

造成閉包條件

條件一： 函數內部嵌套函數
條件二： 內部函數引用外部函數的 變量 參數
使用 return 返回了 此內部函數,上面的 變量 和參數 不會被回收

例如:
function fn(x) {
    var a = 5;
    function bibao() {
        var b = a + x
        console.log(x) // 20
        console.log(a) // 5
        console.log(b) // 25
    }
    return bibao
}
var c = fn(20)
console.log(c()) // 20 5 25
複製代碼
複製代碼

第九章字符串方法和數組

String 字符串

String即文本（字符串），字符串方法都不改原字符串；

建立字符串的三種辦法: new String(), String(), 直接量，三種方式建立出來能夠建立

var str = new String('hello')

var str = String('hello')

var str = 'hello' // 直接量
複製代碼
複製代碼

string.length 屬性能夠返回字符串長度

string[index] 經過下標獲取字符串

String方法

str.concat( str,str...) 字符串拼接

用於把一個或多個字符串鏈接 到一塊，返回拼接好的字符串
複製代碼
複製代碼

str.indexOf(value,index )查找字符串，返回查找字符串首次出現的位置;

方法對大小寫敏感！
value 匹配字符
index 開始檢索的位置, 合法值是 0 到 string.length - 1,默認0
匹配失敗返回-1
複製代碼
複製代碼

str.charAt(index ) 返回指定索引的字符串

var str = 'hello'
console.log(str.charAt(3)) // l
複製代碼
複製代碼

str.charCodeAt(index )返回指定索引的ASCII編碼
str.substring(start,end ) 截取字符串，從start 開始，截止到end前，不包含end

若是沒有end則從num開始整個查找
若是 start 比 stop 大，那麼該方法在提取子串以前會先交換這兩個參數。str.substring(1,4)
複製代碼
複製代碼

str.slice(start,end ) 截取字符串，從start 開始，截止到end前，不包含end
str.toLocaleUpperCase()/ str.toLocaleLowerCase()

str.toLocaleUpperCase() 把字符串轉換爲大寫。
str.toLocaleLowerCase() 把字符串轉換爲小寫。
複製代碼
複製代碼

str.replace( value/RegExp,new ) 用一些字符替換另外一些字符,new能夠是字符串，也能夠是函數
str.split(value/RegExp,length-1) 方法用於把一個字符串分割成字符串數組, 返回分割後的數組
str.search( value/RegExp )返回檢索字符串首次出現的位置;未找到返回-1
str.match( value/RegExp )``查找指定的值，返回匹配的值。未找到返回null.正則能夠找一個或多個表達式

更多字符串方法請見developer.mozilla.org/zh-CN/

Array 數組

建立數組的三種辦法: new Array(), Array(), [] ，三種方式建立出來都是同樣的

var arr = new Array()

var arr = Array()

var arr = [] // 直接量
複製代碼
複製代碼

arr.length能夠訪問數組的長度
建立即指定數組長度Array( length )及 new Array( length ),length是數字的時候，建立的並非數組的項，而是數組的長度，項的內容爲undefined
[] 經過數組索引，訪問值

var arr = [1, 2, 3, 4, 5]
arr[0] // 1
複製代碼
複製代碼

修改數組指定索引下的值

var arr = [1, 2, 3, 4, 5]
arr[0] = 8888
console.log(arr) // [8888, 2, 3, 4, 5]
複製代碼
複製代碼

在數組後面添加項

var arr = [1, 2, 3, 4, 5]
arr.length = 8888
console.log(arr) // [1, 2, 3, 4, 5, 8888]
複製代碼
複製代碼

arr.indexOf( item ) 查找項
數組去重

利用for循環給數組去除重複項

var arr = [1,2,3,4,5,6,5,4,3,2,1];
var arr2 = []
for (let i = 0; i < arr.length; i++) {
    if (arr2.indexOf(arr[i] == -1)) {
        arr2.push(arr[i])
    }
}
console.log(arr2) // [1, 2, 3, 4, 5, 6]
複製代碼
複製代碼

Array() 數組方法

arr.unshift( item1,item1,…. ) 向數組的頭部添加一個或更多元素，並返回（新的長度）。
arr.push( item1,item1,…. ) 向數組的尾部添加一個或更多元素，並返回（新的長度）。
arr.shift( ) 刪除數組的第一個元素（返回刪除對象）;。
arr.pop( ) 刪除數組的最後一個元素（返回刪除對象）。
arr.splice(index,howmany,item1,…..,itemX) （刪除/添加）元素，而後（只返回刪除對象）。

index 必需。整數，規定添加/刪除項目的索引，可使用負數,若是是添加，原有元素會往高位移動。
howmany 必需。要刪除的項目數量。若是設置爲 0，則不會刪除項目。
item1, ..., itemX可選。向數組添加的新項目。
複製代碼
複製代碼

arr.sort() 排序

默認arr.sort() 以首字符編碼大小排序
數組length小於10以冒泡排序
冒泡排序下依次比較，
return > 0 調換位置，= 0不調換位置，< 0 不調換位置
數組length大於10以二分排序
複製代碼
複製代碼

arr.reverse() 反轉數組

以上方法不建立新的數組，而是直接修改原有的數組,同時索引會變化

如下方法會建立出一個新的數組, 而不是直接修改原數組

arr.concat() 數組拼接

該數組是經過把全部 arrX 參數添加到 arr 中生成的。
若是要進行 concat() 操做的參數是數組，那麼添加的是數組中的元素，而不是數組 ——不修改原數組
複製代碼
複製代碼

arr.slice() 截取

arr.slice(start,end)方法從已有的數組中返回選定的元素
複製代碼
複製代碼

arr.join() 拼接成字符串
Array.isArray( ) 判斷是否是數組

ECMAscript5 的遍歷數組方法

如下下方法都能實現遍歷，語法也都同樣，只是返回值不同—————————————不修改原數組
array.xxxx( function(currentValue,index,arr ), thisValue )
參數 描述
currentValue ———————必須。當前元素的值
index ——————————–可選。當期元素的索引值
arr————————————可選。當期元素屬於的數組對象
thisValue ————————–可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。
若是省略了 thisValue ，」this」 的值爲 「undefined」

function(currentValue, index,arr) 必須。函數，數組中的每一個元素都會執行這個函數
複製代碼
複製代碼

forEach()

arr.forEach() 從頭到尾遍歷數組 ——————————————————————————–無返回值
複製代碼
複製代碼

map() 返回值數組

arr.map() 返回一個數組，包含函數全部返回值—————————————————————-返回數組
var arr = [1, 2, 3, 4]
var newArr = arr.map(function(x){
    return x * x
})
console.log(newArr) // [1, 4, 9, 16]
複製代碼
複製代碼

filter() true數組

arr.filter() 返回值是一個 return 值爲true或能轉化爲true的值——————————————–返回數組
var arr = [1, 2, 3, 4]
var newArr = arr.filter(item => {
    return item > 3
})
console.log(newArr) // [4]
複製代碼
複製代碼

every()

arr.every() 針對全部元素，即都爲true 則返回true———————————————————————————–返回值
var  arr = [1,2,3,4];
var newArr = arr.every(item => {return item < 5}); 
console.log(newArr) // true, 由於數組的每一項都小於5

var newArr = arr.every(item => {return item < 3}); 
console.log(newArr) // false, 由於數組中的某一項不小於3
複製代碼
複製代碼

some()

arr.some() 是否存在 即有一個是true則爲true———————————————————————————–返回值
var  arr = [1,2,3,4];
var newArr = arr.some(item => {return item % 2 === 0});
console.log(newArr) // true, 由於有偶數存在
複製代碼
複製代碼

第十章對象(JSON ) for/in function[all apply bind]

JSON

建立對象（JSON）對象是Javascript的基本數據結構，對象是引用類型建立對象的三種方式對象直接量，new Oject(), Object.create({})[ ES5 ],create建立須要一個對象參數

// 對象都是一個key(鍵):value( 值 )一一對應

var obj = {} // 直接量
var obj = new Object()
var obj = Object.create()
複製代碼
複製代碼

訪問JSON的值

obj.attribute 和 obj[attribute]

var obj = {
    age: 20,
    name: '番茄炒蛋',
    sex: '男'
}
console.log(obj.age) // 20
console.log(obj[age]) // 20
複製代碼
複製代碼

修改JSON的屬性值

var obj = {
    name: '番茄炒蛋'
}
obj.name = '只會番茄炒蛋'
複製代碼
複製代碼

添加JSON屬性

var obj = {
    name: '番茄炒蛋'
}
obj.age = 20
複製代碼
複製代碼

刪除JSON屬性

var obj = {
    name: '番茄炒蛋',
    age: 20
}
delete obj.name 或者 delete obj[name]
複製代碼
複製代碼

JSON數字屬性

var obj = {
    name: '番茄炒蛋',
    age: 20
}
obj[1] = 'hello'
obj[2] = 'word'
複製代碼
複製代碼

in 判斷對象是否存在某個屬性

var obj = {
    name: '番茄炒蛋',
    age: 20
}
console.log('age' in obj) // true
複製代碼
複製代碼

for in遍歷json

for in 遍歷JSON

var obj = {
    name: '番茄炒蛋',
    age: 20
}
for (let attr in obj) { //attr 爲屬性，attr不是必須的，能夠爲任意變量名
    console.log(attr) // 屬性名 name age
    console.log(obj[attr]) // 對應的屬性值 '番茄炒蛋' 20
}
複製代碼
複製代碼

for in 也能夠遍歷數組

var arr = [1, 2, 3, 4]

for (let attr in arr) { //attr 爲屬性，attr不是必須的，能夠爲任意變量名
    console.log(attr) // 下標
    console.log(obj[attr]) // 對應下標的值 1 2 3 4
}
複製代碼
複製代碼

for循環不能遍歷JSON

JSON對象仿jQuery 鏈式操做 css html

function $ (option) {
    var t = typeOf option
    if (t == 'function') {
        window.onload = option
    } else if (t.toLowerCase() == 'string') {
        var ele = option.subString(1, option.length)
        el = document.getElementById(ele)
    }
    var obj = {
        css: function (attr, val) {
            el.style[attr] = val
            return obj;
        },
        html: function (val) {
            el.innerHTML = val
            return obj
        }
    }
    return obj
}
$('#box').css('backgroundColor','red').html('hello');
複製代碼
複製代碼

JSON.parse() 對象化 / JSON.stringify() 對象字符化

JSON.parse() JSON.parse(obj )方法解析一個JSON字符串，構造由字符串描述的JavaScript值或對象。能夠提供可選的reviver函數以在返回以前對所獲得的對象執行變換。

var obj = '{ "name": "只會番茄炒蛋", "age": 10, "sex": "男" }'

JSON.parse(obj)
// 解析後的值爲: 
obj = {
    name: "只會番茄炒蛋",
    age: 10,
    sex: "男"
}
複製代碼
複製代碼

JSON.stringify() JSON.stringify( obj )與JSON.parse()進行的是反操做

JSON.stringify({});                     // '{}'
JSON.stringify(true);                   // 'true'
JSON.stringify("foo");                  // '"foo"'
JSON.stringify([1, "false", false]);    // '[1,"false",false]'
JSON.stringify({ x: 5 });               // '{"x":5}'
JSON.stringify({x: 5, y: 6});           // "{"x":5,"y":6}"
複製代碼
複製代碼

Function call() applay() bind()方法

call()和apply都用於函數調用

function fn () {
    console.log(this)
}
fn() // window
fn.call('hello') // String {"hello"}
fn.call(123) // Number {123}
複製代碼
複製代碼

區別

call( thisvalue, val1，val2，….)

// thisvalue 是函數內部this的值
// 後面是參數列表
複製代碼
複製代碼

apply( thisvalue, [val1，val2，….])

// thisvalue 是函數內部this的值
// 後面是參數數組，全部參數放數組裏面
複製代碼
複製代碼

bind()都用於建立中

1) 適用於匿名函數
var fn = function (a, b) {
    console.log(this, a, b)
}.bind('hello', 1, 2)
fn() // String {"hello"} 1 2

2)有名函數,有些特殊
function fn() {
    console.log(this)
}
fn.bind('hello')() // String {"hello"}

3)自執行函數
(function fn() {
    console.log(this)
}.bind('hello')())  // String {"hello"}

(function fn() {
    console.log(this)
}.bind('hello'))() // String {"hello"}

(function fn() {
    console.log(this)
}).bind('hello')() // String {"hello"}
複製代碼
複製代碼

第十一章定時器 Math函數

定時器

setInterval()

setInterval(function(){}, 1000) 多用於動畫

第一個參數是一個函數

第二個參數是事件, 表示1秒(1000毫秒)後調用一次, 而後每一個1秒調用執行一次第一個函數裏面的內容

1) 通常使用
var a = 0;
setInterval(function () {
    a++;
    console.log(a) // 每隔一秒打印a 而且a在自增
}, 1000)

var a = 0;
function fn() {
    a++;
    console.log(a)
}
setInterval(fn, 1000)  // 和上面的寫法數據同樣

2)第一個參數fn 與 fn()的區別, fn()會不等延遲直接調用, 後面不在調用
var a = 0;
function fn() {
    a++;
    console.log(a)
}
setInterval(fn(), 1000)  // 1 打印1,而後就不在調用

3) 帶return值的fn
var a = 0;
function fn() {
    a++;
    console.log(a)
    return function(){console.log('ok')}
}
setInterval(fn(), 1000) // 1 打印1,而後就不在調用
複製代碼
複製代碼

clearInterval() 清除定時器

clearInterval(timerManger) 裏面的參數是定時管理器
var timer = setInterval(function(){}, 1000) // 設置變量timer爲定時管理器
clearInterval(timer) // 清除timer定時管理器
複製代碼
複製代碼

setTimeout() 一次定時器

setTimeout( function(){},1000 )

第一個參數是一個函數

第二參數是時間，表示1秒（1000毫秒）後調用一次，而後再也不調用

var a = 0;
setTimeout(function () {
    a++;
    console.log(a) // 1 只有一次打印
})
複製代碼
複製代碼

clearTimeout() 清除定時器

clearTimeout(timerManger) 裏面的參數是定時管理器
var timer = clearTimeout(function(){}, 1000) // 設置變量timer爲定時管理器
clearTimeout(timer) // 清除timer定時管理器
複製代碼
複製代碼

Math 數字函數

Math對象用於執行數學任務 Math對象無需new，直接調用Math方法就行

Math.random() 求隨機值左閉右開區間

// 隨機 0~1之間的數
var rand = Math.random()
console.log(rand) // 0~1之間的數

// 隨機 5~10之間的數
var rand =  Math.random() *(10-5) + 5; 
console.log(rand) // 5~10之間的數

// 封裝隨機x至y之間的數
function random(x, y) {
    var rand = x + Math.random() * (y - x)
    return rand
}
複製代碼
複製代碼

Math.round()————四捨五入

var num = 12.6
Math.round(num) // 13

var num = 12.3
Math.round(num) // 12
複製代碼
複製代碼

Math.ceil() ————向上取整 (上舍入)
Math.floor()————向下取整 (下舍入)
Math.abs()—————求絕對值
Math.pow(x,y)———–x的y次冪（x的y次方）
Math.sqrt(x) —————返回數的平方根
Math.max(x,y,z...)——-求x和y的最大值
Math.min(x,y,z...)——-求x和y的最小值

Math方法二

「度」的定義是，「兩條射線從圓心向圓周射出，造成一個夾角和夾角正對的一段弧。當這段弧長正好等於圓周長的360分之一時，兩條射線的夾角的大小爲1度。（如圖1）弧度的定義是：兩條射線從圓心向圓周射出，造成一個夾角和夾角正對的一段弧。當這段弧長正好等於圓的半徑時，兩條射線的夾角大小爲1弧度。

角所對的弧長是半徑的幾倍，那麼角的大小就是幾弧度。

它們的關係可用下式表示和計算：

( 弧度 )＝弧長 / 半徑

圓的周長是半徑的 2π倍，因此一個周角（360度）是 2π弧度。

度跟弧度之間的換算

據上所述，一個平角是 π 弧度。
即 180度＝π弧度
由此可知：
弧度＝π/180度 ( ≈0.017453弧度 )
複製代碼
複製代碼

Math.sin（弧度）正弦對邊比斜邊一個以弧度表示的角
Math.cos（弧度）餘弦鄰邊比斜邊是 -1.0 到 1.0 之間的數
Math.PI

Math.PI 即π 是圓的周長和它的直徑之比。這個值近似爲 3.141592653589793
一弧度 = π/180；將角度乘以（2PI/360） 0.017453293 便可轉換爲弧度
複製代碼
複製代碼

第十二章日期對象Date

日期

new Date() 本地時間

var d = new Date()
console.log(d) // Mon Sep 16 2019 15:48:31 GMT+0800 (中國標準時間)
複製代碼
複製代碼

toUTCString() 當前世界時

toUTCString() 根據世界時，把 Date 對象轉換爲字符串。

var d = new Date();
var utc =  d.toUTCString()
console.log(ytc) // "Mon, 16 Sep 2019 07:48:31 GMT"
複製代碼
複製代碼

獲取具體時間

getFullYear()       // 年
getMonth()          // 月( 0 ~ 11 )
getDate()           // 天( 1 ~ 31 )
getDay()            // 星期( 0 ~ 6 )
getHours()          // 時
getMinutes()        // 分
getSeconds()        // 秒
getMilliseconds()   // 毫秒
getTime()           // 返回 1970 年 1 月 1 日至今的毫秒數
複製代碼
複製代碼

日期格式化

var date = new Date()

date.toLocaleString() ——————–按照本地時間輸出
date.toLocaleDateString() —————本地時間年月日
date.toLocaleTimeString() ————–本地時間時分秒
date.toTimeString()————————本地時分秒時區
date.UTC() ————————————世界時返回 1970 年 1 月 1 日到指定日期的毫秒數

更多方法參考www.w3school.com.cn/tags/html_r…

### cookie，sessionStorage，localStorage

一、cookie，sessionStorage，localStorage是存放在客戶端，session對象數據是存放在服務器上實際上瀏覽器和服務器之間僅需傳遞session id便可，服務器根據session-id找到對應的用戶session對象 session存儲數據更安全一些，通常存放用戶信息，瀏覽器只適合存儲通常的數據二、cookie數據始終在同源的http請求中攜帶，在瀏覽器和服務器來回傳遞，裏面存放着session-id sessionStorage，localStorage僅在本地保存三、大小限制區別，cookie數據不超過4kb，localStorage在谷歌瀏覽中2.6MB 四、數據有效期不一樣，cookie在設置的（服務器設置）有效期內有效，無論窗口和瀏覽器關閉 sessionStorage僅在當前瀏覽器窗口關閉前有效，關閉即銷燬（臨時存儲） localStorage始終有效

SessionStorage和localStorage區別： 1.sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在用一個會話的頁面中才能被訪問（也就是說在第一次通訊過程當中）而且在會話結束後數據也隨之銷燬，不是一個持久的本地存儲，會話級別的儲存 2.localStorage用於持久化的本地存儲，除非主動刪除數據，不然不會過時

### token、cookie、session三者的理解？？？！！！

一、token就是令牌，好比你受權(登陸)一個程序時,他就是個依據,判斷你是否已經受權該軟件（最好的身份認證，安全性好，且是惟一的）
    用戶身份的驗證方式    

二、cookie是寫在客戶端一個txt文件，裏面包括登陸信息之類的，這樣你下次在登陸某個網站，就會自動調用cookie自動登陸用戶名
    服務器生成，發送到瀏覽器、瀏覽器保存，下次請求再次發送給服務器（存放着登陸信息）

三、session是一類用來客戶端和服務器之間保存狀態的解決方案，會話完成被銷燬（表明的就是服務器和客戶端的一次會話過程）
    cookie中存放着sessionID，請求會發送這個id。sesion由於request對象而產生。
複製代碼
複製代碼

### 基於Token的身份驗證：（最簡單的token: uid用戶惟一的身份識別 + time當前事件戳 + sign簽名）

一、用戶經過用戶名和密碼發送請求
  二、服務器端驗證
  三、服務器端返回一個帶簽名的token，給客戶端
  四、客戶端儲存token，而且每次用於發送請求
  五、服務器驗證token而且返回數據
  每一次請求都須要token
複製代碼
複製代碼

### cookie與session區別

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
  二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙考慮到安全應當使用session。
  三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能考慮到減輕服務器性能方面，應當使用COOKIE。
  四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。
複製代碼
複製代碼

### session與token區別

一、session認證只是把簡單的User的信息存儲Session裏面，sessionID不可預測，一種認證手段。只存在服務端，不能共享到其餘的網站和第三方App
  二、token是oAuth Token，提供的是認證和受權，認證針對用戶，受權是針對App，目的就是讓某APP有權訪問某用戶的的信息。Token是惟一的，
     token不能轉移到其餘的App，也不能轉到其餘用戶上。（適用於App）
  三、session的狀態是存在服務器端的，客戶端只存在session id， Token狀態是存儲在客戶端的
複製代碼
複製代碼

### Cookie的弊端有哪些？？？（優點：保存客戶端數據，分擔了服務器存儲的負擔）

一、數量和長度的限制。每一個特定的域名下最多生成20個cookie（chorme和safari沒有限制）
  二、安全性問題。
複製代碼

設計模式

1、觀察者模式：juejin.im/post/5a14e9… juejin.im/post/5af05d… 在軟件開發設計中是一個對象(subject)，維護一系列依賴他的對象（observer），當任何狀態發生改變自動通知他們。強依賴關係簡單理解：數據發生改變時，對應的處理函數就會自動執行。一個Subjet,用來維護Observers,爲某些event來通知（notify）觀察者

2、發佈-訂閱者有一個信息中介，過濾耦合性低它定義了一種一對多的關係，可使多個觀察者對象對一個主題對象進行監聽，當這個主題對象發生改變時，依賴的全部對象都會被通知到。

-二者的區別： 1.觀察者模式中，觀察者知道Subject ,二者是相關聯的，而發發布訂閱者只有經過信息代理進行通訊 2.在發佈訂閱模式中，組件式鬆散耦合的。正好和觀察者模式相反。 3.觀察者大部分是同步的，好比事件的觸發。Subject就會調用觀察者的方法。而發佈訂閱者大多數是異步的（） 4.觀察者模式須要在單個應用程序地址空間中實現，而發佈訂閱者更像交叉應用模式。

數據結構和算法

1、兩個棧實現一個隊列，兩個隊列實現一個棧 www.cnblogs.com/MrListening…

2、紅黑樹（解決二叉樹依次插入多個節點時的線型排列） juejin.im/post/5a27c6…

3、最小棧的實現（查找最小元素，用兩個棧配合棧內元素的下標）juejin.im/post/5a2ff8…

4、十大排序

1.冒泡排序：重複走訪過要排序的數列，一次比較兩個元素，若是他們的順序錯誤就把它們交換過來。
  實現過程：1.比較相鄰的元素。若是第一個比第二個大，就交換他們兩個
	    2.對每一對相鄰元素做一樣的工做，從開始第一對到結尾的最後一對，這樣在最後的元素應該會是最大的數
	    3.針對全部的元素重複以上的步驟，除了最後一個
	    4.重複步驟1-3，直到排序完成。
2.選擇排序：首先在未排序序列中找到最小值，放在排序序列的起始位置，而後，在從剩下未排序元素中繼續尋找最小值，而後放在與排序序列的末尾
  實現過程：

3.插入排序：構建有序序列，對於未排序數據，在已排序序列中衝後向前掃描，找到相應位置並插入
  實現過程：1.從第一個元素開始，該元素能夠認爲已經被排序
	    2.取出下一個元素，在已排序的元素序列中衝後向前掃描
	    3.若是該元素（以排序）大於新元素，將元素向後移一位
	    4.在取出一個元素，比較以前的，直到找到本身合適的位置

4.桶排序：將數據分佈到有限數量的桶裏，每一個桶在分別排序

1.快速排序：快速排序使用分治法把一個串（list）分爲兩個子串（sub-lists）.具體算法實現
  實現過程：1.從數組中挑出一個元素，成爲一個基準
	    2.從新排列數組，全部元素比基準小的擺在基準前面，全部元素比基準大的擺在基準後面（相同的能夠擺在一邊）
		這個分區退出以後，該基準就處於數列的中間位置。成爲分區操做。
	    3.遞歸的把小於基準值的子數列和大於基準值元素的子數列排序
算法實現： function quickSort (arr) {
		if （arr.length <= 1） {return arr}
		var destIndex = Math.floor(arr.length/2)
		var left = [], right = [];
		var dest = arr.splice(destIndex,1)[0];
		for (var i =0;i<arr.length;i++){
			if (arr[i]<dest) {
			left.push(arr[i])
			} else {
			right.push(arr[i]) }
		return quickSort(left).concat([dest],quickSort(right)
			

2.堆排序：利用對這種數據結構所涉及的一種排序算法，堆積是一個近乎徹底二叉樹的結構，並同時知足堆積的性質：即子節點的鍵值或索引老是小於（或大於）它的父節點。
  實現過程：1.
複製代碼
複製代碼

5、數組去重 juejin.im/post/5aed61…

1.雙重循環
2.indexOf
3.數組排序去重 最快你Olong
複製代碼
複製代碼

6、字符串

判斷迴文字符串：（遞歸的思想）
	1.字符串分隔，倒轉，聚合[...obj].reverse().join('')
	2.字符串頭部和尾部，逐次向中間檢測 
		實現：function isPalindrome(line) {
			line += '';
			for (var i=0,j=line.length-1;i<j;i++,j--) {
				if (line.chartAt(i) !== line.chartAt(j) {
				return false
			}
			
	3.遞歸
複製代碼
複製代碼

7、二分查找（有序數組的查找）

二分查找能夠解決已排序數組的查找問題，即只要數組中包含T(要查找的值)，那麼經過不斷的縮小包含T的數據範圍，就能夠最終要找到的數
 (1) 一開始,數據範圍覆蓋整個數組。
 (2) 將數組的中間項與T進行比較，若是T比數組的中間項小，則到數組的前半部分繼續查找，反之，則到數組的後半部分繼續查找。
 (3) 就這樣，每次查找均可以排除一半元素，至關於範圍縮小一半。這樣反覆比較，反覆縮小範圍，最終會在數組中找到T
代碼實現：function binarySearch (data, dest, start, end){
		var end = end || data.length-1;
		var start = start || 0;
		var m = Math.floor((start+end)/2);
		if (dest<data[m]){
			return binarySearch(data, dest, 0, m-1)
		} else {
			return binarySearch(data, dest, m+1, end)
		}}
		return false
複製代碼

重寫源碼

juejin.im/post/5d6e04… 看下這篇就夠了

結語

感謝您的觀看，若有不足之處，歡迎批評指正。

還沒有完結還會持續跟新

相關標籤/搜索

每日一句

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