前言
文章涉及的內容可能不全面，但量很多，需要慢慢看。我花了很長的時間整理，用心分享心得，希望對大家有所幫助。但是難免會有打字的錯誤或理解的錯誤點，希望發現的可以郵箱告訴我ghui_master@163.com，我會及時的進行修改，只希望對你有所幫助，謝謝。
本片文章記錄一下當時自己學習JavaScript的過程以及一些知識點和注意事項,從基礎到中高階的內容都有,會以章節的形式慢慢展示出來
一、CSS問題
一、flex彈性佈局，
可以簡單的使一個元素居中（包括水平和垂直居中） 柵格式系統佈局，bootstrap grid
二、聖盃和雙飛翼佈局 三欄是佈局（兩邊兩欄寬度固定，中間欄寬度自適應）
方案一：position（絕對定位法） center的div需要放在最後面 絕對定位法原理將左右兩邊使用absolute定位，因為絕對定位使其脫離文件流，後面的center會自然流動到他們的上賣弄，然後margin屬性，留出左右兩邊的寬度。就可以自適應了。
方案二：float 自身浮動法 center的div需要放到後面 自身浮動法的原理就是對左右使用float:left和float：right，float使左右兩個元素脫離文件流，中間的正常文件流中，使用margin指定左右外邊距對其進行一個定位。
聖盃佈局：原理就是margin負值法。使用聖盃佈局首先需要在center元素外部包含一個div,包含的div需要設定float屬性使其形成一個BFC，並且這個寬度和margin的負值進行匹配
三、左邊定寬，右邊自適應
方案一：左邊設定浮動，右邊寬度設定100% .left{float:left} .right:{width:100%}
方案二：左設定浮動，右用cacl去補寬度計算 .left{float:left} .right:{width:cacl(100vw-200px}
方案三：父容器設定display：flex right部分是設定flex：1
方案四：右邊div套個包裹、並前置、左及包裹 雙浮動
四、水平居中
行內元素居中（父元素text-align:center）
塊狀元素居中（塊狀元素沒發用text-align）
- 1. 寬度一定：margin:auto
- 2.寬度不定：塊級變行內，然後在父上text-aligin
float
複製程式碼五、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運算子。具有相同優先順序的運算子按從左至右的順序求值
第七章 函式[自執行] [傳參] [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
1、cookie，sessionStorage，localStorage是存放在客戶端，session物件資料是存放在伺服器上 實際上瀏覽器和伺服器之間僅需傳遞session id即可，伺服器根據session-id找到對應的使用者session物件 session儲存資料更安全一些，一般存放使用者資訊，瀏覽器只適合儲存一般的資料 2、cookie資料始終在同源的http請求中攜帶，在瀏覽器和伺服器來回傳遞，裡面存放著session-id sessionStorage，localStorage僅在本地儲存 3、大小限制區別，cookie資料不超過4kb，localStorage在谷歌瀏覽中2.6MB 4、資料有效期不同，cookie在設定的（伺服器設定）有效期內有效，不管視窗和瀏覽器關閉 sessionStorage僅在當前瀏覽器視窗關閉前有效，關閉即銷燬（臨時儲存） localStorage始終有效
SessionStorage和localStorage區別： 1.sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在用一個會話的頁面中才能被訪問（也就是說在第一次通訊過程中） 並且在會話結束後資料也隨之銷燬，不是一個持久的本地儲存，會話級別的儲存 2.localStorage用於持久化的本地儲存，除非主動刪除資料，否則不會過期
### token、cookie、session三者的理解？？？！！！
1、token就是令牌，比如你授權(登入)一個程式時,他就是個依據,判斷你是否已經授權該軟體（最好的身份認證，安全性好，且是唯一的）
使用者身份的驗證方式
2、cookie是寫在客戶端一個txt檔案，裡面包括登入資訊之類的，這樣你下次在登入某個網站，就會自動呼叫cookie自動登入使用者名稱
伺服器生成，傳送到瀏覽器、瀏覽器儲存，下次請求再次傳送給伺服器（存放著登入資訊）
3、session是一類用來客戶端和伺服器之間儲存狀態的解決方案，會話完成被銷燬（代表的就是伺服器和客戶端的一次會話過程）
cookie中存放著sessionID，請求會傳送這個id。sesion因為request物件而產生。
複製程式碼
複製程式碼### 基於Token的身份驗證：（最簡單的token: uid使用者唯一的身份識別 + time當前事件戳 + sign簽名）
1、使用者通過使用者名稱和密碼傳送請求
2、伺服器端驗證
3、伺服器端返回一個帶簽名的token，給客戶端
4、客戶端儲存token，並且每次用於傳送請求
5、伺服器驗證token並且返回資料
每一次請求都需要token
複製程式碼
複製程式碼### cookie與session區別
1、cookie資料存放在客戶的瀏覽器上，session資料放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙考慮到安全應當使用session。
3、session會在一定時間內儲存在伺服器上。當訪問增多，會比較佔用你伺服器的效能考慮到減輕伺服器效能方面，應當使用COOKIE。
4、單個cookie儲存的資料不能超過4K，很多瀏覽器都限制一個站點最多儲存20個cookie。
複製程式碼
複製程式碼### session與token區別
1、session認證只是把簡單的User的資訊儲存Session裡面，sessionID不可預測，一種認證手段。只存在服務端，不能共享到其他的網站和第三方App
2、token是oAuth Token，提供的是認證和授權，認證針對使用者，授權是針對App，目的就是讓某APP有權訪問某使用者的的資訊。Token是唯一的，
token不能轉移到其他的App，也不能轉到其他使用者上。（適用於App）
3、session的狀態是存在伺服器端的，客戶端只存在session id， Token狀態是儲存在客戶端的
複製程式碼
複製程式碼### Cookie的弊端有哪些？？？（優勢：儲存客戶端資料，分擔了伺服器儲存的負擔）
1、數量和長度的限制。每個特定的域名下最多生成20個cookie（chorme和safari沒有限制）
2、安全性問題。
複製程式碼設計模式
一、觀察者模式：juejin.im/post/5a14e9… juejin.im/post/5af05d… 在軟體開發設計中是一個物件(subject)，維護一系列依賴他的物件（observer），當任何狀態發生改變自動通知他們。強依賴關係 簡單理解：資料發生改變時，對應的處理函式就會自動執行。一個Subjet,用來維護Observers,為某些event來通知（notify）觀察者
二、釋出-訂閱者 有一個資訊中介，過濾 耦合性低 它定義了一種一對多的關係，可以使多個觀察者物件對一個主題物件進行監聽，當這個主題物件發生改變時，依賴的所有物件都會被通知到。
- -兩者的區別： 1.觀察者模式中，觀察者知道Subject ,兩者是相關聯的，而發發布訂閱者只有通過資訊代理進行通訊 2.在釋出訂閱模式中，元件式鬆散耦合的。正好和觀察者模式相反。 3.觀察者大部分是同步的，比如事件的觸發。Subject就會呼叫觀察者的方法。而釋出訂閱者大多數是非同步的（） 4.觀察者模式需要在單個應用程式地址空間中實現，而釋出訂閱者更像交叉應用模式。
資料結構和演算法
一、兩個棧實現一個佇列，兩個佇列實現一個棧 www.cnblogs.com/MrListening…
二、紅黑樹（解決二叉樹依次插入多個節點時的線型排列） juejin.im/post/5a27c6…
三、最小棧的實現（查詢最小元素，用兩個棧配合棧內元素的下標）juejin.im/post/5a2ff8…
四、十大排序
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.
複製程式碼
複製程式碼五、陣列去重 juejin.im/post/5aed61…
1.雙重迴圈
2.indexOf
3.陣列排序去重 最快你Olong
複製程式碼
複製程式碼六、字串
判斷迴文字串：（遞迴的思想）
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.遞迴
複製程式碼
複製程式碼七、二分查詢（有序陣列的查詢）
二分查詢可以解決已排序陣列的查詢問題，即只要陣列中包含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… 看下這篇就夠了
結語
感謝您的觀看，如有不足之處，歡迎批評指正。