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，如下圖

2. 用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聲明變量常量，解構賦值、箭頭函數、剩餘函數等它們的各自用法及特點。