# 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宣告變數常量，解構賦值、箭頭函式、剩余函式等它們的各自用法及特點，如想了解更多，請掃描下面的二維碼：

標籤：JavaScript

上一篇：ajax

下一篇：本地存盤localStorage和sessionStorage