# ES6學習筆記（四）：教你理解ES6的新增語法

let

ES6新增的用於聲明變量的關鍵字

• let聲明的變量只在所處於的塊級有效
• 不存在變量提高 
• 暫時性死區

// 使用let聲明的變量具備塊級做用域
if(true) {
    let a = 10
  console.log(a) // 10
  if(true) {
   let c= 30
  }
  console.log(c) // c is not defined
}
console.log(a) // a is not defined

注意： 使用let 關鍵字聲明的變量才具備塊級做用域，使用var聲明的變量不具有塊級做用域特性。

在一個大括號中，使用let 關鍵字聲明的變量才具備塊級做用域，var關鍵字是不具有這個特色的。

if(true) {
    let num = 100
  var abc = 200
}
console.log(abc) // 200
console.log(num) // num is not defined

防止循環變量變成全局變量

for(var i=0; i<2; i++) {
    
}
console.log(i) //2 

for(let j=0; j<2; j++) {
    
}
console.log(j) //j is not defined

使用let聲明的變量 不存在變量提高

console.log(a); //a is not defined
let a = 20

使用let聲明的變量有暫時性死區特性

var tmp = 123;
if(true) {
    tmp = 'abc'
  let tmp;   // Cannot access 'tmp' before initialization
}

經典面試例子

1. 用var 聲明

var arr = []
for(var i = 0; i<2; i++){
    arr[i] = function () {
    console.log(i)
  }
}
arr[0](); // 2
arr[1](); // 2

因爲變量i具體有全局做用，因此最終循環後獲得i都是2，執行完也是2，以下圖

1. 用let聲明變量

let arr = []
for(let i = 0; i<2; i++){
    arr[i] = function () {
    console.log(i)
  }
}
arr[0](); // 0
arr[1](); // 1

代碼每次循環都會產生一個塊級做用域，每一個塊級做用域中的變量都是不一樣的，函數執行時輸出的事本身上一級（循環產生的塊級做用域）做用域下的i值

const

做用： 聲明常量，常量就是值（內存地址）不能變化的量

• 與let同樣，具備塊級做用域
• 聲明常量時必須賦值
• 常量賦值後，值不能修改

// 使用const 關鍵字聲明的常量必須賦初始值
const PI //Missing initializer in const declaration

const聲明的常量賦值後，值不能再改變

const PI = 3.14
PI = 100  // Assignment to constant variable.

當const聲明事數組或對象時候，內部值能夠改變，但內存中存儲地址沒變

const arr = [100, 200];
arr[0] = 'a';
arr[1] = 'b';
console.log(arr) // ['a', 'b]
arr = ['c','d'] //Assignment to constant variable.

let、const、var的區別

1. 使用 var 聲明的變量，其做用域爲該語句所在的函數內，且存在變量提高現象。
2. 使用 let 聲明的變量，其做用域爲該語句所在的代碼塊內，不存在變量提高。 
3. 使用 const 聲明的是常量，在後面出現的代碼中不能再修改該常量的值。

解構賦值

ES6中容許從數組中提取值，按照對應位置，對變量賦值，對象也能夠實現解構。

數組解構

數值解構容許咱們按照一一對應的關係從數組中提取值而後將值賦值給變量

let [a, b, c] = [1, 2, 3]
console.log(a) // 1
console.log(b) //2
console.log(c) //3

若是解構不成功，變量值爲undefined

let [foo] = [];
let [bar, foo] = [1]
console.log(bar) //1
console.log(foo) //undefined

對象解構

對象解構容許咱們使用變量的名字匹配對象的屬性，匹配成功將對象屬性的值賦值給變量

let person = { name: 'lanfeng', age: 20 }
let { name, age} = person
console.log(name) //lanfeng
console.log(age) // 20

 對象解構的另一種寫法

let person = { name: 'lanfeng', age: 20 } 
let { name: myName, age: myAge = 0} = person  //myName，myAge屬於別名
console.log(myName) //lanfeng
console.log(myAge) // 20

箭頭函數

ES6中新增的定義函數的方式

() => {}
const fn = () => {}

箭頭函數事用來簡化函數定義語法的

const fn = () => {
    console.log(123)
}
fn() //123

函數體中只有一個代碼，且代碼中的執行結果就是返回值，能夠省略大括號

// ES6以前的定義方法
function sum(num1, num2) {
    return num1+ num2
}
const sum = (num1, num2) => num1 + num2

若是形參只有一個，能夠省略小括號

function fn(v) {
 return v
}
const fn v => v

箭頭函數不綁定this關鍵字，箭頭函數中的this，指向的是函數定義位置的上下文this

//箭頭函數不綁定this,箭頭函數沒有本身的this關鍵字，
若是在箭頭函數中使用this,this關鍵字將指向箭頭函數定義位置中的this
const obj = {name: 'lanfeng'}
function fn() {
    console.log(this)
  return () => {
    console.log(this)
  }
}
const resFn = fn.call(obj) // 指向obj
resFn() //this指向obj

箭頭函數的經典例子：

var obj = {
    age: 20,
  say: () => {
     console.log(this.age)
  }
}
obj.say() //undefined,由於指向的是window

剩餘參數

剩餘參數語法容許咱們將一個不定數量的參數表示爲一個數組，

function sum(first, ...args) {
    console.log(first) // 10
  console.log(args) //[20, 30]
}
sum(10, 20, 30)

剩餘參數和解構配合使用

let arr = ['lanfeg','qianduan', 'yanfa']
let [s1, ...s2] = arr
console.log(s1) //lanfeg
console.log(s2) // ['qianduan', 'yanfa']

總結

本篇文章主要分享了ES6新增的一些語法，好比let、const聲明變量常量，解構賦值、箭頭函數、剩餘函數等它們的各自用法及特色。如想了解更多，請掃描下面的二維碼：