1. 程式人生 > >【vue 入坑指南 四 】 ES6常用命令

【vue 入坑指南 四 】 ES6常用命令

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