【vue 入坑指南 四 】 ES6常用命令
阿新 • • 發佈:2018-12-15
ES6常用命令
1.變數作用域
使用 var 宣告的變數會自動進行變數提升 到js檔案/函式的最前面進行定義,有記憶體洩漏,不能及時的清除變數,一般用來定義能夠變數提升的普通變數,在函式內部有效
使用 let 宣告的變數只是在當前模組有效,並且不進行變數提升,能夠及時清除變數,無記憶體洩漏,一般用來定義一個普通變數,在塊中有效
使用 const 宣告的常量只是在當前模組有效,不進行變數提升,一般只用來宣告一個固定的常量,在塊中有效
{ let a = 1; var b = 2; } console.log(a); //報錯,未定義 console.log(b); //輸出2
2.模板語言
字串拼接與Dom節點的拼接
` `
//引入變數
`name = ${name} `;
3.預設引數
//給形參設定預設值,如果呼叫的時候沒傳形參 就使用預設值進行計算
function sum(num1 = 0,num2 = 0){
return num1+num2;
}
4.箭頭函式
減少程式碼量 提升程式可讀性 this指向為根物件
//es5 寫法 將陣列的值遍歷+2 var arr = [2,5,6]; var newarr = arr.map(function(item){ return item+2; }) //es6 寫法 var newarr1 = arr.map((item)=>{item+2});
5.陣列解構
//陣列解構 var [a,b,c] = [3,8,10]; //a=3 b=8 c=10 //字串解構 var [x,y,z] = "Vue"; //x="V" y="u" z="e" //物件解構 對key進行拆分 鍵和值保持一致 var {m,n} = {m:10,n:20}; //{m:m,n:n} console.log(`m:${m},n:${n}`); //m:10,n:20 var {n,m} = {m:10,n:20}; console.log(`m:${m},n:${n}`); //m:10,n:20 //函式解構 function sum([x,y]){ return x+y; } var total = sum([2,8]); console.log(total); //10