直接量和變量
直接量:數值 布爾 字符串 null undefined 對象和函數
對象是存儲數據的一個容器，函數就是應用程序處理某一個系列邏輯的過程設計
null 表示也有值
undefined 表示變量未定義
變量：就是指向了某個直接量或者其他變量的‘鑰匙’；
對象數據類型：
js中的數據可以分為兩類，原生數據類型和對象數據類型。所謂對象數據類型，是一種復合型的數據類型，它可以把多個數據放在一起。原生數據類型，比如數值型 浮點型 布爾型等都只能存放一些直接量，也就是說單一的數據
對象：
var container={}；
創建對象最常用的方式，創建對象以后，就相當於開辟了一塊內存，對象中數據是以鍵值對的形式存在，稱為對象的屬性，鍵和值之間使用:隔開，多個數據之間使用,隔開，鍵就是屬性名稱，值就是屬性值。
對象訪問其中的屬性使用.，訪問一個不存在的屬性，結果是undefined（不存在的屬性，因此它是未定義的）
對象的取值：
對象不僅可以用點號（.）訪問它的一個屬性，也可以用中括號（[]）。如果用中括號，里面就允許再寫一個變量。當然了，寫字符串也是可以的。
如果事先屬性的名稱未知，或者調用的屬性是動態變化的，就不能使用點號了，使用中括號可以最大程度地提升對象調用屬性的靈活度。
for循環和while循環
for(var i=0; i<10;i++){}
var i=0;的意思是定義了一個變量i，第二句是i<10,表示進入循環體的條件。（{}）循環體中的代碼是需要被多次執行的。第三句：i++是要在循環體執行完之后才會被執行。
for(語句1,；語句2；語句3){被執行的代碼塊}
語句1 在循環開始前執行
語句2 定義運行循環的條件
語句3 在循環已被執行之后執行
while(條件){需要執行的代碼}
對象內容的遍歷 for in
js運算符
= 賦值運算符
+ - * /加減乘除運算符
++ -- 自增 自減運算符
% 取余運算符
var a = 1; //定義變量a的值是1,
var b; //變量b未賦值，undefined
var sum = (b = a+++--a) + a-- + b++;
先執行（b=a+++--a）,結果b=2; a++ a先參與運算再自增1,第一步得到1，1+--a ,執行--a,這時a=2；--a自減1再運算--a的結果為1 b=1+1
a-- ,此時a=1; 先運算 1+；b++ 此時b=2，b++ 先運算
sum==(b=1+1)+1+b 結果是5 ，此時a=0; b=3
數組：
數組是一個非常靈活的類型。就是一個容器，可以存放一個或者多個對象。
數組有4中定義方式；
1 直接量定義數組
var arr=[1,2,3,4];
2 構造函數的方式
var arr=new Array();//創建一個長度為0的空數組
在js中，每個類型其實都是一個函數作為支撐，Array也叫作構造函數。與第二種方法也是采用構造函數創建一個數組對象。
3 var b=new Array(8); //創建一個長度為8的數組，為8個空元素，但是依然占據內存空間
4 var c=new Array('first','second','third');//創建一個長度為3的數組，並賦與初始值
數組只有個屬性，length。表示數組所占內存空間的數目，而不僅僅是數組中元素的個數。
數組的方法：
push 可以把一個元素添加到數組里面
pop splice 刪除數組元素
pop 刪除數組尾部的元素，先進入的元素后刪除，后進入的元素先刪除
splice 插入 刪除 或者替換數組元素，它不僅會在原有的數組上進行修改，還會返回被處理的內容，
splice(開始位置，刪除元素的個數，插入部分)
join 把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分割的，join(分隔符)
函數
函數定義
需要使用關鍵字 function
function a(){}
var a=function(){} 變量名就是函數名
js代碼在運行之前會經過一個編譯過程，分為3個步驟。
分詞 js代碼其實激素hi由一句句話組成的，分詞的目的是把這些代碼分解為一個個有意義的代碼塊；
解析 由js編譯器對剛才分詞得到的一個個代碼塊進行解析，生成一棵抽象的語法樹。js代碼是沒有辦法直接運行的，要運行js代碼，就需要通過js編譯器對其進行編譯，只有編譯之后的代碼才可以被識別，然后通過js引擎執行代碼邏輯。由於js這門編程語言的特殊性，其編譯的過程一般就在代碼執行前的幾微妙甚至更短的時間之內。所以直觀看，編譯和運行是同時發生的，或者說我們根本感覺不到編譯的存在。
抽象語法樹定義了代碼本身，通過操作這棵樹可以精准地定位到賦值語句、聲明語句和運算語句。
作用域
js中只有函數作用域和全局作用域
參數傳遞
任何一個變量在被賦予真正的值之前，其在編譯階段都是undefined。函數的參數可以被理解為一種預備變量，可以這樣說，任何變量在被賦予真正的值之前，其在比編譯階段都是undefined。
arguments
閉包
function test(){
var a=100;
return function(){
console.log(a)
}
}
產生閉包的條件，
1 在函數內部也有一個函數， 返回的匿名函數
2 函數內部的函數用到了外部函數的局部變量。匿名函數使用到了外部函數定義的局部變量a
3 外部函數把內部函數作為返回值reutrn出去 匿名函數被reuturn 出去
好處：
正常情況下，我們調用一個函數，其里面的局部變量會在函數調用結束后銷毀，這也是我們在全局作用域中無法訪問函數局部變量的原因。但是，如果你使用了閉包，那么就會讓這個局部變量不隨着原函數的銷毀而銷毀，而是繼續存在。閉包里面可以訪問外部函數中局部變量，這種變量銷毀，需要手動賦值null，js會走動掃描函數中值為null的變量，一旦找到就會自動清除這些無用的變量。
自執行函數
很多時候，我們只想執行一個函數，卻無所謂這個函數叫什么名字。那么在這種情況下，就可以考慮使用自執行函數了。
語法：
(定義一個沒有名字的函數)();
(
function(){
console.log(123);
}
)();
自執行函數經常和函數閉包一起使用
上面的例子可以改寫成：
function test(){
var a=1;
return (function(){
console.log(a);
})();
}
new 一個函數
this永遠指向當前函數的調用者，this一旦出現就一定出現在函數中，this指向函數的調用者，這個函數是誰調用的，那么this就是誰
js中分為全局作用域和函數作用域，在全局作用域中頂底的任何東西，不管是一個變量還是一個函數，其實都是window對象的。
如果調用函數的時候使用了new關鍵字，在函數內部就會產生一個新的對象，也就是函數的真實調用者，this關鍵字指向的那個對象，然后函數默認返回了這個新的對象。這種函數叫做構造函數，通過這種方式，我可以通過構造函數構建一個對象模板。
function test(){console.log(this)}
var newObject=new test();
newObject就是函數里面的this
對象模板就是指用一個函數的形式設計一種對象的種類。
因為函數在適用new 關鍵字以后會從內部新產生一個對象出來，而this就指向了這個對象。
回調函數
回調函數就是指把一個函數的定義當作參數傳遞給另一個函數。
函數作為參數
精度
0.1+0.2=0.30000004
精度丟失問題 不僅是加減法 小數乘除法的計算依然會有精度丟失的問題
解決辦法：化浮為整
小數的計算會丟失精度，整數的計算沒有這個問題，可以先把小數化為整數進行計算，再除以一個共同的倍數
//js小數的加減乘除都有精度丟失的問題，整數沒有你這樣得問題
function add(num1,num2){ num1=num1.toString();num2=num2.toString();//轉為字符串 let ws1=0,ws2=0;//獲取小數點位數 ws1=num1.split('.')[1]?.length||0; ws2=num2.split('.')[1]?.length||0; num1=parseInt(num1.replace('.',''));//去掉小數點,不用數值乘以兩個數的位數差值的10的冪的原因是：小數的乘法也要精度丟失的問題 num2=parseInt(num2.replace('.','')); let beishu=Math.pow(10,Math.abs(ws1-ws2)); let maxWs=ws1>ws2?ws1:ws2;//小數點位數最大值 //Math.abs(ws1-ws2)，獲取兩個數值的位數差值， //beishu就是較小數值補齊位數需要相乘的數Math.pow(a,b)得到a的b次冪 //比較小的數，補齊位數 num1>num2?(num2=num2*beishu):(num1=num1*beishu) return (num1+num2)/Math.pow(10,maxWs) }
函數的三大要義
第一 理解返回值 參數列表 和函數體
第二 業務邏輯
第三 函數的調用
HTML超文本標記語言，功能比普通的文本更加強大，是使用一組標簽對內容進行描述的語言，它不是編程語言，而是一種解釋性語言，它沒有邏輯順序，只有結構。
jQuery選擇器，css選擇器
vue
處理事件冒泡
.stop 阻止事件冒泡
.prevent 阻止提交，form表單組件和a鏈接組件都會導致頁面刷新和跳轉。如果不希望頁面刷新，則可以加上.prevent以阻止這種默認的刷新操作。 .prevnet 只對form和a標簽有效。
.capture 作用是優先觸發，就是優先級的調整。
.self 當僅單擊元素本身時，只允許元素自己觸發，子元素無法觸發。
.once 只觸發一次
this指向函數的調用者
setTimeout(function(){console.log(this);},20000); this出現在函數中，this指向函數的調用者，setTimeout函數是一個延時函數，屬於window對象，所以this指向的是window。
在實際的代碼編寫過程中，每當遇到這種回調函數的情況，一定要特別小心，重點要看當前這個函數是不是Vue對象自己的函數，函數都放在methods里面的，其中也並沒有一個叫做setTimeout的函數，setTImeout函數式一個延時函數，屬於window對象。所以上面的代碼相當於這樣 window.setTimeout(function(){console.log(this);},20000);
在setTimeout中處理vue的data數據，可以在函數外面定義 let that=this;將Vue對象存起來，然后在回調函數里面調用即可；
組件component
組件的名字駝峰式的命名法，在調用組件的時候需要格外注意，每次要換成大寫字母的地方都需要額外添加一個半字線（-），然后大寫字母轉變成小寫字母
監聽 watch
計算屬性 computed
過濾器 filters
{{today | dateFormat}}
過濾器可以疊加使用，比如添加樣式，需要使用v-html，vue 2.0開始不再支持v-html中使用過濾器了，解決辦法是把過濾器當成一個普通方法進行調用。在定義的Vue對象中，所有過濾器都會被掛載在$options.filters對象上，所以我們可以直接這樣寫：
v-html="$options.filters.dateFilter(today)"//v-html="today|dateFilter|boxStyle"不支持這種寫法
node
node就是讓js也可以編寫服務器的代碼
npm 模塊管理，模塊的下載和發布
package.json
name:模塊的名字
version：版本號
description：模塊的描述
main：代表模塊的啟動文件，一些復雜的模塊可能會使用到一些其他資源，但是模塊的啟動文件，或者說入口只能有一個。
npm允許再package.json文件里面使用scripts字段定義腳本命令。
scripts:{
'test':"echo 'this is a test'"
}
test是命令，npm run test ;echo表示在屏幕上輸入一段文字。
npm 所有的穆凱都發布在http://www.npmjs.com上面，
在發布代碼之前，需要在npm.js上注冊一個賬號，才有權限發布自定義的模塊；
模塊發布
npm adduser 添加用戶
npm publish 發布模塊
npm 安裝模塊
npm install 模塊名
運行結果：
自定生成一個package-lock.json,在node——modules中就可以看到我們的模塊了。
npm 一般運行速度比較慢，事假發開中應使用國內的服務器地址，使用cnpm
使用vue-cli搭建項目
vue-cli就是進行vue組件化開發的一個腳手架。可以理解為了一項目模板
安裝vue-cli
npm install -g @vue/cli@3.0.1
-g 全局安裝，安裝之后，在任何地方都可以使用Vuecli腳手架了
還需要安裝一個原型工具
cnpm i -g @vue/cli-service-global@3.0.1
版本號一定要一致，不然會出現一些莫名其妙的錯誤。
vue-cli創建的項目默認支持ES6的語法
es6: let 實現塊級作用域，內部變量不會影響全局
const 定義常量 提升了js的安全性
變量的解耦賦值
作用是把獲取對象中方法以及賦值給對應變量的過程一次性做完。
let {name='張三',age,sxe}=Person;
字符串升級
es6
1 允許字符串直接通過for循環的方式遍歷
for(let s of str) 這里用到的是of不是in，如果是in，則獲取的是每個字符對應的下標。
2 允許反引號進行一些簡化的字符串定義，模板字符串 `你好，${name}`,這一改進支持了換行和變量注入。
3 字符串補全
例如：依次打印0~99，但是不足2位的數字需要用0左補齊，
for(let i=0; i<100;i++){console.log(i.toString().padStart(2,'0'))}
padStart:返回新的字符串，表示用參數字符串從頭部（左側）補全原字符串
padEnd：返回新的字符串，表示用參數字符串從尾部（右側）補全原字符串
第一個參數：生成字符串的最小長度，第二個參數：用來補全字符串，默認是空格；
字符串允許被當做數組一樣使用，你可以用下標的方式獲取字符串中某個位置的字符。
Proxy 代理
在支持Proxy的瀏覽器環境中，Proxy(target,handler)是一個全局對象，它可以被直接使用。Proxy是一個構造函數，target是被代理的對象，handler是聲明了各類代理操作的對象，最終返回一個代理對象。外界每次通過代理對象訪問taregt對象的屬性時，就會經過handler對象，從這個流程來看，代理獨享很類似middleware（中間件）。那么Proxy可以攔截什么操作呢？最常見的即使get set 對象屬性等操作。
Proxy的作用就是允許我們聲明一個代理，對某個對象進行一些特殊的訪問攔截。一個Proxy對象由兩個部分組成：target handler。在通過Proxy構造函數生成實例對象時，需要提供者兩個參數。target即目標對象，handler是一個對象，聲明了代理target的指定行為。
強化后的數組
快速構建新數組
Array.of將參數中的所有制最為元素而形成數組
Array.from 可以將類數組或可迭代對象轉化為數組，類數組對象就是一種可以遍歷的對象，只要對象由length屬性，就可以被稱為類數組，可以接收第二個參數，就是一個map的回調函數，用於對每個元素進行處理，放入數組的就是處理后的元素。
find
findIndex
fill 將一定范圍索引的數組元素內容填充為單個指定的值
copyWithin 將一定范圍索引的數組元素修改為此數組另一指定范圍索引的元素
entries
keys
values
數組復制
...
強化后的函數
箭頭函數 允許省略function關鍵字，直接用一個箭頭聲明一個函數
箭頭函數中的this對象是定義函數時的對象，而不是使用函數時的對象。一個小竅門：只要使用了箭頭函數，就不管這個函數本身了，在外面尋找最近的大括號，然后看這個大括號處在怎么樣的環境中，this就指向它。
let Person={
name:'zahngsan',
getName:()=>{
return this.name
},
getName1:function(){return this.name},
sayHi:function(){
setTimeout(()=>{console.log(this.name)},3000);
},
sayHi1:function(){
setTimeout(function(){console.log(this.name)},3000);
},
sayHi2:()=>{
setTimeout(function(){console.log(this.name)},3000);
},
sayHi3:()=>{
setTimeout(()=>{console.log(this.name)},3000);
}
};
Person.sayHi()//箭頭函數，找最近的大括號，就是sayHi,this就是Person對象
Person.sayHi1()//不是箭頭函數，setTImeout是window的方法，this就是window
Person.sayHi2()//不是箭頭函數，setTImeout是window的方法，this就是window
Person.sayHi3()//箭頭函數，找最近的大括號，就是sayHi,sayHi也是箭頭函數，繼續找最近的大括號，就是window，this就是Window對象
更加靈活多變的對象
let name='zhangsan'; let obj={name:name};可以簡寫：let obj={name};//左右兩邊的名字一樣
屬性名稱是一個變量：
let key='name'; let obj={[key]:'zhangsan'};
promise對象和async函數
promise(resolve,reject) 處理異步操作，then catch
async函數和await關鍵字(ES7)
async fun1(){//只有加上了async關鍵字的函數，內部才可以使用await關鍵字
let data=await getJosn();//getJson是一個Promise對象
}